MVCAjaxHelper或jQuery异步方式加载部分视图

2024-04-27 15:02:53

字体：大中小

来源：转载

供稿：网友

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";}<h2>Index</h2><div>    <a href="#" id="a">通过jQuery异步</a> <br/></div><div id="result">    </div>@section scripts{    <script type="text/javascript">        $(function() {            $('#a').click(function() {                $.Ajax({                    url: '@Url.Action("Index","Home")',                    data: { pre: 'B' },                    type: 'POST',                    success: function(data) {                        $('#result').empty().append(data);                    }                });                return false;            });        });    </script>}

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 List<Team> GetAllTeams()        {            return new List<Team>()            {                new Team(){Name = "巴西队", Preletter = "B"},                new Team(){Name = "克罗地亚队", Preletter = "K"},                new Team(){Name = "巴拉圭", Preletter = "B"},                new Team(){Name = "韩国", Preletter = "K"}            };        }    }}

部分视图TeamY.cshtml：

@model IEnumerable<MvcApplication1.Models.Team>  @{    var result = string.Empty;    foreach (var item in Model)    {        result += item.Name + ",";    }}@ViewBag.msg.ToString()<br/>@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";}<h2>Index</h2><div>    @Ajax.ActionLink("通过MVC Ajax Helper","Load","Home", new {pre = "K"}, new AjaxOptions(){UpdateTargetId = "result1"})</div><div id="result1"></div>

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 List<Team> GetAllTeams()        {            return new List<Team>()            {                new Team(){Name = "巴西队", Preletter = "B"},                new Team(){Name = "克罗地亚队", Preletter = "K"},                new Team(){Name = "巴拉圭", Preletter = "B"},                new Team(){Name = "韩国", Preletter = "K"}            };        }    }}