c mvc ajax反填下拉,在ASP.NET MVC5修改数据中实现复选框和下拉菜单的反填和更新操作...

#NET编程#

ASP.NET MVC 5修改数据

01第一节：修改数据开发原理

ASP.NET MVC 5中的CRUD操作，都是在控制器的操作方法中完成的，包括：添加、删除、显示、修改等。控制器是直接与视图通信的，因此，所有的请求和响应都是由控制器来接待和处理。

对于.NET MVC 5中要实现的修改数据的功能，跟添加功能一样，都需要两个操作方法，一个是GET请求的显示修改页面，能够让用户访问到要修改的页面，并获取原始信息，然后用户就可以在页面上根据原始信息进行修改。另一个是POST请求，将用户修改后的数据更新到数据库中。

02第二节：添加修改链接

现在使用Bootstarp框架布局MVC 5页面，一个具有添加、删除、修改、显示和查询功能的页面，使用视图模型对象实现数据的通信，执行数据的修改是使用封装好的ADO.NET的DBHelper类库来完成的。

Edit.cshtml视图的完整代码如下所示：

@{Layout = null;}@model IEnumerable

@Html.ActionLink("添加", "Add")

@using (Html.BeginForm()){@Html.TextBox("query")}

姓名	性别	邮箱	操作
@v.Name	@v.Sex	@v.Email	删除编辑

视图中的Html代码完成之后，我们首先来运行一下，保证页面是没有错误的情况下，再来开发其它的功能。对于一名优秀的程序员来说，排错是一项基本功，要保证每开发一步，都是100%可运行的，再开发下一步，这样最终编写出来的代码，代码质量很高。

一般都是使用二维表格来显示数据，并且在最后一列存放的是删除、查看详情、编辑等功能按钮。当我们点击“编辑(修改)”链接之后，就会转到该操作对应的URL链接，这个链接是由控制器、操作方法和ID主键组成的。

编辑function upt(obj) {location.href = "/Student/Upt/" + obj;}

之所以需要ID值，是因为，我们更新时，要知道是更新数据库表中哪条记录的数据。这是一个依据。

03第三节：修改控制器代码

当用户在显示页面上，找到需要修改的行数据，并在该行中点击“编辑”链接，就会转到对应的HTTP GET请求的操作方法上，显示出要修改的行数据内容。

当用户将行数据修改完成之后，他需要点击一下“提交”按钮，才能真正的将数据永久的存储在数据库中。那么这个“提交”操作就是执行修改操作的，因此，需要在控制器中编写修改数据的C#代码。

/// /// 显示编辑页面/// /// /// public ActionResult Upt(string id){StudentViewModel vModel = new StudentViewModel();SqlDataReader sdr = sBLL.GetSingleData(id);while(sdr.Read()){vModel.Id = new Guid(sdr["Id"].ToString());vModel.Name = sdr["Name"].ToString();vModel.Email = sdr["Email"].ToString();vModel.Age = Convert.ToInt32(sdr["Age"]);vModel.PhoneNumber = sdr["PhoneNumber"].ToString();vModel.Pwd = sdr["Pwd"].ToString();if (sdr["Sex"].ToString() != ""){vModel.Sex = Convert.ToBoolean(sdr["Sex"]) == true ? "男" : "女";}}return View(vModel);}[HttpPost]public ActionResult Upt(StudentViewModel vModel){StudentDataModel dModel = new StudentDataModel();dModel.Id = vModel.Id;dModel.Name = vModel.Name;dModel.Email = vModel.Email;dModel.PhoneNumber = vModel.PhoneNumber;dModel.Pwd = vModel.Pwd;dModel.Sex = vModel.Sex == "男" ? true : false;dModel.Age = vModel.Age;sBLL.UptData(dModel);return Content("alert('更新成功');location.href='/Student/List';");}

上面我们使用了Upt()操作方法来实现显示和修改操作，具有HTTP GET的Upt()方法具有一个id参数，根据id值到数据库表中查找数据并反填到页面上，反填后用户就可以看到修改前的原始数据了。而具有HTTP POST的Upt()方法，带有一个StudentViewModel类型的视图模型，用于将修改后的数据保存到数据库中。

04第四节：复选框的添加/修改

对于复选框的添加，需要在Add()方法中将复选框中的值使用

List泛型集合表示，然后使用ViewBag传到视图中。/// /// 显示添加页面/// /// public ActionResult Add(){List ckList = new List(){new SelectListItem{ Text="爬山", Value="1"},new SelectListItem{ Text="滑雪", Value="2"},new SelectListItem{ Text="游泳",Value="3"}};ViewBag.CkList = ckList;return View();}

对于SelectListItem类，其中有Text、Value和Selected属性，那么使用这3个属性就可以表示复选框的值了。

在视图中可以使用foreach循环将复选框生成：

爱好@foreach (var ck in ViewBag.CkList){@ck.Text}

复选框已经生成了，对于复选框用户可以勾选，可以将勾选的Value值存储到数据库中。对于复选框提交后，是以数组的形式传到控制器中的。

这样就可以将所有选中复选框的值放到数组中里一起发送到控制器的操作方法中。

以逗号隔开将所有选中的复选框中的Value值获取，接收复选框的值时数组参数Hobby必须与视图中的复选框的name值相同。

在操作方法中，使用string.join(“,”,Hobby)就可以将数组中的值使用逗号分隔组成一个新的字符串。

注意：数组里存放的是复选框的Value值。

在数据库可以看到，最终存储的结果就是字符串形式的。

对于复选框的修改，则首先需要在显示编辑的页面中，将之前用户添加时选择的项都打上对勾：

从数据库中获取值之后，构建好SelectListItem对象，并给Selected属性赋值，这样就可以得到复选框要显示的结果了：

最后跟添加数据时一样，直接添加到数据库即可：

05第五节：单选按钮的添加/修改

对于单选按钮，添加和修改路数都是一样的，非常的简单：

由于单选按钮只有一个值，所以只需要指定Html.RadioButtonFor()辅助方法即可，多个单选按钮只需要指定同一个属性即可。

在控制器中接收时，与文本框的接收是完全一样的：

在对数据模型与视图模型对接时，可以做任意逻辑转换。

对于单选按钮的修改。只需要从数据库中获取值，然后赋值给视图模型中表示单选按钮的模型属性即可：

06第六节：下拉列表框的添加/修改

对于下拉列表框，添加和修改数据与单选按钮是一样的：

对于下拉列表框，存到数据库中的值也是SelectListItem对象的Value值。

关于下拉列表框的修改：

直接给ViewModel的下拉列表框属性赋值，则就可以自动在视图中选中该项。

通过上面的操作，我们发现，不管是在添加数据的页面，还是在修改数据的页面，下拉菜单的操作都是最复杂的，特别是在修改的反填操作中，首先需要填充下拉菜单需要的对象，然后再呈现在视图中，另外，还要注意之前下拉菜单选中的项是什么，在反填时也要对应上，否则就会产生错误，影响客户体验。因此，一定要把下拉菜单的添加和修改数据时的操作掌握熟练。

举报/反馈