Asp.net mvc 局部视图的替代方案

需要在多个无序列表（ul）之间共享列表项（li）

当前的解决方案是为要共享的每组列表项创建PartialView，例如：

@*PartialViewOne*@
 <li>item1</li> 
 <li>item2</li> 
 <li>item3</li> 

@*PartialViewTwo*@
 <li>item1</li> 
 <li>item2</li> 

@*ViewOne*@
 <ul class="CustomClassONE">@Html.Partial("PartialViewOne")</ul> 

@*ViewTwo*@
 <ul class="CustomClassTWO">@Html.Partial("PartialViewOne")</ul> 

@*PartialViewOne*@
第1项
第2项
第3项
@*第二部分*@
第1项
第2项
@*可视电话*@
@Html.Partial（“PartialViewOne”）
@*视图二*@
@Html.Partial（“PartialViewOne”）

---

由于有许多列表项组，因此需要创建许多partialView。并不是说创造它们很困难，而是在寻找更有效的方法来完成同样的事情。使用上述技术有哪些替代方法？

我建议使用控制器创建这些列表，并将它们添加到您使用的页面的viewmodels中，可能会创建一些类，根据需要返回项目集合，并将这些项目放到viewmodel中。然后使用

.ComboBoxFor（x=>…）

大概是这样的：

public ActionResult Index() {
   var viewModel = new ViewModel();
   viewModel.ListItems = listItemFactory.GetItemsForFirstCase(); //populate items you use in your example as PartialViewOne
   return View(viewModel);
}


public ActionResult Search() {
   var viewModel = new ViewModel();
   viewModel.ListItems = listItemFactory.GetItemsForSecondCase();//populate items you use in your example as PartialViewTwo
   return View(viewModel);
}

---

这样，您的视图代码将更加清晰-对于所有情况，您将需要1个partial/DisplayTemplate/EditorTemplate，并且所有数据都可以以您需要的任何方式进行组合。

我建议您使用控制器创建这些列表，并将它们添加到您使用的页面的viewmodels中，可能创建一些类，该类将根据需要返回项目集合，并将这些项目放入viewmodel。然后使用

.ComboBoxFor（x=>…）

大概是这样的：

public ActionResult Index() {
   var viewModel = new ViewModel();
   viewModel.ListItems = listItemFactory.GetItemsForFirstCase(); //populate items you use in your example as PartialViewOne
   return View(viewModel);
}


public ActionResult Search() {
   var viewModel = new ViewModel();
   viewModel.ListItems = listItemFactory.GetItemsForSecondCase();//populate items you use in your example as PartialViewTwo
   return View(viewModel);
}

---

这样，您的视图代码将更加清晰-对于所有情况，您将需要1个partial/DisplayTemplate/EditorTemplate，并且所有数据都可以以您需要的任何方式进行组合。

如果要在partial中显示的数据类型相同，您可以创建一个viewmodel来表示它

public class MyCustomList
{
  public string ListHeader {set;get;}
  public List<string> Items {set;get;}

  public MyCustomList()
  {
    Items= new List<string>();
  }
}

在操作方法中，您将为该属性设置视图/操作特定的值

public ActionResult CustomerDetail(int id)
{
    var vm = new CustomerDetailsVm { FirstName = "Shyju" };
    vm.RecentOrders = new MyCustomList
    {
        ListHeader = "Recent Orders",
        Items = new List<string>
        {
            "IPad",
            "Beer"
        }
    };
     return View(vm);
}

public ActionResult ProductDetail(int id)
{
    var vm = new ProductDetails { ProductCode = "Accord" };
    vm.SimilarProducts = new MyCustomList
    {
        ListHeader = "Similar Products",
        Items =new List<string>
        {
            "Altima",
            "Camry"
        }
    };
    return View(vm);
 }

---

如果要在局部视图中显示的数据类型相同，则可以创建一个viewmodel来表示该类型

public class MyCustomList
{
  public string ListHeader {set;get;}
  public List<string> Items {set;get;}

  public MyCustomList()
  {
    Items= new List<string>();
  }
}

在操作方法中，您将为该属性设置视图/操作特定的值

public ActionResult CustomerDetail(int id)
{
    var vm = new CustomerDetailsVm { FirstName = "Shyju" };
    vm.RecentOrders = new MyCustomList
    {
        ListHeader = "Recent Orders",
        Items = new List<string>
        {
            "IPad",
            "Beer"
        }
    };
     return View(vm);
}

public ActionResult ProductDetail(int id)
{
    var vm = new ProductDetails { ProductCode = "Accord" };
    vm.SimilarProducts = new MyCustomList
    {
        ListHeader = "Similar Products",
        Items =new List<string>
        {
            "Altima",
            "Camry"
        }
    };
    return View(vm);
 }

---

这不是PartialView的替代方案，而是PartialView的传统使用方式。测试和灵感来自以下方面。从单个PartialView中提取静态html片段的非常有趣的方法

<!-- ViewOne -->
<ul>
   @Html.Partial("SharedPartialView", "ListA")
</ul> 

<!-- ViewTwo -->
<ul>
   @Html.Partial("SharedPartialView", "ListA")
</ul> 

