js与mvc 数据的交互

页面导航:首页 > 网络编程 > JavaScript > js与mvc 数据的交互

js与mvc 数据的交互

来源: 作者: 时间:2016-02-04 09:15 【

在做考试系统中,遇到最头疼的问题,就是前台与后台的交互。对于使用easyui来说,刚接触不久,有点陌生。 查着文档,看着Demo。做起来着实有点头疼。 首先,前台使用的是MVC 43;Ea

在做考试系统中,遇到最头疼的问题,就是前台与后台的交互。对于使用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");
}


表单内容:

@* 1、 加载搜索框*@ @{Html.RenderPartial("../../Views/ControlsPartial/SearchboxPartial");} @[email protected]("../../Views/ControlsPartial/SearchboxPartial")*@


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 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格式的字符串。

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

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<