Đặt giá trị thuộc tính mô hình trong javascript mvc

Hướng dẫn này trình bày một số cách phổ biến để điền danh sách thả xuống trong ASP. NET MVC Razor, tập trung vào việc tạo các biểu mẫu HTML chức năng với số lượng mã tối thiểu. Nó nhằm giúp các nhà phát triển đang nỗ lực cải thiện trình độ của họ với một số công nghệ chính

Cũng được hiển thị là cách nội dung của một danh sách thả xuống có thể được cập nhật động dựa trên lựa chọn được thực hiện trong một danh sách thả xuống khác

Cấp độ kỹ năng

Sẽ rất hữu ích nếu bạn hiểu rõ các chủ đề sau, nhưng không bắt buộc phải có kiến ​​thức làm việc sâu rộng

Công nghệTrình độ kỹ năngAjaxGiới thiệuASP. NETBeginnerC#BeginnerEntity FrameworkBeginnerJavaScriptBeginnerjQueryGiới thiệuMVCBeginner

Phạm vi

Hướng dẫn này tập trung vào ASP. NET MVC theo mẫu thiết kế model-view view-model (MVVM). Giải pháp bao gồm một lượng nhỏ JavaScript sử dụng thư viện jQuery, ngoài mã C# bắt buộc. Entity Framework được sử dụng để xử lý giao diện giữa cơ sở dữ liệu SQL Server và các thực thể dữ liệu trong mô hình

Cấu trúc

1. Chúng ta sẽ bắt đầu với mã cần thiết để triển khai danh sách thả xuống được điền khi mô hình chế độ xem được tạo

2. Dựa trên chức năng đó, chúng ta sẽ xem xét cách điền danh sách thả xuống Bang/Tỉnh/Khu vực dựa trên quốc gia đã chọn

3. Tiếp theo, chúng ta sẽ xem xét các thực thể làm cơ sở cho nghiên cứu điển hình và cách các phần khớp với nhau

4. Cuối cùng, chúng ta sẽ đề cập đến một số cân nhắc để xây dựng các giải pháp sản xuất

nghiên cứu điển hình

Giải pháp Visual Studio hoàn chỉnh với tất cả mã được hiển thị trong hướng dẫn này có sẵn từ GitHub

quy ước

Trong mỗi đoạn mã bên dưới, chúng ta sẽ thấy tên tệp từ dự án mẫu được liên kết, như thế này

BlipDrop. csproj

Chúng ta cũng sẽ xem các câu lệnh

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

