【FCL】MVC4.0+EasyUI实现对数据的操作_easyui调用mvc-优快云博客

本文提供了一个利用EasyUI官方教程实现MVC4.0对数据的操作示例，包括初始化环境、后台代码实现及前端交互展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要Demo的童鞋请跳到：点击打开链接

版本要求：

编译环境：VS2012

easyui：1.3.6

MVC：4.0

本程序是利用EasyUI官方教程（其程序是PHP），实现MVC4.0对数据的操作。因为该程序只是用来演示，前台easyui控件如何与后台交互的，

所以代码并没有重构整理。代码中我已经把必要的注释加上了，所以后面就直接上代码了。

1、这里使用的easyui是1.3.6的，下载后，解压到mvc项目的根目录即可，我把文件名更改为EasyUI了，如下图：

2、在HomeController中，添加如下代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "ASP.NET MVC 应用程序。";
            return View();
        }

        static List<Person> list = new List<Person>();
        static bool IsInit = false;

        public ActionResult GetRecords()
        {
            if (!IsInit)
            {
                list.Add(new Person { Name = "name1", Sex = "male", Age = "10" });
                list.Add(new Person { Name = "name2", Sex = "female", Age = "20" });
                list.Add(new Person { Name = "name3", Sex = "male", Age = "30" });
                IsInit = true;
            }
            var data = new { total = list.Count, rows = list };

            JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();
            string json = javaScriptSerializer.Serialize(data);
            return Content(json.ToString());
        }

        public void NewUser()
        {
            string name = Request.Form["Name"];
            string sex = Request.Form["Sex"];
            string age = Request.Form["Age"];
            list.Add(new Person { Name = name, Sex = sex, Age = age });

            var data = new { success = "true" };
            JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();
            string json = javaScriptSerializer.Serialize(data);

            Response.ContentType = "application/json";
            Response.Write(json);
            Response.End();
        }
        public void DelUser(string name)
        {
            for (int i = 0; i < list.Count; i++)
            {
                if (list[i].Name == name)
                {
                    list.Remove(list[i]);
                    i--;
                }
            }
            var data = new { success = "true" };
            JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();
            string json = javaScriptSerializer.Serialize(data);

            Response.ContentType = "application/json";
            Response.Write(json);
            Response.End();
        }
        public void UpdateUser(string name)
        {
            Person p = list.Where(l => l.Name.Equals(name)).ToArray<Person>()[0];
            p.Sex = Request.Form["Sex"];
            p.Age = Request.Form["Age"];

            var data = new { success = "true" };
            JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();
            string json = javaScriptSerializer.Serialize(data);

            Response.ContentType = "application/json";
            Response.Write(json);
            Response.End();
        }
        /*此为测试类*/
        class Person
        {
            public string Name { get; set; }
            public string Sex { get; set; }
            public string Age { get; set; }
        }      
    }
}

3、在视图Home的Index.cshtml中，添加代码如下：

@{
    Layout = null;
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/EasyUI/themes/default/easyui.css")
    @Styles.Render("~/EasyUI/themes/icon.css")

    @Scripts.Render("~/EasyUI/jquery.min.js")
    @Scripts.Render("~/EasyUI/jquery.easyui.min.js")
    @Scripts.Render("~/EasyUI/locale/easyui-lang-zh_CN.js")
    <script type="text/javascript">
        function newUser() {
            $('#dlg').dialog('open').dialog('setTitle', 'New User');
            $('#fm').form('clear');
            url = 'Home/NewUser';
        }
        function editUser() {
            var row = $('#dg').datagrid('getSelected');
            if (row) {
                $('#dlg').dialog('open').dialog('setTitle', 'Edit User');
                $('#fm').form('load', row);
                url = 'Home/UpdateUser?name=' + row.Name;
            }
        }
        function saveUser() {
            $('#fm').form('submit', {
                url: url,
                onSubmit: function () {
                    return $(this).form('validate');
                },
                success: function (result) {
                    var result = eval('(' + result + ')');
                    if (result.errorMsg) {
                        $.messager.show({
                            title: 'Error',
                            msg: result.errorMsg
                        });
                    } else {
                        $('#dlg').dialog('close');        // close the dialog
                        $('#dg').datagrid('reload');    // reload the user data
                    }
                }
            });
        }

        function destroyUser() {
            var row = $('#dg').datagrid('getSelected');
            if (row) {
                $.messager.confirm('Confirm', 'Are you sure you want to destroy this user?', function (r) {
                    if (r) {
                        $.post('Home/DelUser', { name: row.Name }, function (result) {
                            if (result.success) {
                                $('#dg').datagrid('reload');    // reload the user data
                            } else {
                                $.messager.show({    // show error message
                                    title: 'Error',
                                    msg: result.errorMsg
                                });
                            }
                        }, 'json');
                    }
                });
            }
        }
    </script>
    <title></title>
</head>
<body class="easyui-layout">
    <div region="north" split="true" style="height:100px;"> </div>    
    <div region="west" split="true" title="功能菜单" style="width:200px">
        <ul id="mainMenu" class="easyui-tree">

        </ul>
    </div>
    <div region="center" title="" style="padding:5px;background:#eee">
        <div id="mainTabs" class="easyui-tabs" fit="true" border="false">
            <!----------这里是第一个Tab---------->
            <div title="欢迎使用" closable="true">
                <!-------这里是datagrid--------->
                <!--注意下面url的路径哦-->
                <table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px"
                        url="Home/GetRecords"
                        toolbar="#toolbar"
                        rownumbers="true" fitColumns="true" singleSelect="true">
                    <thead>
                        <tr>
                            <th field="Name" width="50">Name</th>
                            <th field="Sex" width="50">Sex</th>
                            <th field="Age" width="50">Age</th>                            
                        </tr>
                    </thead>
                </table>
                <div id="toolbar">
                    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
                </div>
            </div>
            <!----------这里是第二个Tab---------->
           <div title="欢迎使用" closable="true">
                <h1 style="font-size:24px;">欢迎2</h1>
                <h1 style="font-size:24px; color:red;">222Welcome！</h1>
               <input type="text" value="" name="text2" />
            </div>
        </div>
    </div>
    <!--这里是对话框-->
    <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
        closed="true" buttons="#dlg-buttons">
    <div class="ftitle">User Information</div>
    <form id="fm" method="post">
        <div class="fitem">
            <label>Name:</label>
            <!--下面的input的name属性必须与datagrid的field属性相应-->
            <input name="Name" class="easyui-validatebox" required="true"/>
        </div>
        <div class="fitem">
            <label>Sex:</label>
            <input name="Sex" class="easyui-validatebox" required="true"/>
        </div>
        <div class="fitem">
            <label>Age:</label>
            <input name="Age">
        </div>       
    </form>
</div>
<div id="dlg-buttons">
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>
    <div region="south" title="" split="true" style="height:20px;text-align:center">
        &copy:@DateTime.Now.Year - 版权声明
    </div>


</body>
</html>