MVCAjaxHelper或jQuery異步方式加載部分視圖

2024-04-27 15:02:53

字體：大中小

供稿：網(wǎng)友

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異步方式到達(dá)這里~~";            return PartialView("TeamY", result);        }        private List<Team> GetAllTeams()        {            return new List<Team>()            {                new Team(){Name = "巴西隊(duì)", Preletter = "B"},                new Team(){Name = "克羅地亞隊(duì)", Preletter = "K"},                new Team(){Name = "巴拉圭", Preletter = "B"},                new Team(){Name = "韓國(guó)", 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文件，從控制器返回的強(qiáng)類型部分視圖內(nèi)容呈現(xiàn)到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到達(dá)這里~~";            return PartialView("TeamY", result);        }        private List<Team> GetAllTeams()        {            return new List<Team>()            {                new Team(){Name = "巴西隊(duì)", Preletter = "B"},                new Team(){Name = "克羅地亞隊(duì)", Preletter = "K"},                new Team(){Name = "巴拉圭", Preletter = "B"},                new Team(){Name = "韓國(guó)", Preletter = "K"}            };        }    }}