Dấu ba chấm (

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

Tạo Danh sách thả xuống từ Mô hình Chế độ xem giới hạn của Chế độ xem

Việc triển khai danh sách thả xuống với dữ liệu được cung cấp trong mô hình chế độ xem bao gồm bốn thành phần

1. Xem mô hình
2. Chế độ xem dao cạo
3. hành động điều khiển
4. phương pháp lưu trữ

Chúng ta sẽ xem xét mã cần thiết cho từng mã này. Nếu bạn cần hiểu rõ hơn về cách các đoạn mã này phù hợp với từng thành phần, phần sau đây sẽ cung cấp bức tranh cấp cao hơn về tất cả các thành phần

Xem mô hình

Sử dụng mô hình dạng xem làm mô hình cho biểu mẫu có chứa các phần tử thả xuống tách phần trình bày khỏi cấu trúc. Giữ mọi thứ bình thường hóa xảy ra ở mặt sau

Trong ví dụ của chúng tôi, chúng tôi đang tạo một bản ghi Khách hàng mới. Khách hàng có tài sản Quốc gia và Khu vực (tiểu bang hoặc tỉnh)

Khách hàngDisplayViewMô hình. cs

1using System.Collections.Generic;
2using System.ComponentModel.DataAnnotations;
3using System.Web.Mvc;
4
5namespace BlipDrop.ViewModels
6{
7    public class CustomerEditViewModel
8    {
9        [Display(Name = "Customer Number")]
10        public string CustomerID { get; set; }
11
12        [Required]
13        [Display(Name = "Customer Name")]
14        [StringLength(75)]
15        public string CustomerName { get; set; }
16
17        [Required]
18        [Display(Name = "Country")]
19        public string SelectedCountryIso3 { get; set; }
20        public IEnumerable<SelectListItem> Countries { get; set; }
21
22        [Required]
23        [Display(Name = "State / Region")]
24        public string SelectedRegionCode { get; set; }
25        public IEnumerable<SelectListItem> Regions { get; set; }
26    }
27}

csharp

Lưu ý rằng đối với mỗi thuộc tính mà chúng tôi sẽ cung cấp danh sách thả xuống, chúng tôi có hai trường trong mô hình chế độ xem

1. một cho danh sách
2. một cho mục đã chọn

Danh sách được tạo thành từ một bộ sưu tập

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

Trường lưu trữ mục đã chọn giữ khóa duy nhất cho mỗi thực thể. Khóa duy nhất của giá trị được chọn sẽ giống với một trong các phần tử của

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

Dao cạo xem

Đây là các phần tử biểu mẫu cho trường Quốc gia trên chế độ xem Dao cạo hiển thị việc triển khai

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

Tạo ra. cshtml, Đoạn mã quốc gia

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

html

So sánh câu lệnh

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

1using System.Collections.Generic;
2using System.Web.Mvc;
3using BlipDrop.Data;
4using BlipDrop.ViewModels;
5
6namespace BlipDrop.Controllers
7{
8    public class CustomerController : Controller
9    {
10        // GET: Customer
11        public ActionResult Index()
12        {
13            var repo = new CustomersRepository();
14            var customerList = repo.GetCustomers();
15            return View(customerList);
16        }
17    ...
18    }
19}

1using System.Collections.Generic;
2using System.Web.Mvc;
3using BlipDrop.Data;
4using BlipDrop.ViewModels;
5
6namespace BlipDrop.Controllers
7{
8    public class CustomerController : Controller
9    {
10        // GET: Customer
11        public ActionResult Index()
12        {
13            var repo = new CustomersRepository();
14            var customerList = repo.GetCustomers();
15            return View(customerList);
16        }
17    ...
18    }
19}

1using System.Collections.Generic;
2using System.Web.Mvc;
3using BlipDrop.Data;
4using BlipDrop.ViewModels;
5
6namespace BlipDrop.Controllers
7{
8    public class CustomerController : Controller
9    {
10        // GET: Customer
11        public ActionResult Index()
12        {
13            var repo = new CustomersRepository();
14            var customerList = repo.GetCustomers();
15            return View(customerList);
16        }
17    ...
18    }
19}

1using System.Collections.Generic;
2using System.Web.Mvc;
3using BlipDrop.Data;
4using BlipDrop.ViewModels;
5
6namespace BlipDrop.Controllers
7{
8    public class CustomerController : Controller
9    {
10        // GET: Customer
11        public ActionResult Index()
12        {
13            var repo = new CustomersRepository();
14            var customerList = repo.GetCustomers();
15            return View(customerList);
16        }
17    ...
18    }
19}

1using System.Collections.Generic;
2using System.Web.Mvc;
3using BlipDrop.Data;
4using BlipDrop.ViewModels;
5
6namespace BlipDrop.Controllers
7{
8    public class CustomerController : Controller
9    {
10        // GET: Customer
11        public ActionResult Index()
12        {
13            var repo = new CustomersRepository();
14            var customerList = repo.GetCustomers();
15            return View(customerList);
16        }
17    ...
18    }
19}

1using System.Collections.Generic;
2using System.Web.Mvc;
3using BlipDrop.Data;
4using BlipDrop.ViewModels;
5
6namespace BlipDrop.Controllers
7{
8    public class CustomerController : Controller
9    {
10        // GET: Customer
11        public ActionResult Index()
12        {
13            var repo = new CustomersRepository();
14            var customerList = repo.GetCustomers();
15            return View(customerList);
16        }
17    ...
18    }
19}

Bạn không thể sử dụng trường loại

1using System.Collections.Generic;
2using System.Web.Mvc;
3using BlipDrop.Data;
4using BlipDrop.ViewModels;
5
6namespace BlipDrop.Controllers
7{
8    public class CustomerController : Controller
9    {
10        // GET: Customer
11        public ActionResult Index()
12        {
13            var repo = new CustomersRepository();
14            var customerList = repo.GetCustomers();
15            return View(customerList);
16        }
17    ...
18    }
19}

1using System.Collections.Generic;
2using System.Web.Mvc;
3using BlipDrop.Data;
4using BlipDrop.ViewModels;
5
6namespace BlipDrop.Controllers
7{
8    public class CustomerController : Controller
9    {
10        // GET: Customer
11        public ActionResult Index()
12        {
13            var repo = new CustomersRepository();
14            var customerList = repo.GetCustomers();
15            return View(customerList);
16        }
17    ...
18    }
19}

Lưu ý rằng phần tử HTML trên trang được hiển thị sẽ có giá trị thuộc tính

1using System.Collections.Generic;
2using System.Web.Mvc;
3using BlipDrop.Data;
4using BlipDrop.ViewModels;
5
6namespace BlipDrop.Controllers
7{
8    public class CustomerController : Controller
9    {
10        // GET: Customer
11        public ActionResult Index()
12        {
13            var repo = new CustomersRepository();
14            var customerList = repo.GetCustomers();
15            return View(customerList);
16        }
17    ...
18    }
19}

1using System.Collections.Generic;
2using System.Web.Mvc;
3using BlipDrop.Data;
4using BlipDrop.ViewModels;
5
6namespace BlipDrop.Controllers
7{
8    public class CustomerController : Controller
9    {
10        // GET: Customer
11        public ActionResult Index()
12        {
13            var repo = new CustomersRepository();
14            var customerList = repo.GetCustomers();
15            return View(customerList);
16        }
17    ...
18    }
19}

1using System.Collections.Generic;
2using System.Web.Mvc;
3using BlipDrop.Data;
4using BlipDrop.ViewModels;
5
6namespace BlipDrop.Controllers
7{
8    public class CustomerController : Controller
9    {
10        // GET: Customer
11        public ActionResult Index()
12        {
13            var repo = new CustomersRepository();
14            var customerList = repo.GetCustomers();
15            return View(customerList);
16        }
17    ...
18    }
19}

Chế độ xem hoàn chỉnh trông như thế này khi được trình duyệt hiển thị

/Khách hàng/Tạo

Hành động điều khiển

Bộ điều khiển của bạn có thể đơn giản. bộ điều khiển của bạn chỉ cần gọi kho lưu trữ thích hợp để lấy mô hình chế độ xem, sau đó bạn chuyển mô hình chế độ xem sang chế độ xem

Bộ điều khiển khách hàng. cs, Hành động lập chỉ mục

________số 8

csharp

Lưu ý trong các câu lệnh

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

Phương pháp lưu trữ

Trong ví dụ đơn giản của chúng ta, kho lưu trữ khách hàng tạo một thể hiện của lớp ______212 và gán một GUID mới cho

1using System.Collections.Generic;
2using System.ComponentModel.DataAnnotations;
3using System.Web.Mvc;
4
5namespace BlipDrop.ViewModels
6{
7    public class CustomerEditViewModel
8    {
9        [Display(Name = "Customer Number")]
10        public string CustomerID { get; set; }
11
12        [Required]
13        [Display(Name = "Customer Name")]
14        [StringLength(75)]
15        public string CustomerName { get; set; }
16
17        [Required]
18        [Display(Name = "Country")]
19        public string SelectedCountryIso3 { get; set; }
20        public IEnumerable<SelectListItem> Countries { get; set; }
21
22        [Required]
23        [Display(Name = "State / Region")]
24        public string SelectedRegionCode { get; set; }
25        public IEnumerable<SelectListItem> Regions { get; set; }
26    }
27}

Nó cũng gọi các kho lưu trữ quốc gia và khu vực để lấy danh sách các quốc gia và khu vực để mô hình chế độ xem sẽ có dữ liệu cho danh sách thả xuống trên chế độ xem

kho lưu trữ khách hàng. cs

1using System.Collections.Generic;
2using System.ComponentModel.DataAnnotations;
3using System.Web.Mvc;
4
5namespace BlipDrop.ViewModels
6{
7    public class CustomerEditViewModel
8    {
9        [Display(Name = "Customer Number")]
10        public string CustomerID { get; set; }
11
12        [Required]
13        [Display(Name = "Customer Name")]
14        [StringLength(75)]
15        public string CustomerName { get; set; }
16
17        [Required]
18        [Display(Name = "Country")]
19        public string SelectedCountryIso3 { get; set; }
20        public IEnumerable<SelectListItem> Countries { get; set; }
21
22        [Required]
23        [Display(Name = "State / Region")]
24        public string SelectedRegionCode { get; set; }
25        public IEnumerable<SelectListItem> Regions { get; set; }
26    }
27}

csharp

Lưu ý rằng trong trường hợp này, chúng ta không cần sử dụng phiên bản ngữ cảnh dữ liệu,

1using System.Collections.Generic;
2using System.ComponentModel.DataAnnotations;
3using System.Web.Mvc;
4
5namespace BlipDrop.ViewModels
6{
7    public class CustomerEditViewModel
8    {
9        [Display(Name = "Customer Number")]
10        public string CustomerID { get; set; }
11
12        [Required]
13        [Display(Name = "Customer Name")]
14        [StringLength(75)]
15        public string CustomerName { get; set; }
16
17        [Required]
18        [Display(Name = "Country")]
19        public string SelectedCountryIso3 { get; set; }
20        public IEnumerable<SelectListItem> Countries { get; set; }
21
22        [Required]
23        [Display(Name = "State / Region")]
24        public string SelectedRegionCode { get; set; }
25        public IEnumerable<SelectListItem> Regions { get; set; }
26    }
27}

1using System.Collections.Generic;
2using System.ComponentModel.DataAnnotations;
3using System.Web.Mvc;
4
5namespace BlipDrop.ViewModels
6{
7    public class CustomerEditViewModel
8    {
9        [Display(Name = "Customer Number")]
10        public string CustomerID { get; set; }
11
12        [Required]
13        [Display(Name = "Customer Name")]
14        [StringLength(75)]
15        public string CustomerName { get; set; }
16
17        [Required]
18        [Display(Name = "Country")]
19        public string SelectedCountryIso3 { get; set; }
20        public IEnumerable<SelectListItem> Countries { get; set; }
21
22        [Required]
23        [Display(Name = "State / Region")]
24        public string SelectedRegionCode { get; set; }
25        public IEnumerable<SelectListItem> Regions { get; set; }
26    }
27}

1using System.Collections.Generic;
2using System.ComponentModel.DataAnnotations;
3using System.Web.Mvc;
4
5namespace BlipDrop.ViewModels
6{
7    public class CustomerEditViewModel
8    {
9        [Display(Name = "Customer Number")]
10        public string CustomerID { get; set; }
11
12        [Required]
13        [Display(Name = "Customer Name")]
14        [StringLength(75)]
15        public string CustomerName { get; set; }
16
17        [Required]
18        [Display(Name = "Country")]
19        public string SelectedCountryIso3 { get; set; }
20        public IEnumerable<SelectListItem> Countries { get; set; }
21
22        [Required]
23        [Display(Name = "State / Region")]
24        public string SelectedRegionCode { get; set; }
25        public IEnumerable<SelectListItem> Regions { get; set; }
26    }
27}

1using System.Collections.Generic;
2using System.ComponentModel.DataAnnotations;
3using System.Web.Mvc;
4
5namespace BlipDrop.ViewModels
6{
7    public class CustomerEditViewModel
8    {
9        [Display(Name = "Customer Number")]
10        public string CustomerID { get; set; }
11
12        [Required]
13        [Display(Name = "Customer Name")]
14        [StringLength(75)]
15        public string CustomerName { get; set; }
16
17        [Required]
18        [Display(Name = "Country")]
19        public string SelectedCountryIso3 { get; set; }
20        public IEnumerable<SelectListItem> Countries { get; set; }
21
22        [Required]
23        [Display(Name = "State / Region")]
24        public string SelectedRegionCode { get; set; }
25        public IEnumerable<SelectListItem> Regions { get; set; }
26    }
27}

Quốc giaKho lưu trữ. cs

1using System.Collections.Generic;
2using System.ComponentModel.DataAnnotations;
3using System.Web.Mvc;
4
5namespace BlipDrop.ViewModels
6{
7    public class CustomerEditViewModel
8    {
9        [Display(Name = "Customer Number")]
10        public string CustomerID { get; set; }
11
12        [Required]
13        [Display(Name = "Customer Name")]
14        [StringLength(75)]
15        public string CustomerName { get; set; }
16
17        [Required]
18        [Display(Name = "Country")]
19        public string SelectedCountryIso3 { get; set; }
20        public IEnumerable<SelectListItem> Countries { get; set; }
21
22        [Required]
23        [Display(Name = "State / Region")]
24        public string SelectedRegionCode { get; set; }
25        public IEnumerable<SelectListItem> Regions { get; set; }
26    }
27}

csharp

Lưu ý rằng loại trả về cho Kho lưu trữ Quốc gia là cùng loại với danh sách Quốc gia trong mô hình dạng xem,

1using System.Collections.Generic;
2using System.ComponentModel.DataAnnotations;
3using System.Web.Mvc;
4
5namespace BlipDrop.ViewModels
6{
7    public class CustomerEditViewModel
8    {
9        [Display(Name = "Customer Number")]
10        public string CustomerID { get; set; }
11
12        [Required]
13        [Display(Name = "Customer Name")]
14        [StringLength(75)]
15        public string CustomerName { get; set; }
16
17        [Required]
18        [Display(Name = "Country")]
19        public string SelectedCountryIso3 { get; set; }
20        public IEnumerable<SelectListItem> Countries { get; set; }
21
22        [Required]
23        [Display(Name = "State / Region")]
24        public string SelectedRegionCode { get; set; }
25        public IEnumerable<SelectListItem> Regions { get; set; }
26    }
27}

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

1using System.Collections.Generic;
2using System.ComponentModel.DataAnnotations;
3using System.Web.Mvc;
4
5namespace BlipDrop.ViewModels
6{
7    public class CustomerEditViewModel
8    {
9        [Display(Name = "Customer Number")]
10        public string CustomerID { get; set; }
11
12        [Required]
13        [Display(Name = "Customer Name")]
14        [StringLength(75)]
15        public string CustomerName { get; set; }
16
17        [Required]
18        [Display(Name = "Country")]
19        public string SelectedCountryIso3 { get; set; }
20        public IEnumerable<SelectListItem> Countries { get; set; }
21
22        [Required]
23        [Display(Name = "State / Region")]
24        public string SelectedRegionCode { get; set; }
25        public IEnumerable<SelectListItem> Regions { get; set; }
26    }
27}

1using System.Collections.Generic;
2using System.ComponentModel.DataAnnotations;
3using System.Web.Mvc;
4
5namespace BlipDrop.ViewModels
6{
7    public class CustomerEditViewModel
8    {
9        [Display(Name = "Customer Number")]
10        public string CustomerID { get; set; }
11
12        [Required]
13        [Display(Name = "Customer Name")]
14        [StringLength(75)]
15        public string CustomerName { get; set; }
16
17        [Required]
18        [Display(Name = "Country")]
19        public string SelectedCountryIso3 { get; set; }
20        public IEnumerable<SelectListItem> Countries { get; set; }
21
22        [Required]
23        [Display(Name = "State / Region")]
24        public string SelectedRegionCode { get; set; }
25        public IEnumerable<SelectListItem> Regions { get; set; }
26    }
27}

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

Khu vựcKho lưu trữ. cs, Phần 1

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

csharp

Khởi tạo danh sách thả xuống phụ thuộc theo cách này cũng cho bạn cơ hội hiển thị thông báo thông tin (e. g. , "chọn quốc gia trước") trước khi điền giá trị danh sách

Tạo một danh sách thả xuống dựa trên lựa chọn trong một danh sách thả xuống khác

Kỹ thuật này thêm hai đoạn mã nữa vào những đoạn mã trên

• Một hành động điều khiển HttpGet bổ sung
• JavaScript trên chế độ xem

Chế độ xem dao cạo, Phần khu vực

Chế độ xem Tạo cho Dao cạo bao gồm danh sách thả xuống cho Khu vực hoạt động giống như chế độ xem cho Quốc gia

Tạo ra. cshtml, Đoạn mã vùng

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

csharp

Hãy nhớ rằng chúng tôi đã khởi tạo trường Khu vực của mô hình chế độ xem với một danh sách trống. Chúng ta sẽ cần đi và lấy một số giá trị cho danh sách khi người dùng chọn một quốc gia

Chế độ xem dao cạo, mã JavaScript

Việc điền các giá trị danh sách cho trường thả xuống trên biểu mẫu HTML yêu cầu một sự kiện ở phía máy khách. Kỹ thuật này sử dụng thư viện jQuery JavaScript để liên kết trình xử lý sự kiện với danh sách thả xuống Sự kiện thay đổi quốc gia. Bất cứ khi nào người dùng chọn một giá trị trong menu thả xuống Quốc gia, sự kiện sẽ kích hoạt và mã JavaScript sẽ thực thi

Tạo ra. cshtml, Đoạn mã script

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

jav

Điều này có vẻ rất nhiều nếu bạn còn khá mới với JavaScript, nhưng thật dễ dàng để giải nén

1. Khi sự kiện

   1using System.Collections.Generic;
   2using System.ComponentModel.DataAnnotations;
   3using System.Web.Mvc;
   4
   5namespace BlipDrop.ViewModels
   6{
   7    public class CustomerEditViewModel
   8    {
   9        [Display(Name = "Customer Number")]
   10        public string CustomerID { get; set; }
   11
   12        [Required]
   13        [Display(Name = "Customer Name")]
   14        [StringLength(75)]
   15        public string CustomerName { get; set; }
   16
   17        [Required]
   18        [Display(Name = "Country")]
   19        public string SelectedCountryIso3 { get; set; }
   20        public IEnumerable<SelectListItem> Countries { get; set; }
   21
   22        [Required]
   23        [Display(Name = "State / Region")]
   24        public string SelectedRegionCode { get; set; }
   25        public IEnumerable<SelectListItem> Regions { get; set; }
   26    }
   27}

   85 của phần tử HTML

   1using System.Collections.Generic;
   2using System.Web.Mvc;
   3using BlipDrop.Data;
   4using BlipDrop.ViewModels;
   5
   6namespace BlipDrop.Controllers
   7{
   8    public class CustomerController : Controller
   9    {
   10        // GET: Customer
   11        public ActionResult Index()
   12        {
   13            var repo = new CustomersRepository();
   14            var customerList = repo.GetCustomers();
   15            return View(customerList);
   16        }
   17    ...
   18    }
   19}

   9 .

   • Lấy giá trị của phần tử và lưu vào biến

     1using System.Collections.Generic;
     2using System.ComponentModel.DataAnnotations;
     3using System.Web.Mvc;
     4
     5namespace BlipDrop.ViewModels
     6{
     7    public class CustomerEditViewModel
     8    {
     9        [Display(Name = "Customer Number")]
     10        public string CustomerID { get; set; }
     11
     12        [Required]
     13        [Display(Name = "Customer Name")]
     14        [StringLength(75)]
     15        public string CustomerName { get; set; }
     16
     17        [Required]
     18        [Display(Name = "Country")]
     19        public string SelectedCountryIso3 { get; set; }
     20        public IEnumerable<SelectListItem> Countries { get; set; }
     21
     22        [Required]
     23        [Display(Name = "State / Region")]
     24        public string SelectedRegionCode { get; set; }
     25        public IEnumerable<SelectListItem> Regions { get; set; }
     26    }
     27}

     87 .
   • Xóa mọi thứ trước đó trong danh sách thả xuống

     1using System.Collections.Generic;
     2using System.ComponentModel.DataAnnotations;
     3using System.Web.Mvc;
     4
     5namespace BlipDrop.ViewModels
     6{
     7    public class CustomerEditViewModel
     8    {
     9        [Display(Name = "Customer Number")]
     10        public string CustomerID { get; set; }
     11
     12        [Required]
     13        [Display(Name = "Customer Name")]
     14        [StringLength(75)]
     15        public string CustomerName { get; set; }
     16
     17        [Required]
     18        [Display(Name = "Country")]
     19        public string SelectedCountryIso3 { get; set; }
     20        public IEnumerable<SelectListItem> Countries { get; set; }
     21
     22        [Required]
     23        [Display(Name = "State / Region")]
     24        public string SelectedRegionCode { get; set; }
     25        public IEnumerable<SelectListItem> Regions { get; set; }
     26    }
     27}

     88 .

2. Nếu trường

   1using System.Collections.Generic;
   2using System.Web.Mvc;
   3using BlipDrop.Data;
   4using BlipDrop.ViewModels;
   5
   6namespace BlipDrop.Controllers
   7{
   8    public class CustomerController : Controller
   9    {
   10        // GET: Customer
   11        public ActionResult Index()
   12        {
   13            var repo = new CustomersRepository();
   14            var customerList = repo.GetCustomers();
   15            return View(customerList);
   16        }
   17    ...
   18    }
   19}

   9 chứa một giá trị (và có thể không phải vì phần tử đầu tiên của danh sách Quốc gia là một mục trống).

   • Gọi hành động của bộ điều khiển

     1...
     2<div class="form-group">
     3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
     4    <div class="col-md-5">
     5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
     6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
     7    div>
     8div>
     9...

     60 , chuyển cho nó giá trị đã chọn trong

     1using System.Collections.Generic;
     2using System.Web.Mvc;
     3using BlipDrop.Data;
     4using BlipDrop.ViewModels;
     5
     6namespace BlipDrop.Controllers
     7{
     8    public class CustomerController : Controller
     9    {
     10        // GET: Customer
     11        public ActionResult Index()
     12        {
     13            var repo = new CustomersRepository();
     14            var customerList = repo.GetCustomers();
     15            return View(customerList);
     16        }
     17    ...
     18    }
     19}

     9, and storing the results in the object variable

     1...
     2<div class="form-group">
     3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
     4    <div class="col-md-5">
     5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
     6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
     7    div>
     8div>
     9...

     62.
   • Nếu

     1...
     2<div class="form-group">
     3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
     4    <div class="col-md-5">
     5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
     6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
     7    div>
     8div>
     9...

     62 không rỗng hoặc trống (có thể là nếu không có vùng nào được liên kết với một quốc gia).

     • Tạo phần tử trống làm phần tử đầu tiên của danh sách
     • Lặp qua bộ sưu tập trong

       1...
       2<div class="form-group">
       3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
       4    <div class="col-md-5">
       5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
       6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
       7    div>
       8div>
       9...

       62 và thêm từng phần tử vào danh sách giá trị của trình đơn thả xuống.

Các hàm jQuery bắt đầu bằng ______365 . Để biết thêm thông tin về các chức năng được sử dụng, hãy xem.

1using System.Collections.Generic;
2using System.ComponentModel.DataAnnotations;
3using System.Web.Mvc;
4
5namespace BlipDrop.ViewModels
6{
7    public class CustomerEditViewModel
8    {
9        [Display(Name = "Customer Number")]
10        public string CustomerID { get; set; }
11
12        [Required]
13        [Display(Name = "Customer Name")]
14        [StringLength(75)]
15        public string CustomerName { get; set; }
16
17        [Required]
18        [Display(Name = "Country")]
19        public string SelectedCountryIso3 { get; set; }
20        public IEnumerable<SelectListItem> Countries { get; set; }
21
22        [Required]
23        [Display(Name = "State / Region")]
24        public string SelectedRegionCode { get; set; }
25        public IEnumerable<SelectListItem> Regions { get; set; }
26    }
27}

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

hành động điều khiển

JavaScript trên trang (Tạo. cshtml) gọi một hành động của bộ điều khiển để lấy dữ liệu từ máy chủ một cách không đồng bộ. Công việc của hành động điều khiển là gọi kho lưu trữ để lấy dữ liệu, sau đó chuyển đổi nó từ IEnumerable của SelectListItems sang định dạng JSON và chuyển nó trở lại trang

Bộ điều khiển khách hàng. cs, Hành động GetRegions

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

csharp

Lưu ý rằng mặc dù nó hoạt động hoàn toàn tốt để chuyển IEnumerable sang chế độ xem bằng ASP. NET, không hoạt động đối với các cuộc gọi Ajax. Liên kết mô hình đảm nhiệm việc chuyển đổi IEnumerable thành HTML

Phương pháp lưu trữ

Kho lưu trữ vùng. cs chứa hai chữ ký cho

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

Chúng tôi đã xem xét chữ ký đầu tiên khi xem xét Kho lưu trữ Khu vực] lần đầu tiên ở trên

