使用jquery加载部分视图

使用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>
}
 

使用jquery加载部分视图,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。