ASP.NET MVC and jqGrid 学习笔记 6-增删改操作
程序结构：
- Member.cs
- CRUD.cshtml
- CRUD.js
- HomeController
一、Model
public class Member { [Key] public int No { get; set; } [Required(ErrorMessage="姓名必填")] [StringLength(5,ErrorMessage="不能超过5个字")] public string Name { get; set; } [MaxLength(200)] public string Email { get; set; } public DateTime? Birthday { get; set; } [DatabaseGenerated(DatabaseGeneratedOption.Computed)] public DateTime? CreatedOn { get; set; } //导航属性 public ICollection<Guestbook> Guestbooks { get; set; } }
二、View
在view中把javascript代码移到了一个单独的js文件里，然后在html里引入该文件，这样似乎更清晰些。
CRUD.cshtml：
@model HelloJqGrid.Models.Member @{ ViewBag.Title = "CRUD"; } <script type="text/javascript" src="~/ViewJs/CRUD.js"></script>
<h2>CRUD</h2> <button onclick="openDialog('添加')">添加</button> <button onclick="openDialog('删除')">删除</button> <button onclick="openDialog('更改')">更改</button> <table id="grid"></table> <div id="pager"></div> <div id="myDialog"> <form id="myForm"> <div> <label>Your name:</label> @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) </div> <div> <label>Your email:</label> @Html.EditorFor(model => model.Email) @Html.ValidationMessageFor(model => model.Email) </div> <div> <label>Birthday:</label> @Html.EditorFor(model => model.Birthday) @Html.ValidationMessageFor(model => model.Birthday) </div> </form> </div> @section Scripts{@Scripts.Render("~/bundles/jqueryval")}
注意最后一行@section Scripts{@Scripts.Render("~/bundles/jqueryval")} 这个是ASP.NET MVC用于数据验证的。
在这里用的是html helper（html辅助方法），辅助方法会自动带上数据验证，验证的错误信息来着于model中的属性标签。这种方法要引用jqueryval（bundle）。
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*"));
可以看到是微软在jquery.validate.js的基础上的改进的客户端验证。
CRUD.js：
包含有jqGrid的配置，Dialog的配置，增删改的操作。
$(function () { //配置jqGrid jQuery("#grid").jqGrid({ url: "/Home/GetSortingData", datatype: "json", mtype: "get", colModel: [ { label: 'Number', name: 'No', index: 'No', width: 60, sorttype: "int" }, { label: 'Name', name: 'Name', index: 'Name', width: 90 }, { label: 'Email', name: 'Email', index: 'Email', width: 100, sortable: false }, { label: 'Birthday', name: 'Birthday', index: 'Birthday', width: 100, formatter: 'date', formatoptions: { srcformat: 'Y-m-d', newformat: 'Y-m-d' }, editable: true, editrules: { required: true } }, { label: 'Created On', name: 'CreatedOn', index: 'CreatedOn', width: 150, formatter: 'date', formatoptions: { srcformat: 'Y-m-d H:i:s', newformat: 'Y-m-d H:i:s' } } ], caption: "jqGrid data", loadonce: false, //排序翻页等操作在服务端完成 rowNum: 5, rowList: [5, 10, 20], //设置分页下拉列表 pager: "#pager", viewrecords: true, width: 500, height: "auto", jsonReader: { repeatitems: false }, //prmNames: { id: "No" }, sortorder: "asc", sortname: "No"//传递给服务端的排序字段名 }); //配置对话框(使用Jquery-UI的dialog插件) $("#myDialog").dialog({ autoOpen: false, modal: false, // 设置对话框为非模态对话框 resizable: true, width: 250, buttons: { // 为对话框添加按钮 "取消": function () { $(this).dialog("close") }, "创建": function (event) { operate(event); },//add, "删除": function (event) { operate(event); },//del, "更改": function (event) { operate(event); }//update } }); //选择日期 $("#Birthday").datepicker(); $("#ui-datepicker-div").css('font-size', '0.9em'); //改变大小 }); //操作对话框 function openDialog(btnName) { var dlg = $("#myDialog"); var btnPane = dlg.siblings(".ui-dialog-buttonpane"); if (btnName == "添加") { dlg.find("input").removeAttr("disabled").val(""); dlg.dialog("option", "title", "创建").dialog("open"); btnPane.find("button:not(:contains('取消'))").hide(); btnPane.find("button:contains('创建')").show(); } else if (btnName == "更改") { dlg.find("input").removeAttr("disabled"); dlg.dialog('option', 'title', '更改'); btnPane.find("button:not(:contains('取消'))").hide(); btnPane.find("button:contains('更改')").show(); loadSelectedRowData();//载入选中行数据 } else if (btnName == "删除") { dlg.find("input").attr("disabled", true); dlg.dialog("option", "title", "删除"); btnPane.find("button:not(:contains('取消'))").hide(); btnPane.find("button:contains('删除')").show(); loadSelectedRowData();//载入选中行数据 } } //载入选中行数据 function loadSelectedRowData() { var grid = $("#grid"); var id = grid.jqGrid("getGridParam", "selrow"); var no = grid.jqGrid("getRowData", id).No; if (!id) { alert("请先选择要编辑的行"); return false;//退出 } else { var params = { "No": no }; //虽然用rowData可以获得各字段的值，但是这是在客户端操作；var rowData = grid.jqGrid("getRowData", id); //为避免数据已被改动，从数据库里读出对应编号的数据较好； $.ajax({ url: '/Home/GetRowData', //type: 'POST', data: params, dataType: 'json', cache: false, error: function (jqXHR, textStatus, errorThrown) { alert("status:" + jqXHR.status + "\nStatusText:" + jqXHR.statusText); }, success: function (data, textStatus, jqXHR) {//这里的data是接收服务端的数据 var dlg = $("#myDialog"); dlg.find("#No").val(data.No); dlg.find("#Name").val(data.Name); dlg.find("#Email").val(data.Email); //--日期字段需要特别处理一下 //--return Json:显示"/Date(1387712653000)/" //--Newtonsoft:2013-12-22T19:12:54 //--第一种方式： //--var jsonDate = data.CreatedOn; //--var mydate = new Date(parseInt(jsonDate.substr(6))); //结果为1387712653000 |Sun Dec 22 2013 19:38:03 GMT+0800 //--var a = (new Date(mydate)).toLocaleDateString() + " " + (new Date(mydate)).toLocaleTimeString();//"2013年12月22日 19:38:03" //--第一种方式的结果是中文：2013年12月22日 19:38:03 //第二种方式:用Newtonsoft转为string，但是日期后有个字母T:2013-12-22T19:12:54 var createdOn = data.CreatedOn == "" || data.CreatedOn == null ? "" : data.CreatedOn.replace("T", " "); dlg.find("#CreatedOn").val(createdOn);//此字段不可更改，只是显示。 //第二种方式的结果是：2013-12-22 19:13:17 var birthday = data.Birthday == "" || data.Birthday == null ? "" : data.Birthday.substr(0, 10); dlg.find("#Birthday").val(birthday); //在客户端更新选定数据行 var rowData = { No: data.No, Name: data.Name, Email: data.Email, Birthday: birthday, CreatedOn: createdOn }; grid.jqGrid("setRowData", id, rowData); //打开对话框 dlg.dialog("open"); } }); } } //增删改操作 function operate(event) { if (!$("#myForm").valid()) { return false; } var dlg = $("#myDialog"); var grid = $("#grid"); var id = grid.jqGrid("getGridParam", "selrow");//客户端的行号索引 var no = grid.jqGrid("getRowData", id).No; //选中行的No字段值 var name = $.trim(dlg.find("#Name").val()); var email = $.trim(dlg.find("#Email").val()); var birthday = $.trim(dlg.find("#Birthday").val()); var createdOn = $.trim(dlg.find("#CreatedOn").val()); var params = { "No": no, "Name": name, "Email": email, "Birthday": birthday, "CreatedOn": createdOn }; if ($(event.target).text() == "创建") { var actionUrl = "/Home/Add"; $.ajax({ url: actionUrl, type: "post", //默认为get（此请求已被阻止，因为当用在 GET 请求中时，会将敏感信息透漏给第三方网站。若要允许 GET 请求，请将 JsonRequestBehavior 设置为 AllowGet） data: params, //传递给服务端的数据 dataType: "json", cache: false, error: function (textStatus, errorThrown) { alert("系统ajax交互错误: " + textStatus); }, success: function (data, textStatus) { if (data.msg == "success") {//此处的success来源于后台的json var dataRow = { //要添加的数据 No: data.No, // 从后台传来的json得到系统分配的序号（No是一个自动递增字段） Name: name, Email: email, Birthday: birthday, CreatedOn: data.CreatedOn//接收数据库自动创建的日期 }; //在客户端操作，避免reload表格。 var selectedId = $("#grid").jqGrid("getGridParam", "selrow"); if (selectedId) { $("#grid").jqGrid("addRowData", data.No, dataRow, "before", selectedId);//如果有选定行则添加在选定行前面 } else { $("#grid").jqGrid("addRowData", data.No, dataRow, "first");//没有选定行则添加在第一行 } //似乎高亮显示用户刚添加的数据行是个不错的主意 $("#grid").jqGrid("setSelection", data.No); dlg.dialog("close"); alert("添加操作成功!"); } else { alert("添加操作失败!"); } } }); } else if ($(event.target).text() == "删除") { var actionUrl = "/Home/Delete"; $.ajax({ url: actionUrl, type: "POST", data: params, dataType: 'json', cache: false, error: function (textStatus, errorThrown) { alert("交互错误" + textStatus); }, success: function (data, textStatus) { if (data.msg == "success") { grid.jqGrid("delRowData", id); dlg.dialog("close"); alert("删除成功！"); } else { alert("删除失败！"); } } }); } else if ($(event.target).text() == "更改") { var actionUrl = "/Home/Update"; $.ajax({ url: actionUrl, type: 'POST', data: params, dataType: 'json', cache: false, error: function (jqXHR, textStatus, errorThrown) { alert("status:" + jqXHR.status + "\nStatusText:" + jqXHR.statusText); }, success: function (data, textStatus, jqXHR) { if (data.msg == "success") { var rowData = { No: no, Name: name, Email: email, Birthday: birthday }; grid.jqGrid("setRowData", id, rowData, { color: "red" });//可以添加css dlg.dialog("close"); alert("更新成功！"); } else { alert("更新失败！"); } } }); } }
三、Controller：
public ActionResult CRUD() { return View(); } //Add public ActionResult Add(Member m) { Member member = new Member(); member.No = m.No; member.Name = m.Name; member.Email = m.Email; member.Birthday = m.Birthday; member.CreatedOn = m.CreatedOn; MyContext db = new MyContext(); db.Members.Add(member); db.SaveChanges(); return Json(new { msg = "success", No = member.No, //返回给前端序号 CreatedOn = member.CreatedOn//返回给前端 }); } //delete public ActionResult Delete(Member m) { MyContext db = new MyContext(); Member member = db.Members.First(mb => mb.No == m.No); db.Members.Remove(member); db.SaveChanges(); return Json(new { msg = "success" }); } //update public ActionResult Update(Member m) { MyContext db = new MyContext(); Member member = db.Members.First(mb => mb.No == m.No); member.Name = m.Name.Trim(); member.Email = m.Email; member.Birthday = m.Birthday; member.CreatedOn = m.CreatedOn; db.SaveChanges(); return Json(new { msg = "success" }); } //为客户端选中行提供数据 public string GetRowData(Member m) { MyContext db = new MyContext(); Member member = db.Members.Find(m.No); return Newtonsoft.Json.JsonConvert.SerializeObject(member); }
--End--