Phương thức này hoạt động giống như phương thức

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

Khu vựcKho lưu trữ. cs, Phần 2

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

csharp

Lưu ý rằng chúng tôi đang đặt thứ tự của các thành phần là tên khu vực, thay vì

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

Thực thể nghiên cứu điển hình

Nghiên cứu tình huống là một danh sách khách hàng (rất) đơn giản. Mỗi cái được gán một GUID làm mã định danh duy nhất. Tên, quốc gia và khu vực của họ xác định từng đối tượng Khách hàng

Các quốc gia có thể có 0 hoặc nhiều khu vực

lược đồ cơ sở dữ liệu

Sơ đồ lược đồ cơ sở dữ liệu quan hệ cho nhiều dự án ví dụ về danh sách thả xuống

Thực thể dữ liệu

Các lớp cho các thực thể dữ liệu tạo thành phía Đối tượng của Trình ánh xạ quan hệ đối tượng (ORM) là Khung thực thể. Việc sử dụng di chuyển thực thể theo mã ưu tiên, như được thực hiện trong dự án này, cho phép các bảng cơ sở dữ liệu và thuộc tính của chúng, bao gồm các mối quan hệ của chúng, được xác định trong mã. Bằng cách xác định cơ sở dữ liệu theo cách này, nó có thể được đồng bộ hóa với các thực thể mà nó cung cấp kho lưu trữ dữ liệu liên tục

