ASP.NET MVC - 使用 MVVM 设计模式、实体框架和 Ajax 在 Razor 视图中填充下拉列表

2019-04-26 08:00:00 · 飞浪

了解在 ASP.NET MVC Razor 视图中填充下拉列表的几种常用方法，重点是使用最少的代码生成功能性 HTML 表单。

介绍

本指南介绍了在 ASP.NET MVC Razor 视图中填充下拉列表的几种常用方法，重点介绍如何使用最少的代码生成功能性 HTML 表单。它旨在帮助那些正在努力提高对某些关键技术的熟练程度的开发人员。

还显示了如何根据另一个下拉列表中的选择动态更新一个下拉列表的内容。

技能水平

了解以下主题将会有所帮助，但不需要广泛的工作知识。

技术	技能水平
阿贾克斯	介绍
网上邻居	初学者
C#	初学者
实体框架	初学者
JavaScript	初学者
jQuery	介绍
MVC	初学者

范围

本指南重点介绍遵循模型视图视图模型 (MVVM) 设计模式的 ASP.NET MVC。除了必需的 C# 代码外，该解决方案还包含少量利用jQuery库的 JavaScript。Entity Framework 用于处理 SQL Server 数据库与模型中的数据实体之间的接口。

结构

我们将从实现视图模型创建时填充的下拉列表的基本代码开始。
基于该功能，我们将研究如何根据所选国家/地区填充州/省/地区下拉菜单。
接下来，我们将研究案例研究的基础实体以及各个部分如何组合在一起。
最后，我们将讨论构建生产解决方案的一些注意事项。

案例研究

可以从GitHub获取包含本指南中显示的所有代码的完整 Visual Studio 解决方案。

公约

在下面的每个代码段中，我们将看到来自相关示例项目的文件名，如下所示：

BlipDrop.csproj

我们还将看到使用语句，以便您更好地理解组件如何相互引用。

代码段中的省略号（...）表示完整文件中该段上方或下方的代码与当前主题无关。

从视图的绑定视图模型创建下拉列表

使用视图模型中提供的数据实现下拉列表涉及四个组件：

查看模型
Razor 视图
控制器动作
存储库方法

我们将介绍每个组件的基本代码。如果您需要更好地了解这些代码片段如何融入每个组件，以下部分将提供所有组件的更高层次的图景。

查看模型

使用视图模型作为包含下拉元素的表单的模型，将表示与结构分开。保持规范化发生在后端。

在我们的示例中，我们正在创建新的客户记录。客户具有国家和地区（州或省）属性。

客户显示视图模型.cs

      using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace BlipDrop.ViewModels
{
    public class CustomerEditViewModel
    {
        [Display(Name = "Customer Number")]
        public string CustomerID { get; set; }

        [Required]
        [Display(Name = "Customer Name")]
        [StringLength(75)]
        public string CustomerName { get; set; }

        [Required]
        [Display(Name = "Country")]
        public string SelectedCountryIso3 { get; set; }
        public IEnumerable<SelectListItem> Countries { get; set; }

        [Required]
        [Display(Name = "State / Region")]
        public string SelectedRegionCode { get; set; }
        public IEnumerable<SelectListItem> Regions { get; set; }
    }
}
    

请注意，对于我们要提供下拉列表的每个属性，视图模型中都有两个字段：

一份清单
一个用于选定项目

该列表由SelectListItem类型的集合组成。

存储所选项目的字段包含每个实体的唯一键。所选值的唯一键将与SelectListItem的某个元素相同。

Razor View

这些是 Razor 视图上 Country 字段的表单元素，展示了DropDownListFor HtmlHelper的实现。

创建.cshtml，国家/地区代码片段

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

将@Html.DropDownListFor语句与视图模型进行比较。

x => Model.SelectedCountryIso3标识视图模型中将存储所选值的字段。我们存储的是国家/地区的唯一标识符。

new SelectList(Model.Countries, "Value", "Text")标识用于填充下拉列表的列表源，即数据模型中的IEnumerable<SelectListItem> Countries 。请注意，它通过创建一个新的SelectList来实现这一点，该列表包含字段Value和Text，这两个字段对应于数据模型的 Countries 属性中的相同字段。

