partial view_participate用法和短语

(5) 2024-08-07 10:23

Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说
partial view_participate用法和短语,希望能够帮助你!!!。

用法一: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>

  4. <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. });

  16. </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);
        }
 
    }
}

今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

上一篇

已是最后文章

下一篇

已是最新文章

发表回复