khách hàng. cs

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

csharp

Trong lớp khách hàng, chúng tôi có thể xác định các trường bắt buộc và đặt độ dài tối đa của các trường chuỗi (cũng như các thuộc tính khác). Entity Framework sử dụng các thuộc tính này khi tạo và sửa đổi cơ sở dữ liệu

Độ dài tối đa được chỉ định trong lớp thực thể xác định kích thước tối đa của trường cơ sở dữ liệu. Trong mô hình dạng xem, thuộc tính ____375 được sử dụng để xác định kích thước tối đa của đầu vào trường.

Trong nghiên cứu điển hình, chúng tôi đã thực hiện một số điều dường như không nhất quán để chứng minh cách thức Entity Framework và mẫu thiết kế chế độ xem mô hình dạng xem mô hình (MVVM) hoạt động cùng nhau

• Trong mô hình dạng xem, trường Tên khách hàng là

  1...
  2<div class="form-group">
  3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
  4    <div class="col-md-5">
  5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
  6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
  7    div>
  8div>
  9...

  76 nhưng kích thước trường cơ sở dữ liệu là

  1...
  2<div class="form-group">
  3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
  4    <div class="col-md-5">
  5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
  6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
  7    div>
  8div>
  9...

  77, demonstrating that input requirements can be different than database requirements (making the input size larger than the database size can cause problems).
