ASP.NET MVC and jqGrid 学习笔记 6-增删改操作

程序结构：

1. Member.cs
2. CRUD.cshtml
3. CRUD.js
4. HomeController

一、Model

public class Member
    {
        [Key]
        public int No { get; set; }

        [Required(ErrorMessage="姓名必填")]
        [StringLength(,ErrorMessage="不能超过5个字")]
        public string Name { get; set; }

        [MaxLength()]
        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--