jq mvc4 ajax局部刷新,MVC Ajax Helper或Jquery异步加载部分视图_jquery

废话不多说了，直接给大家贴代码了。

Model:

namespace MvcApplication1.Models

{

public class Team

{

public string Preletter { get; set; }

public string Name { get; set; }

}

}

通过jQuery异步加载部分视图

Home/Index.cshtml视图中：

@{

ViewBag.Title = "Index";

Layout = "~/Views/Shared/_Layout.cshtml";

}

Index

@section scripts

{

}

HomeController控制器中：

using System.Collections.Generic;

using System.Linq;

using System.Web.Mvc;

using MvcApplication1.Models;

namespace MvcApplication1.Controllers

{

public class HomeController : Controller

{

public ActionResult Index()

{

return View();

}

[HttpPost]

public ActionResult Index(string pre)

{

var result = GetAllTeams().Where(t => t.Preletter == pre).ToList();

ViewBag.msg = "通过jQuery异步方式到达这里~~";

return PartialView("TeamY", result);

}

private ListGetAllTeams()

{

return new List()

{

new Team(){Name = "巴西队", Preletter = "B"},

new Team(){Name = "克罗地亚队", Preletter = "K"},

new Team(){Name = "巴拉圭", Preletter = "B"},

new Team(){Name = "韩国", Preletter = "K"}

};

}

}

}

部分视图TeamY.cshtml：

@model IEnumerable@{

var result = string.Empty;

foreach (var item in Model)

{

result += item.Name + ",";

}

}

@ViewBag.msg.ToString()

@result.Substring(0,result.Length - 1)

通过MVC Ajax Helper异步加载部分视图

Home/Index.cshtml视图中需要引用jquery.unobtrusive-ajax.js文件，从控制器返回的强类型部分视图内容呈现到UpdateTargetId指定的div中。

@{

ViewBag.Title = "Index";

Layout = "~/Views/Shared/_Layout.cshtml";

}

Index

@Ajax.ActionLink("通过MVC Ajax Helper","Load","Home", new {pre = "K"}, new AjaxOptions(){UpdateTargetId = "result1"})

HomeController控制器中：

using System.Collections.Generic;

using System.Linq;

using System.Web.Mvc;

using MvcApplication1.Models;

namespace MvcApplication1.Controllers

{

public class HomeController : Controller

{

public ActionResult Index()

{

return View();

}

public ActionResult Load(string pre)

{

var result = GetAllTeams().Where(t => t.Preletter == pre).ToList();

ViewBag.msg = "通过MVC Ajax Helper到达这里~~";

return PartialView("TeamY", result);

}

private ListGetAllTeams()

{

return new List()

{

new Team(){Name = "巴西队", Preletter = "B"},

new Team(){Name = "克罗地亚队", Preletter = "K"},

new Team(){Name = "巴拉圭", Preletter = "B"},

new Team(){Name = "韩国", Preletter = "K"}

};

}

}

}

部分视图和上一种方式一样。

页面刷新的方式加载部分视图方法包括：

Html.RenderPartial()

Html.RenderAction()

下面给大家介绍MVC中实现部分内容异步加载

action中定义一个得到结果集的方法

public ActionResult GetItemTree(string title, int itemid, int? page)

{

pp = new PagingParam(page ?? 1, VConfig.WebConstConfig.PageSize);

Common.Page.PagedListres_Item_Resource_R = iResourceService.GetRes_Item_Resource_RByItemId(itemid, pp);

ViewData["res_Item_Resource_R"] = res_Item_Resource_R;

res_Item_Resource_R.AddParameters = new System.Collections.Specialized.NameValueCollection();

res_Item_Resource_R.AddParameters.Add("title", title);

res_Item_Resource_R.AddParameters.Add("itemid", itemid.ToString());

ViewResult vr = new ViewResult

{

ViewData = ViewData,

MasterName = "",

};

return vr;

}

在主页面使用下面jquery代码异步调用上面的action

$(function () {

var id = '';

$.ajax({

type: "POST",

url: "/Student/GetItemTree",

data: { title: '', itemid: id, page: 1 },

beforeSend: function (data) { //取回数据前

$("#itemTree").html('数据加载中...');

},

error: function (data) { //发生错误时

// debugger;

},

success: function (data) { //成功返回时

$("#itemTree").html(data);

}

});

最后在分部视图GetItemTree.ascx中写上你要返回的数据结构即可

注意一点就是，如果涉及到分页，要用AJAX分页方式