PartialView的用法

用法一：ajax加载局部刷新

1. 新建一个TaskBoardDetail.cshtml，内容如下：（主要是显示自己需要的数据）

1. @{
2. int i = 0;
3. }
4. @foreach(var item in ViewBag.DataList)
5. {
6. <div style="float:left;background-color:#e8e2e2;border:3px solid black;">
7. @foreach (var it in item)
8. {
9. <p style="background-color:#15d32b">@it.functionName </p> <br />
10. }
11. </div>
12. i++;
13. }

2.在HomeController.cs中添加获取数据的 TaskBoardDetail方法，可带参数可不带，根据自己的需要

1. [ HttpPost]
2. public ActionResult TaskBoardDetail(string value)
3. {
4. try
5. {
6. IEnumerable<IGrouping< string, TaskDetail>> taskGroup = list.GroupBy(p => p.projectName);
7. foreach ( var item in taskGroup)
8. {
9. if ( value==item.Key)
10. {
11. List<TaskDetail> list2= item.ToList();
12. var query = from p in list2 orderby p.priority select p; //按优先级排序
13. list2 = query.ToList();
14. IEnumerable<IGrouping< string, TaskDetail>> taskGroup2 = list2.GroupBy(p => p. group);
15. ViewBag.DataList = taskGroup2;
16. break;
17. }
18. }
19. return PartialView( "TaskBoardDetail");
20. }
21. catch (Exception exp)
22. {
23. throw exp;
24. }
25. }

其中TaskDetail是我自定义的类。此函数的主要目的就是给ViewBag.DataList赋值，并return PartialView("TaskBoardDetail");

3.我是要在Index页面点击按钮，刷新加载TaskBoardDetail内容。放置一个div用于承接TaskBoardDetail内容。

1. <div>
2. <input type="button" onclick="BtnClick()" value="确定">
3. </div>
5. <div id="Selector"> </div>

脚本如下：

1. <script type="text/javascript" language="javascript">
2. $( document).ready( function () {
3. $( "input[type='button']").click( function () {
4. $.ajax({
5. url: "Home/TaskBoardDetail",
6. type: "Post",
7. data: { "value": $( this).val()},
8. success: function (data) {
9. $( "#Selector").html(data);},
10. error: function (XMLHttpRequest, textStatus, errorThrown) {
11. alert( "加载失败：" + errorThrown);
12. }
13. });
14. });
15. });
17. </script>

OK！加载刷新页面成功。

用法二：页面加载局部视图

Partial View 顾名思义就是Html代码片段，因此可以用Partial View 把部分的Html或显示逻辑包装起来，方便多次使用。

Partial View 需要放在Views/Shared 目录下，任何Controlller 下的Action 或 View 都可以载入。

 

如何载入Partial View?

MVC 的 HTML 辅助方法有个专门的方法载入分部View,方法名称为Partial.

•    Partial有以下四种方式调用

方法原型	使用范例
Partial(HtmlHelper,String)	Html.Partial("CustomerListControl")
Partial(HtmlHelper,string,Object)	Html.Partial("CustomerListControl",Model)
Partial(HtmlHelper,string,ViewDataDictionary)	Html.Partial("CustomerListControl",ViewData["Model"])
Partial(HtmlHelper,string,Object,ViewDataDictionary)	Html.Partial("CustomerListControl",Model,ViewData["Model"])

 

• 使用控制器载入分部View

      public ActionResult  CustomerListControl()
{

   Return PartialView();
}

• 使用 Html.Action 载入分部View

@Html.Action("CustomerListControl")

局部视图代码：

@using Step1.Models;

@using System.Collections;

@model IEnumerable<Product>

<table border="1" >

    <tr >

        <td>

            Name

        </td>

        <td>

            Banner

        </td>

    </tr>

    @foreach (var item in Model)

    {

        <tr>

            <td>

                @item.Name

            </td>

            <td>

                @item.Banner

            </td>

        </tr>

    }

   

</table>

普通视图代码:

View

using Step1.Models;
@model OrderModel
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<div>
    <div>
        @Model.Customer.CompanyName
    </div>
    <div>
        @Model.Customer.CustomerID
    </div>
    <div>
        @Html.Partial("CustomerListControl",@Model.ProductList)
    </div>
</div>

控制器代码：

Controller

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using Step1.DAL;

namespace Step1.Controllers

{

    public class PartialViewController : Controller

    {

        //

        // GET: /PartialView/

 

        public ActionResult Index()

        {

            var model=   DBContext.GetOrderList();

           

            return View(model);

        }

 

    }

}