使用jquery加载部分视图01-使用$.get()

使用Html.RenderParital或Html.RenderAction可以在主视图中加载部分视图。
两种方法是有区别的，在"RenderPartial和RenderAction区别"中体验过。

本篇体验使用jquery加载部分视图。

□ HomeController

using System.Web;

using System.Web.Mvc;

using _01.Models;

namespace _01.Controllers

{

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            return View();

        }

        public ActionResult ProductPartial()

        {

            List<Product> products = new List<Product>()

            {

                new Product(){ID = 1, Name = "产品1", Price = 85.00M},

                new Product(){ID = 2, Name = "产品2", Price = 95.00M}

            };

            return PartialView("_ProductPartial", products);

        }

    }

}

□ View Model

namespace _01.Models

{

    public class Product

    {

        public int ID { get; set; }

        public string Name { get; set; }

        public decimal Price { get; set; }

    }

}

□ 部分视图_ProductPartial.cshtml

@model IEnumerable<_01.Models.Product>

@foreach (var item in Model)

{

    @item.ID 

    @item.Name

    @item.Price.ToString("c")

    <br/>

}

□ 主视图 Index.cshtml

@{

    ViewBag.Title = "Index";

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

}

<h2>Index</h2>

<div id="divProduct"></div>

@section scripts

{

    <script type="text/javascript">

        $(document).ready(function () {

            $.get("@Url.Action("ProductPartial", "Home")", function (data) {

                $('#divProduct').replaceWith(data);

            });

        });

    </script>

}