码迷,mamicode.com
首页 > Web开发 > 详细

asp.net mvc 使用ajax请求 控制器 (PartialViewResult)分部的action,得到一个分部视图(PartialView)的HTML,进行渲染

时间:2016-04-08 14:38:08      阅读:3053      评论:0      收藏:0      [点我收藏+]

标签:

在asp.net mvc 使用ajax请求获取数据的时候,我们一般是返回json或者xml,然后解析这些数据进行渲染,这样会比较麻烦,可以请求一个 分部action,返回一个分部视图 直接可以渲染,不需要解析这一步。

下面是示例:

控制器类:

public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public PartialViewResult TestAajaLoginViewResult()
        {
            List<User> list=new List<User>();
            for (int i = 0; i < 10; i++)
            {
                list.Add(new User { Id = i,Name = "名称_"+i});
            }
            return PartialView(list);
        }
    }

User类model:

    public class User
    {
        public int Id { set; get; }
        public string Name { set; get; }
    }

Index.cshtml:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(function () {
        $(#btnOK).click(function () {
            $.ajax({
                type: "POST",
                url: /Home/TestAajaLoginViewResult,
                data: { },
                datatype: "html",
                success: function (data) {
                    $(#content).append(data);
                },
                error: function () {
                    alert("处理失败!");
                }
            });
        });
    });
</script>
<input id="btnOK" value="点击加载部分页数据" />
<div id="content">
</div>

TestAajaLoginViewResult.cshtml:

@model System.Collections.Generic.List<Asp.NetMVC3Demo.Controllers.User>

@foreach (var item in Model)
{
    <div>@item.Id</div>
    <div>@item.Name</div>
    <br/>
}

注意:如果的你请求返回的数据量非常庞大,加载速度会变慢,所以此方法在加载大数据时不建议使用。

asp.net mvc 使用ajax请求 控制器 (PartialViewResult)分部的action,得到一个分部视图(PartialView)的HTML,进行渲染

标签:

原文地址:http://www.cnblogs.com/linJie1930906722/p/5367783.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!