• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

ASP.NETMVCandjqGrid学习笔记6-增删改操作

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

程序结构:

  1. Member.cs
  2. CRUD.cshtml
  3. CRUD.js
  4. 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--

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap