MVC Partial View Decoupling Пример кода

Question

В моем текущем проекте MVC у меня есть один вид с такой большой функциональностью, которая стала неуправляемой. Чтобы решить эту проблему, я начал добавлять funtionality к частичным представлениям и включать их в представление, но даже это было проблемой, потому что базовый javascript (jquery) был настолько взаимосвязан и переплетался, что все еще был беспорядок. JS в одном частичном представлении вызовет метод обновления в другом частичном представлении и создаст катастрофически связанную катастрофу.

Я решил, что мне нужен способ разграничения взглядов на паралтон друг от друга и из вида контейнера.

Вот некоторые из моих объектов

1. отвязать JS в моих parital взглядов, так что один вид не нужно ничего знать о другой точке зрения или мнение контейнера.

2. Пространства имен JS-кода для каждого представления, чтобы я не запускал конфликты между представлениями.

3. Создайте шаблон для maintian состояния на обновления страницы (или ссылку на эту страницу)

4. Put JS в Sperate файлы, которые по-прежнему поддерживает бритву для разрешения URL и другие функции с одним JS-файла на представление или частичное Посмотреть.

5. Использовать соглашения об именах, которые позволяют кому-то, кто смотрит на контейнерный вид, подключать проводку и код инициализации, чтобы понять, что происходит и где ссылаются ссылки.

6. Уметь передавать данные параметров из события триггера слушателям.

После того, как вы провели некоторое исследование и не нашли много информации об этом, я создал небольшую демонстрацию, которая показывает мой первый подход к решению этой проблемы. Я надеюсь, что другие смогут увидеть, что я делаю, и предоставить еще более эффективные способы решения этой задачи. В демонстрации есть два частичных представления, которые общаются друг с другом, ничего не зная о достижении другого. Вид contianing используется для подключения обработчиков событий и вызова функций при возникновении события.

Вот демо-код

Контроллер не делает ничего, но возвращает вид и частичный вид.

PartialViewDecoupleController.cs

namespace EngA.SandboxApplication.Controllers 
{ 
    public class PartialViewDecoupleController : Controller 
    { 
     // GET: PartialViewDecouple 
     public ActionResult Index() 
     { 
      return View(); 
     } 

     public PartialViewResult IndexJs() 
     { 
      return PartialView(); 
     } 

     public PartialViewResult MenuPartialView() 
     { 
      return PartialView(); 
     } 

     public PartialViewResult MenuPartialViewJs() 
     { 
      return PartialView(); 
     } 

     public PartialViewResult DisplayPartialView() 
     { 
      return PartialView(); 
     } 

     public PartialViewResult DisplayPartialViewJs() 
     { 
      return PartialView(); 
     } 


    } 
} 

индексные просто загружает все мнениям

Index.cshtml

@Html.Hidden("id") 

@Html.Action("IndexJs", "PartialViewDecouple") 

@Html.Action("MenuPartialView","PartialViewDecouple") 
@Html.Action("MenuPartialViewJs", "PartialViewDecouple") 
<br/> 
<br/> 
@Html.Action("DisplayPartialView", "PartialViewDecouple") 
@Html.Action("DisplayPartialViewJs", "PartialViewDecouple") 

The IndesJs файл провода обработчики событий и женится мнения partail вместе ,
IndexJs.cshtml

<script language="javascript"> 

    $(document).ready(function() { 

     //Set up Event Handlers 
     $(document).bind("MenuPartialView_onClick", function (e, p1) { 
      $("#id").val(p1); 
      displayPartialView.setup(p1); 

     }); 

     $(document).bind("DisplayPartialView_onClick", function (e, message) { 
      menuPartialView.message(message); 
     }); 

     //Initialize Partial Views on refresh 
     var id = $("#id").val(); 
     if (id!=null) displayPartialView.setup(id); 

    }); 

</script> 

Просто контейнер, чтобы получать данные и кнопку, чтобы вызвать событие.

DisplayPartialView.cshtml

DisplayParitalView<br/> 
<div id="display">default</div> 

<input type="button" name="ButtonSayHi" id="ButtonSayHi" value="Say Hi" onclick="displayPartialView.onButtonSayHiClick(this)" /> 

Внизу «setup» отображается передаваемый ему параметр. "onButtonSayHiClick" Поднимает и событие

DisplayPartialViewJs.cshtml

<script language="javascript"> 

    var displayPartialView = { 

     setup: function (id) { 
      $("#display").html(id); 
     }, 

     onButtonSayHiClick: function (e) { 
      var name = e.id; 
      $(document).trigger("DisplayPartialView_onClick", [name]); 
     }\ 
    }; 

</script> 

Ниже два buttens поднять события. MenuPartialView.cshtml

MenuParitalView 
<br/> 
<input type="button" name="ButtonOne" value="One" onclick="menuPartialView.onButtonOneClick(this)" /> 
<input type="button" name="ButtonTwo" value="Two" onclick="menuPartialView.onButtonTwoClick(this)" /> 

Ниже Триггеры поднять события и сообщение отображается сообщение, которое посылается на него. MenuPartialViewJs.cshtml

<script language="javascript"> 

    var menuPartialView = { 

     onButtonOneClick: function() { 
      $(document).trigger("MenuPartialView_onClick", [1]); 
     }, 

     onButtonTwoClick: function() { 
      $(document).trigger("MenuPartialView_onClick", [2]); 
     }, 

     message: function (message) { 
      alert("Message: " + message); 
     } 

    }; 

</script> 

пожалуйста, дайте мне знать, если вы видите, лучшие способы достижения то же самое

Спасибо

Эрла

Answer 1

Во-первых, добавление скриптов непосредственно в HTML не очень хорошая идея - поместить их в отдельные файлы js и расслоение/minify. Это позволит сэкономить время загрузки страницы и упростить ее поддержку.

Хороший подход состоит в том, чтобы отделить ваш HTML от «взглядов» - в принципе, оберните каждое из ваших представлений в div с идентификатором, например.

<div id="my-app-view-1">VIEW HTML</div> 

Делая это, вы можете сферу вашей ява скрипт так:

моего-приложение-View-1.js:

(function(global) { 

    'use strict'; 

    var document = global.document, 
     $ = global.$; 

    $(function() { 

     var $view = $(document).find('#my-app-view-1'); 

     // do processing here 

    }); 

}(this)); 

Это будет гарантировать, что у вас есть модульные JS , а также то, что другие скрипты не будут помешать этому представлению.