在做考试系统中,遇到最头疼的问题,就是前台与后台的交互。对于使用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格式的字符串。
前台和后台跑通一条线,就容易多了。