.NET Core PartialView 与 Ajax

Ajax的核心是XMLHttpRequest对象(XHR),能够以异步方式从服务器获取新数据。开发主要利用Ajax来执行异步刷新和局部视图更新的功能。

而开发常常在前段页面利用JQuery封装的Ajax来进行快速开发。减少不必要的时间浪费。

JQuery：Ajax

$.ajax(

　　　　　　　  url：请求地址
             type：请求方式，GET、POST（1.9.0之后用method）
          headers：请求头
      contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
            async：是否异步
          timeout：设置请求超时时间（毫秒）
       beforeSend：发送请求前执行的函数(全局)
         complete：完成之后执行的回调函数(全局)
　　　　　　　 data：要发送的数据(数据一般进行序列化后发送)
          success：成功之后执行的回调函数(全局)
            error：失败之后执行的回调函数(全局)
          accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型
         dataType：将服务器端返回的数据转换成指定类型【"xml""text""html""script" "json""jsonp"】
);

Partiview:部分视图，主要是减少前后台数据传输大小。在主体Layout不变情况下部分区域视图实现可变。

代码示例：

后台控制器：

        [HttpPost]
        public IActionResult CrossPartial([FromBody]CrossSearch para)
        {
            if (para != null)
            {
                //Para处理操作
            }
            return PartialView();
        } 

前台页面（主视图）

<button id="subBtn" type="submit">提交</button>
<div id="CrTab">
    @Html.Partial("CrossPartial")
</div>
//主视图第一次加载时会自动调用后台渲染部分视图
 
<script type="text/javascript">
 $("#subBtn").click(function () {
        $.ajax({
            url: "/Home/CrossPartial",
            type: "post",
            contentType: "application/json; charset=utf-8",
            data: postData,
            dataType:"html",
            success: function (datas) {
                console.log(datas);
                    $("#CrTab").html(datas);
            }
        })
    });
</script>

点击提交按钮会调用Ajax操作请求后台数据。返回HEML重新渲染到DIV中更新页面