Возможно ли создать частичный вид в качестве независимого «виджета»?

Question

С помощью старого ASP.NET мы могли легко создавать пользовательские элементы управления (.ascx), ведь многие элементы управления были/полностью независимы от текущего представления. Интересно, возможно ли это с MVC?

Мне нужно показать простой список пользователей, проблема в том, что этот список должен отображаться более чем в одном месте на моем сайте. Хотя я могу просто изменить свои модели просмотров и добавить к ним модель «виджета», я хотел бы избежать этого. Желательно, я хотел бы мой список пользователей требую только следующего:

@Html.Partial("Link/To/My/List") 

быть включен в другой View - модель Листа бы заполняться другим способом. Я думал использовать AJAX внутри своего частичного, но это похоже на плохую идею. Есть ли какой-либо другой путь вокруг него или это просто плохая идея, которая нарушает предположения MVC?

Answer 1

Вы можете использовать метод RenderAction для визуализации частичного представления. Частичное представление может быть связано с моделью, которая отличается от страницы вызывающей модели

Вызов метода действия с видом

@{Html.RenderAction("SomeAction", "SomeController");} 

метод действий возвращает частичный вид на

public ActionResult SomeAction() 
     { 
      //Construct SomeModel here.. 
      return PartialView("SomeView", SomeModel); 
     } 

Answer 2

Вы можете напишите частичные представления, которые являются инкапсулированными «виджетами», встраивая блок сценария внутри частичного представления. Обтекание блока сценария внутри div - это один чистый способ обернуть разметку и скрипт инициализации вместе с виджетами с частичным представлением. Например, у меня может быть частичное представление с именем «_WidgetPartial», которое я использую на своем сайте. Если я помещаю в два места на моей главной странице, он должен работать, и я предпочитаю не писать логику на моей главной странице, чтобы инициализировать виджет.

Возможно, вы захотите написать виджет как плагин jQuery какого-либо типа, а затем блок сценария станет простым одним лайнером для его инициализации. Частичный вид выглядит как-то ...

<div id="widgetWrapper"> 

    <ul class="widget"> 
    </ul> 

    <script> 
     $(document).ready(function() { 
      $("ul.widget").widget(...); 
     }); 
    </script> 
</div> 

Если вы никогда не будете использовать его более чем один раз на странице, ее просто, в противном случае, обернуть код, чтобы он не выполняет в два раза. Смотри ниже. Для фрагментов Stack Overflow я имитирую его, повторяя частичный вид дважды в фрагменте кода для представления, включая частичный вид виджета дважды на главной странице.

Моя главная страница может выглядеть следующим образом:

<div id="left-nav"> 
    @Html.Partial("_WidgetPartial")   
</div> 

<div id="body"> 
</div> 

<div id="right-nav"> 
    @Html.Partial("_WidgetPartial") 
</div> 

Пример:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- Self-contained partial view containing widget --> 
 

 
<div id="widgetDiv" class="panel panel-default"> 
 

 
    <div class="panel-heading">Event Dates</div> 
 
    <div class="panel panel-group"> 
 
     <ul class="widget"> 
 
     <!-- These will load dynamically --> 
 
     </ul> 
 
    </div> 
 

 
    <script> 
 
     $(document).ready(function() { 
 

 
      // Run this once only in case widget is on page more than once 
 
      if(typeof $widget == 'undefined') { 
 
       $widget = $("ul.widget"); // could be more than one 
 
       // mock data to simulate an ajax call 
 
       var data = [ 
 
        {Description: "March", StartDate: "03/01/2015"}, 
 
        {Description: "April", StartDate: "04/01/2015"}, 
 
        {Description: "May", StartDate: "05/01/2015"} 
 
       ]; 
 

 
       $.each($widget, function(w, widget) { 
 
        // might be an $.ajax call 
 
        $.each(data, function(i, row) { 
 
         $(widget).append("<li><a href='/Widget/Search?startDate=" + row.StartDate + "'>" + row.Description + "</a></li>"); 
 
        }); 
 
       }); 
 
      } 
 
     }); 
 
    </script> 
 
</div> 
 
<!-- End of widget/partial view --> 
 

 

 

 
<!-- Second copy of above for sake of example snippet --> 
 
<!-- No need to read further --> 
 

 

 

 

 

 

 

 

 

 
<!-- Self-contained partial view containing widget --> 
 

 
<div id="widgetDiv" class="panel panel-default"> 
 

 
    <div class="panel-heading">Event Dates</div> 
 
    <div class="panel panel-group"> 
 
     <ul class="tinylist nav nav-sidebar widget"> 
 
     <!-- These will load dynamically --> 
 
     </ul> 
 
    </div> 
 

 
    <script> 
 
     $(document).ready(function() { 
 

 
      // Run this once only in case widget is on page more than once 
 
      if(typeof $widget == 'undefined') { 
 
       $widget = $("ul.widget"); // could be more than one 
 
       // mock data to simulate an ajax call 
 
       var data = [ 
 
        {Description: "March", StartDate: "03/01/2015"}, 
 
        {Description: "April", StartDate: "04/01/2015"}, 
 
        {Description: "May", StartDate: "05/01/2015"} 
 
       ]; 
 

 
       $.each($widget, function(w, widget) { 
 
        // might be an $.ajax call 
 
        $.each(data, function(i, row) { 
 
         $(widget).append("<li><a href='/Widget/Search?startDate=" + row.StartDate + "'>" + row.Description + "</a></li>"); 
 
        }); 
 
       }); 
 
      } 
 
     }); 
 
    </script> 
 
</div> 
 
<!-- End of widget/partial view -->