【转载】MVC Ajax Helper或jQuery异步方式加载部分视图

MVC Ajax Helper或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";
}

<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"}
            };
        }
    }
}