easyui框架前后端交互_基于MVC4+EasyUI的Web开发框架经验总结（12）--利用Jquery处理数据交互的几种方式...

在基于MVC4+EasyUI的Web开发框架里面，大量采用了Jquery的方法，对数据进行请求或者提交，方便页面和服务器后端进行数据的交互处理。本文主要介绍利用Jquery处理数据交互的几种方式，包括获取数据并显示，插入新数据到服务器，更新数据，删除数据等操作。

1、利用Jquery获取数据并显示

为了顺利获取数据，我们需要保持页面端调用和服务器端保持一致，并相应的把数据转换或者封装为对象实体进行处理。

下面我们以一个简单的全国省份、全国城市、全国城市行政区的案例进行Demo代码的介绍。

 

总体的操作包括了，分页查询，添加数据的保存，编辑显示和保存，查看信息的数据显示等等，而利用Jquery获取数据并绑定到界面控件上的代码操作如下所示，主要就是利用getJson方法进行处理。

//绑定编辑详细信息的方法

function BindEditInfo(ID) {//使用同步方式，使得联动的控件正常显示

$.ajaxSettings.async = false;//首先用户发送一个异步请求去后台实现方法

$.getJSON("/Province/FindByID?id=" +ID, function (info) {//赋值有几种方式：.datebox('setValue', info.Birthday);.combobox('setValue', info.Status);.val(info.Name);.combotree('setValue', info.PID);.numberbox('setValue', info.Number);

$("#ID").val(info.ID);

$("#ProvinceName").val(info.ProvinceName);

isAddOrEdit= 'edit';//新增对话框标识

});

}//绑定查看详细信息的方法

function BindViewInfo(ID) {//发送请求

$.getJSON("/Province/FindByID?id=" +ID, function (info) {

$("#ID2").text(info.ID);

$("#ProvinceName2").text(info.ProvinceName);

});

}

getJson方法主要就是调用MVC里面控制器的方法，获取数据，并把它转换为Json的对象实体，这样我们就能方便获取到对应的属性，从而绑定到界面控件。而FindByID的接口是控制器里面的方法定义，我们可以通过下面的控制器基类代码了解具体的逻辑。

///

///查询数据库,检查是否存在指定ID的对象///

/// 对象的ID值

/// 存在则返回指定的对象,否则返回Null

public virtual ActionResult FindByID(stringid)

{//检查用户是否有权限，否则抛出MyDenyAccessException异常

base.CheckAuthorized(AuthorizeKey.ViewKey);

ActionResult result= Content("");

T info=baseBLL.FindByID(id);if (info != null)

{

result=ToJsonContentDate(info);

}returnresult;

}

///

///返回处理过的时间的Json字符串///

///

///

public ContentResult ToJsonContentDate(objectdate)

{var timeConverter = new IsoDateTimeConverter { DateTimeFormat = "yyyy-MM-dd HH:mm:ss"};returnContent(JsonConvert.SerializeObject(date, Formatting.Indented, timeConverter));

}

2、利用Jquery保存数据到服务器

上面的操作是从服务端获取数据并显示在页面上，下面我们来介绍如何把数据通过通过Jquery调用，保存到服务器上。

在Web框架里面，我们把添加数据和编辑数据的界面，共享了一个层的界面代码，这样可以减少主界面视图Index.cshtml的代码数量(因为我们把各种界面的代码放在一个文件里面，方便操作管理)。

省份名称：