基于MVC架构和easyui框架datagrid数据表格的创建(方法渲染)及数据前后端交互

需要引入的外部文件:

其中AjaxTestt.js文件为我们自己的JS文件
 
前端HTML代码为:


因为采用“方法渲染”的方式,所以几乎所有的建表行为都在JS中进行,使前端界面更简洁。

数据模型为:

该模型也为后续要在前端页面中要显示的数据表表头。

《----------------------------以下数据交互为   后台-->前台   ------------------------------------------》
做一些数据:

这些数据封装在LstObj()方法中,这些数据在项目中可以从数据库中读取,因为是自行测试,所以做一些后台的静态数据。

开始以方法渲染的方式创建数据表格,并将上面的数据从后台传倒前台:
先看控制器中的方法:


控制器中实例化DataClass类后,调用LstObj()方法获取后台刚做的数据,然后使用LinQ的的方式将这些数据按JSON格式创建为
数组,最后将这些数据以Json格式返回。(注意这里的 Name、Age、Phone 稍后解释)

开始创建并插入数据;
JS代码如下:

其中需要注意的是:
1、url 为前台获取数据的控制器方法(我这个控制器名称为Home,所以路径为“/Home/UseDatagrid”,UseDatagrid就是控制器中
的对应的方法了);
2、method 为GET方式这个最好要写上(默认为POST方式),不然可能接收不到数据;
3、dataType 默认就为 json 可写可不写,最好写上;
4、toolbar 为表头内容,此处我加入了三个控件(虽然没用上),分别为增加、导入和查找
5、最重要的一点就是,columns中的数据,其中的 “field” 属性值必须要与控制中的“Name、Age、Phone”一样,因为它们是
映射关系;

其他的就到官网(http://www.jeasyui.net/)查看相关 demo 设置上去就可以了

做完以上的,基本上不出意外,运行程序,前台网页就有数据了,我的是这样的:

如果出了意外没显示,估计大概率是IIS设置问题,具体就百度。

《----------------------------以下数据交互为   前台-->后台   ------------------------------------------》
先看JS中的代码:

JS以Ajax的方式将数据从前台传给后台,其中需要注意的是:
1、url 为要将前台数据传给后台的控制器方法(我这个控制器名称为Home,所以路径为“/Home/GetDatagridData”,
GetDatagridData(看下图)就是控制器中的对应的方法了);
2、type 默认为POST,习惯性写上,免得出问题;
3、dataType 默认为 json ,习惯性写上,免得出问题;
4、data 以Json方式传输,其中的 “gridata”,为Json数据键值对中的键,值以 JSON.stringify 方式转换为字符串;
5、success 为数据发送成功后返回的数据结果,比较懒,所以没写,可以写成弹窗(alert)的方式提示用户数据
上传成功;

控制器代码:

控制器这时候就可以通过Request.Form的方式取到前台发下来的数据了,其中Form里面的 "gridata" 就是上面键值对中的键
,拿到的数据(datagridData)为Json格式的数据,这时候需要解析Json数据,推荐使用 Newtonsoft.Json ,网上有DLL包
可以直接下载,或者用以下方式Nuget

下载 Newtonsoft.Json :

在VS中的“工具”,找到“程序包管理控制台”(如图)。

然后:

在下面PM>的后面输入 Install-Package Newtonsoft.json
如果安装成功,则恭喜你,成功下载,VS自动引入这个文件

但是。。。如果。。。出现了下列的情况


(-_-!)别慌,因为你的项目的 .net Framework 版本太低了,这个包的版本太高,所以不兼容导致的。
所以 刚输入的 Install-Package Newtonsoft.json 改成 Install-Package Newtonsoft.Json -Version 4.0.5
改成低版本的就可以使用了,如果还不行。。。。那最简单的办法就是把你的这个项目粉碎掉吧,用360什么的都可以,直接
格式化磁盘更舒服(如果你不想这么做,可能百度有别的方法可以救你,毕竟CSDN上大神那么多,自己解决咯)


继续说Json数据解析的问题:
datagridData 为Json格式的数据,我们在代码中 using 引入刚刚下载的 Newtonsoft.Json 后,调用它的的JsonConvert.DeserializeObject<JsonTotal>(string values)方法(反序列化方法)

注意,接收的这些数据的方法模型必须是要这样的:

这里是严格的Json格式模型,图中的 “total” 和 “rows” 的名称都不能改,必须得这么命名,因为他们也是映射关系。

return 返回给前台的内容可以自己编写,可以是一个布尔bool变量,控制器方法执行完成返回 turn,前台接收到 true后
再弹窗提示用户“成功”等等。此处测试,所以就返回了个页面,也没做别的处理。

这样我们就得到了解析后的数据,因为是测试,所以没继续写后台的数据处理方法,那些方法可以是做数据处理或者
存入数据库等等。。只需要在这个控制器方法里调用其他自己写的方法传参就可以了,下面图片是解析后的数据,
这里以代码打断点的方式截图给出。






以上,就是“基于MVC架构和easyui框架数据前后端交互”了。


总结:后端往前端传数据主要利用 easyui 框架下的 datagrid 中的各种属性获取并顺便创建表格、添加控件等等
           前端往后端传数据主要利用了AJAX技术将数据封装成Json格式后进行发送。

发布了3 篇原创文章 · 获赞 1 · 访问量 160

猜你喜欢

转载自blog.csdn.net/weixin_42359607/article/details/104860152
今日推荐