.net mvc 利用分部视图局部刷新.
页面利用$.Ajax:
$(function(){ $("#btnpartview").click(function () { var model = []; model.push($("#txtAge").val(), $("#txtName").val()); $.ajax({ url: '/Home/Refresh',//控制器活动,返回一个分部视图,并且给分部视图传递数据. data: JSON.stringify(model),//传给服务器的数据(即后台AddUsers()方法的参数,参数类型要一致才可以) type: 'POST', contentType: 'application/json;charset=utf-8',//数据类型必须有 async: true,//异步 success: function (data) //成功后的回调方法 { $("#myDiv").html(data);//data--就是对应的分部视图页面内容. //alert(data)//弹出框 }, error: function (data) { alert("失败:"+data[0])//弹出框 } }); }) })
控制器中:
public ActionResult Refresh(string[] person)
{
string str = person[0];
LinkedList<DemoData> datastest1 = new LinkedList<DemoData>();
//List<DemoData> datastest = new List<DemoData>();
DemoData dd = new DemoData();
dd.txtno = "1";
dd.txtname = "李四";
dd.txtage = "22";
datastest1.AddLast(dd);
DemoData dd1 = new DemoData();
dd1.txtno = "2";
dd1.txtname = "小王";
dd1.txtage = "23";
datastest1.AddLast(dd1);
DemoData dd2 = new DemoData();
dd2.txtno = "3";
dd2.txtname = "张三";
dd2.txtage = "22";
datastest1.AddLast(dd2);
//return PartialView("/Views/Home/_PartialPage2.cshtml", datastest1);//要绝对路径
return PartialView("/Views/Shared/PartView1.cshtml", datastest1);//要绝对路径.datastest1--要传到分部视图中的数据.
}
页面:
<div id="myDiv">Ajax 内容显示 @*@Html.Partial("PartView1.cshtml", Model);*@ </div>
分部视图:
@model IEnumerable<MvcApp.Models.DemoData> <div> <div> <select id="opselect"> <option value="opone">第一个值</option> <option value="optwo">第二个值</option> <option value="opthree">第三个值</option> <option value="optfour">第四个值</option> </select> </div> <table> @foreach (var item in Model) { var i = 0; <tr style="background-color:#CCC;"> <td> @item.txtno </td> <td style="width:30%"> @item.txtname </td> <td> @item.txtage </td> </tr> i++; } </table> </div>
刷新之前的页面:
刷新后的页面: