在做考试系统中，遇到最头疼的问题，就是前台与后台的交互。对于使用easyui来说，刚接触不久，有点陌生。
查着文档，看着Demo。做起来着实有点头疼。
首先，前台使用的是MVC+Easyui，后台使用的WCF提供服务。那么前台的数据，是如何与后台进行交互的呢？
页面上的所有事件都是通过js来调用的。那么就必须是
js里面写事件，然后把前台的数据，传到Controller里面，然后利用Controller去调用后台提供的WCF服务。
JS向后台提交数据方法：
利用js向后台提供数据。无非两种方法，一种Get传值，一种POST传值。
使用GET传值，传递的数据需要一个个的去写，而且传递的值都写在url上了。除非进行加密，否则这种传值方式安全性很难保证。
使用POST传值，传递的内容比较安全。而且也可以提交整个表单。这样后台可以根据表单，来获取自己需要的内容。简单的来说就是，把前台的一堆数据都提交给后台，后台挑着用。
POST向后台传值，也可以传递一个JSON串给后台使用。
在页面的事件中，不需要刷新页面，所以需要使用ajax来进行数据的交互。以下代码，引用的是jquery.easyui.min.js
里面的方法，已经被封装好了。直接用就可以了
<script src="../../Content/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
POST向后台传递JSON串：
//模糊查询 利用ajax提交JSOn数据
function doSearch(value) {
var flag=(value != "");
if (flag) {
var grid = $('#dg');
var options = grid.datagrid('getPager').data("pagination").options;
var curr = options.pageNumber;
var pageSize = options.pageSize;
$.ajax({
type: "POST", //提交数据的类型 分为POST和GET
async: false,
url: "/QuestionType/FuzzyQueryQuestionType", //提交url 注意url必须小写
data: { "SearchContent": value, "pageSize": pageSize, "pageIndex": curr },
success: function (data) {
var jsondata = eval(data);
//var jsData = (new Function("", "return " + data))();
$('#dg').datagrid('loadData', data);
}
});
return;
}
//如果查询框里面没有内容 则重新加载表格
$('#dg').datagrid("load", "/QuestionType/QueryQuestionTypeData");
}
提交数据的时候：url里面写 /控制器名称/Action方法名。
POST向后台提交表单：
//进行查询
function doSearch(value) {
var flag=(value != "");
if (flag) {
//提交查询表单
$('#searchContent').form({
url: "/QuestionType/FuzzyQueryQuestionType",
onSubmit: function () {
//进行表单验证
//如果返回false阻止提交
},
success: function (data) {
//var jsondata = JSON.parse(data); //必须转换成json对象，否则异常！ rows is undefined
var jsondata = eval(data);
$('#dg').datagrid("loadData", jsondata);
//$('#dg').datagrid("reload");
}
});
//提交表单
$('#searchContent').submit();
}
//如果查询框里面没有内容 则重新加载表格
$('#dg').datagrid("load", "/QuestionType/QueryQuestionTypeData");
}
表单内容：
<form id="searchContent" method="post">
@* 1、 加载搜索框*@
@{Html.RenderPartial("../../Views/ControlsPartial/SearchboxPartial");}
@*速度慢不用@Html.Partial("../../Views/ControlsPartial/SearchboxPartial")*@
<div id="ContentAreas" />
</form>
Controller接受数据：
public ActionResult FuzzyQueryQuestionType()
{
int pageSize = int.Parse(Request.Form["pageSize"]); //10;// int.Parse(Request.Params["rows"].ToString());
//第几页
int pageIndex = int.Parse(Request.Form["pageIndex"]); //1;// int.Parse(Request.Params["page"].ToString());
int total = 0;
//1、具体操作-调用后台方法，接收从后台传过来的--赋值
string strLike = Request.Form["SearchContent"];
//2、调用后台 查询题型的服务
List<ExamQuestionTypeEntity> listData = questionTypeService.FuzzyQueryQuestionType(strLike,pageSize,pageIndex,out total);
var data = new
{
total,
rows = listData
};
return Json(data, JsonRequestBehavior.AllowGet);
}
后台返回类型为JSON串，前台需要根据返回值 在刷新自己的表格。
所以用到了loadData 和load方法。
前台在利用后台传回的json串的时候，有可能出现以下错。
easyui里面的gridview控件。
刷新数据，有两种方式。
第一种方法 ： $(‘#dg‘).datagrid("load", "/QuestionType/QueryQuestionTypeData");
第二个参数为url，所以这个刷新
需要重新去后台查询。
第二种方法：$(‘#dg‘).datagrid("loadData",
jsonData);
第二个参数，是后台传回来的JSON串，可以直接利用该数据
绑定到表格。
这里需要注意一点，gridview重新加载数据的时候，使用的JSON数据格式的数据，而不是JSON格式的字符串。
前台和后台跑通一条线，就容易多了。