在做考试系统中，遇到最头疼的问题，就是前台与后台的交互。对于使用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格式的字符串。

前台和后台跑通一条线，就容易多了。

js与mvc 数据的交互

JS向后台提交数据方法：

猜你喜欢