<!-- SharedPartialView that includes all list items -->
@if (Model == "ListA")
{
 <li>item1</li> 
 <li>item2</li> 
 <li>item3</li> 
}

@if (Model == "ListB")
{
 <li>item1</li> 
 <li>item2</li> 
}

@Html.Partial（“SharedPartialView”、“ListA”）


@Html.Partial（“SharedPartialView”、“ListA”）

@如果（模型==“列表A”）
{
第1项
第2项
第3项
}
@如果（模型==“列表B”）
{
第1项
第2项
}

这不是PartialView的替代方案，而是PartialView传统的使用方式。测试和灵感来自以下方面。从单个PartialView中提取静态html片段的非常有趣的方法

<!-- ViewOne -->
<ul>
   @Html.Partial("SharedPartialView", "ListA")
</ul> 

<!-- ViewTwo -->
<ul>
   @Html.Partial("SharedPartialView", "ListA")
</ul> 

<!-- SharedPartialView that includes all list items -->
@if (Model == "ListA")
{
 <li>item1</li> 
 <li>item2</li> 
 <li>item3</li> 
}

@if (Model == "ListB")
{
 <li>item1</li> 
 <li>item2</li> 
}

@Html.Partial（“SharedPartialView”、“ListA”）


@Html.Partial（“SharedPartialView”、“ListA”）

@如果（模型==“列表A”）
{
第1项
第2项
第3项
}
@如果（模型==“列表B”）
{
第1项
第2项
}

另一个健壮的替代方法是使用JQuery从SharedPartialView中提取html片段，并将其注入视图中：

<!-- LayoutView -->
<!-- load fragments/lists PartialView in a hidden div-->
<div style="display:none">@Html.Partial("SharedPartialView")</div>
<!-- append appropriate fragments to multiple elements using JQuery -->
<script type="text/javascript">
    $(document).ready(function () {
        var test = $("#ListA").contents();
        test.appendTo("#ulOne, #ulTwo");
    });
</script>

<!-- ViewOne -->
<ul id="ulOne">
</ul> 

<!-- ViewTwo -->
<ul id="ulTwo">
</ul> 

<!-- SharedPartialView that includes all lists -->
<ul id="ListA">
 <li>item1</li> 
 <li>item2</li> 
 <li>item3</li> 
</ul>

<ul id="ListB">
 <li>item1</li> 
 <li>item2</li> 
</ul>

@Html.Partial（“SharedPartialView”）
$（文档）.ready（函数（）{
var test=$（“#ListA”）.contents（）；
测试。附于（“#ulOne，#ulTwo”）；
});





第1项
第2项
第3项


第1项
第2项

另一个健壮的替代方法是使用JQuery从SharedPartialView中提取html片段，并将其注入视图中：

<!-- LayoutView -->
<!-- load fragments/lists PartialView in a hidden div-->
<div style="display:none">@Html.Partial("SharedPartialView")</div>
<!-- append appropriate fragments to multiple elements using JQuery -->
<script type="text/javascript">
    $(document).ready(function () {
        var test = $("#ListA").contents();
        test.appendTo("#ulOne, #ulTwo");
    });
</script>

<!-- ViewOne -->
<ul id="ulOne">
</ul> 

<!-- ViewTwo -->
<ul id="ulTwo">
</ul> 

<!-- SharedPartialView that includes all lists -->
<ul id="ListA">
 <li>item1</li> 
 <li>item2</li> 
 <li>item3</li> 
</ul>

<ul id="ListB">
 <li>item1</li> 
 <li>item2</li> 
</ul>

@Html.Partial（“SharedPartialView”）
$（文档）.ready（函数（）{
var test=$（“#ListA”）.contents（）；
测试。附于（“#ulOne，#ulTwo”）；
});





第1项
第2项
第3项


第1项
第2项

这是一个值得考虑的替代方案。我能看到的唯一缺点是，这条路线需要编译列表对象的每一个微小更改。当你认真考虑时，这并不是一个缺点。在开发中，您可能需要停止并重新启动调试，但在生产中，您需要以任何一种方式重新发布。您绝对不应该直接在服务器上修改视图，理想情况下，您希望以任何方式预编译视图，这意味着如果您愿意，您不能这样做。@ChrisPratt，让我们说，在生产中，我们需要更改发现拼写错误的项；使用建议的路由需要重新发布整个应用程序，以反映单个已更改的对象；另一方面，如果列表项在PualLeVIEW中以纯HTML方式保存，在这种情况下，我们只需要发布PutalVIEW文件。如果您希望更改这些文件，可以考虑将这些数据移动到DB，缓存它，并有一个按钮重置缓存为他们-这样你可以编辑它的任何时候没有问题，没有明显的问题slowdown@raderick奥巴马的评论是一个很好的妥协。同样，您不应该只发布一个文件。网站是一个有凝聚力的单位，应该这样对待。做一顿饭意味着你永远不知道你的网站到底是什么版本。这是一个值得考虑的替代方案。我能看到的唯一缺点是，这条路线需要编译列表对象的每一个微小更改。当你认真考虑时，这并不是一个缺点。在开发中，您可能需要停止并重新启动调试，但在生产中，您需要以任何一种方式重新发布。您绝对不应该直接在服务器上修改视图，理想情况下，您应该希望预编译