• Trong mô hình dạng xem, Mã vùng là

  1...
  2<div class="form-group">
  3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
  4    <div class="col-md-5">
  5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
  6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
  7    div>
  8div>
  9...

  78 , nhưng đó là trường tùy chọn trong cơ sở dữ liệu. Điều này là để chứng minh việc xử lý lỗi HtmlHelpers.

Mối quan hệ cơ sở dữ liệu được xác định với các thuộc tính điều hướng giống như mối quan hệ Khách hàng-Quốc gia

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

csharp

Điều này xác định mối quan hệ khóa ngoại bảng Quốc gia

Xem phần tài nguyên học tập nếu bạn cần hiểu rõ hơn về Entity Framework

Quốc gia. cs

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

csharp

Lớp này có nhiều tính năng giống như lớp Khách hàng, nhưng trong trường hợp này, thuộc tính điều hướng xác định mối quan hệ một-nhiều giữa Quốc gia và Khu vực

Khu vực. cs

1...
2<div class="form-group">
3    @Html.LabelFor(x => Model.SelectedCountryIso3, htmlAttributes: new { @class = "control-label col-md-2" })
4    <div class="col-md-5">
5        @Html.DropDownListFor(x => Model.SelectedCountryIso3, new SelectList(Model.Countries, "Value", "Text"), htmlAttributes: new { @class = "form-control", id = "Country"})
6        @Html.ValidationMessageFor(x => x.SelectedCountryIso3, "", new { @class = "text-danger" })
7    div>
8div>
9...