您不能在视图模型中使用SelectList类型的字段。Razor 引擎需要将数据作为SelectListItems集合来获取，才能正确构建 HTML 元素。MSDN 上的框架文档尽可能不透明地记录了这一点。

请注意，呈现的页面上的 HTML 元素将具有Country的id属性值。我们稍后会看到的 JavaScript 代码将使用每个下拉元素的id属性。

浏览器呈现的完整视图如下所示：

/客户/创建

控制器动作

您的控制器可以很简单：您的控制器只需要调用适当的存储库来获取视图模型，然后将视图模型传递给视图：

CustomerController.cs，索引操作

      using System.Collections.Generic;
using System.Web.Mvc;
using BlipDrop.Data;
using BlipDrop.ViewModels;

namespace BlipDrop.Controllers
{
    public class CustomerController : Controller
    {
        // GET: Customer
        public ActionResult Index()
        {
            var repo = new CustomersRepository();
            var customerList = repo.GetCustomers();
            return View(customerList);
        }
    ...
    }
}
    

请注意，在使用语句中，控制器引用数据上下文和视图模型，但不需要访问映射到数据库对象的实体。

存储库方法

在我们的简单示例中，客户存储库创建了CustomerEditViewModel类的实例，并为CustomerID字段分配了一个新的 GUID 。

它还调用国家和地区存储库来获取国家和地区列表，以便视图模型拥有视图下拉列表的数据。

客户存储库.cs

      using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using BlipDrop.Models;
using BlipDrop.ViewModels;

namespace BlipDrop.Data
{
    public class CustomersRepository
    {
    ...
        public CustomerEditViewModel CreateCustomer()
        {
            var cRepo = new CountriesRepository();
            var rRepo = new RegionsRepository();
            var customer = new CustomerEditViewModel()
            {
                CustomerID = Guid.NewGuid().ToString(),
                Countries = cRepo.GetCountries(),
                Regions = rRepo.GetRegions()
            };
            return customer;
        }
    ...
    }
}
    

请注意，在这种情况下，我们不需要使用数据上下文<font style="vertical-align: inhe

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

ASP.NET MVC - 使用 MVVM 设计模式、实体框架和 Ajax 在 Razor 视图中填充下拉列表

杭州电子商务研究院

6年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

技术

技能水平

阿贾克斯

介绍

网上邻居

初学者

实体框架

初学者

JavaScript

初学者

jQuery

介绍

MVC

初学者

using System.Collections.Generic; using System.ComponentModel.DataAnnotations; using System.Web.Mvc; namespace BlipDrop.ViewModels { public class CustomerEditViewModel { [Display(Name = "Customer Number")] public string CustomerID { get; set; } [Required] [Display(Name = "Customer Name")] [StringLength(75)] public string CustomerName { get; set; } [Required] [Display(Name = "Country")] public string SelectedCountryIso3 { get; set; } public IEnumerable<SelectListItem> Countries { get; set; } [Required] [Display(Name = "State / Region")] public string SelectedRegionCode { get; set; } public IEnumerable<SelectListItem> Regions { get; set; } } }

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

using System.Collections.Generic; using System.Web.Mvc; using BlipDrop.Data; using BlipDrop.ViewModels; namespace BlipDrop.Controllers { public class CustomerController : Controller { // GET: Customer public ActionResult Index() { var repo = new CustomersRepository(); var customerList = repo.GetCustomers(); return View(customerList); } ... } }

using System; using System.Collections.Generic; using System.Data.Entity; using System.Linq; using BlipDrop.Models; using BlipDrop.ViewModels; namespace BlipDrop.Data { public class CustomersRepository { ... public CustomerEditViewModel CreateCustomer() { var cRepo = new CountriesRepository(); var rRepo = new RegionsRepository(); var customer = new CustomerEditViewModel() { CustomerID = Guid.NewGuid().ToString(), Countries = cRepo.GetCountries(), Regions = rRepo.GetRegions() }; return customer; } ... } }