MVC+EasyUI实现查询显示到相应表格

最新推荐文章于 2019-06-21 09:50:54 发布

小太阳在发光

最新推荐文章于 2019-06-21 09:50:54 发布

阅读量6k

点赞数 3

分类专栏：【前端开发】文章标签： easyui mvc json

本文链接：https://blog.csdn.net/xfz0330/article/details/47914923

版权

本文介绍了如何在Razor页面上利用EasyUI的DataGrid控件，结合MVC框架，通过JS代码操作显示查询结果。在控制器中，使用Mvc的内置功能处理JSON格式的数据，无需额外引用System.Web.Script.Serialization命名空间。这种方式展示了MVC的便捷性。页面初始化时，能够查询并显示名字中包含特定字符的记录。

摘要由CSDN通过智能技术生成

这里要说的显示界面是Razor页面，我们要使用easyui首先应该在界面中添加相应的引用，如下代码，这些都是必要的引用文件，可以根据自己所存放的路径来添加src地址。

@*添加Jquery EasyUI的样式*@
<linkhref="~/Content/JqueryEasyUI/themes/default/easyui.css"rel="stylesheet" />
<linkhref="~/Content/JqueryEasyUI/themes/icon.css"rel="stylesheet" />
 
@*添加Jquery，EasyUI和easyUI的语言包的JS文件*@
<scriptsrc="~/Content/JqueryEasyUI/jquery-1.8.0.min.js"></script>
<scriptsrc="~/Content/JqueryEasyUI/jquery.easyui.min.js"></script>
<scriptsrc="~/Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js"></script>

下面是实现对EasyUI的DataGird控件操作的JS代码

@*实现对EasyUI的DataGird控件操作的JS代码*@
    <scripttype="text/javascript">
        //窗体控件加载完执行
        $(function () {
           $("#btnSearch").click(function () {
                var pars = { name:$("#txtName").val() };
                //有参数时执行此方法
                initTable(pars)
            });
            //无参数时执行此方法
            initTable("");
        });
                 
//实现DataGird控件的绑定操作
        function initTable(pars) {
            $('#tableShowData').datagrid({   //定位到Table标签，Table标签的ID是tableShowData
                fit