【MVC+EasyUI实例】对数据网格的增删改查（下）

前言

继上文对网格加载数据，本文主要阐述对数据增删改的实现。

一、js代码

function Add() {
    $("#dlg").dialog('open');
    $("#dlg-form").form('clear');
    url = "Home/Add";
}

function Edit() {
    var selectedRow = $("#dg").datagrid('getSelected');
    if (selectedRow) {
        $("#dlg").dialog('open');
        $("#dlg-form").form('load', selectedRow);
        url = "Home/Edit";
    } else {
        $.messager.alert('消息提醒', '请先选中某行!', 'info');
    }    
}

function Save() {
    $("#dlg-form").form('submit', {
        url: url,
        onSubmit:function(){
            return $(this).form('validate');
        },
        success: function (result) {
            if (result == "OK") {
                $("#dlg").dialog('close');
                Reload();
                $.messager.alert('消息提醒', '保存成功！', 'info');
            } else {
                $.messager.show({
                    title: '提示',
                    msg: '保存失败！'
                });
            }            
        }
    });
}

function Delete() {
    var row = $("#dg").datagrid('getSelected');
    if (row) {
        var ProductID = row.ProductID;
        $.messager.confirm('确认对话框', '是否删除？', function (r) {
            if (r) {
                $.ajax({
                    url: "Home/Delete",
                    type: 'POST',
                    data: { ProductID: ProductID },//注意data格式
                    success: function (result) {
                        Reload();
                        $.messager.alert('消息提醒', result, 'info');
                    }
                });
            }
        });
    } else {
        $.messager.alert('消息提醒', '请先选中某行！', 'info');
    }
}

这里也是利用easyui实现窗口的打开关闭，还有表单数据加载等功能。

二、后台代码

public ActionResult Add(Products product)
        {
            var check = sse.Products.Any(x=>x.ProductID==product.ProductID);
            if (check)
            {
                return Content("产品ID"+product.ProductID+"已经存在！");
            }
            else {
                sse.Products.Add(product);
                sse.SaveChanges();
                return Content("OK");
            }            
        }

        public ActionResult Edit(Products product)
        {
            var check = sse.Products.Where(x => x.ProductID == product.ProductID).Count();
            if (check>=2)
            {
                return Content("产品ID" + product.ProductID + "重复2次！");
            }
            else
            {
                var findProduct = sse.Products.FirstOrDefault(x => x.ProductID == product.ProductID);
                try {
                    findProduct.ProductID = product.ProductID;
                    findProduct.Name = product.Name;
                    findProduct.Description = product.Description;
                    findProduct.Category = product.Category;
                    findProduct.Price = product.Price;
                    //sse.Entry(findProduct).CurrentValues.SetValues(product);
                    sse.SaveChanges();
                    return Content("OK");
                }catch(Exception e){
                    throw e;
                }  
            }
        }

        public ActionResult Delete(int ProductID)
        {
            var delID=sse.Products.FirstOrDefault(x=>x.ProductID==ProductID);

            if (delID == null)
                return Content("找不到此信息！");

            sse.Products.Remove(delID);
            sse.SaveChanges();
            return Content("删除成功！");
        }

这里是运用了Entity Framework的功能，ADO.NET Entity Framework操作数据库的过程对用户是透明的（当然我们可以通过一些工具或方法了解发送到数据库的SQL语句等）。我们唯一能做的是操作EDM，EDM会将这个操作请求发往数据库。

PS：删除时应用了Remove()方法来删去实体，要求实体以另一种状态存在于上下文，不是很理解，刚开始传递的是整个Product实体，结果出错了，改成传递ProductID，再查询出实体，则不会出错。

总结

至此，全部功能完成，第一次实现了MVC和EasyUI的结合，虽然是一个小例子，但是感觉自己对MVC开发有了一次大的进步了，继续加油。