csharp

Trong dự án mẫu, mỗi khu vực có một Mã vùng duy nhất. Trong thực tế, số nhận dạng duy nhất cho một khu vực có nhiều khả năng là mã kết hợp bao gồm số nhận dạng quốc gia và mã vùng. Để đơn giản, chúng tôi đã đơn giản hóa cấu trúc

cân nhắc sản xuất

Biến một dự án ví dụ như thế này thành ứng dụng sản xuất thường có nghĩa là thêm mã để giải quyết một số yêu cầu

• Bản địa hóa (ngôn ngữ và quy ước)
• Thông báo lỗi cho giao diện người dùng
• Xử lý lỗi và ghi nhật ký
• bài kiểm tra đơn vị
• triển khai

Ngoài ra còn có một số cân nhắc đối với việc sử dụng các kỹ thuật trình bày ở trên, đặc biệt liên quan đến hiệu suất

Khi các trang web thực hiện cuộc gọi máy chủ để lấy dữ liệu, sẽ có một số độ trễ liên quan đến chuyến đi khứ hồi đến máy chủ và độ trễ này có thể tăng lên khi máy chủ đang tải. Hai điều thường được thực hiện để cải thiện tình trạng này

1. Triển khai các hành động của bộ điều khiển và các phương thức lưu trữ không đồng bộ
2. Hiển thị chỉ báo tiến trình trong khi máy khách đang chờ phản hồi từ máy chủ

Tùy thuộc vào dữ liệu được đề cập, có thể tốt hơn nếu chuyển tất cả dữ liệu cần thiết đến máy khách và thực hiện các truy vấn đáp ứng cục bộ. Ví dụ: ngoài việc gửi tất cả các bản ghi quốc gia trong mô hình dạng xem, tất cả các bản ghi khu vực cũng sẽ được gửi. Các khu vực được liên kết với quốc gia do người dùng chọn sẽ được điền vào danh sách thả xuống Khu vực với mã JavaScript chạy cục bộ

Thêm thông tin

Nếu bạn muốn tìm hiểu sâu hơn về các chủ đề được thảo luận trong hướng dẫn này, sau đây là danh sách tài nguyên được chọn

Các khóa học về thị giác số nhiều liên quan

PluralSight cung cấp một số khóa học về các chủ đề được đề cập trong hướng dẫn này. Sau đây là một số gợi ý được tổ chức bởi công nghệ

(Các) Khóa học Công nghệ AjaxASP. NET Ajax JavaScript và jQuery ASP. Ứng dụng NETBuilding với ASP. NET MVC 4C#C# Nguyên tắc cơ bản với Visual Studio 2015Entity FrameworkBắt đầu với Entity Framework 6JavaScriptJavaScript Nguyên tắc cơ bản cho ES6jQueryASP. NET Ajax JavaScript và jQueryMVCASP. NET MVC 5 Nguyên tắc cơ bản

Mã nghiên cứu điển hình trên GitHub

Giải pháp Visual Studio hoàn chỉnh cho mã hiển thị ở trên có sẵn trên GitHub tại

https. //github. com/ajsaulsberry/BlipDrop

Bạn có thể rẽ nhánh dự án, chạy mã và tự mình thử nghiệm

Lưu ý rằng dự án mẫu không nhằm mục đích nghiên cứu trường hợp thực tế hoặc mã sản xuất;

Làm cách nào để đặt giá trị thành mô hình trong JavaScript?

Làm cách nào để đặt giá trị mô hình trong jQuery?