ASP.NET MVC, 플러그인 아키텍처 및 ID 충돌

Question

그는 물었다

그래서 .... 새로운 사용자 인터페이스의 개발을 시작하는 것입니다 친구에 ASP.NET MVC에 대한 서정적 왁싱 된 ASP.NET MVC에서 다음 문제를 해결할 수 있다면 저 :

플러그인을 지원하는 웹 응용 프로그램을 상상해보십시오. 현재 ASP.NET WebForms 앱에서 플러그인 개발자는 사용자 정의 컨트롤과 일부 JQuery를 제공합니다. 컨트롤의 ID는 고유하므로 JQuery에서 항상 올바른 DOM 요소를 선택하고 코드 숨김을 통해 올바른 컨트롤 컬렉션을 처리 할 수 ​​있습니다.

우리는 여러 가지 형식을 가질 수 있기 때문에 MVC에서 제안했습니다 ... 각 플러그인을 partialView로 구현할 수 있습니다.

각 partialView는 고유 한 양식에 의해 래핑되어 관련 Controller Action이므로 partialView에 정의 된 양식 데이터 만받을 수 있습니다. 따라서이 관점에서 보면 DOM id 충돌에 신경 쓰지 않습니다.

그러나 ID 충돌이 발생하면 HTML이 유효하지 않으므로 플러그인 개발자가 작성한 JQuery가 실패 할 수 있습니다! 나는 우리가 피해 갈 수있는 방법을 모르겠어요

...

플러그인이 추가 될 때 나는 충돌의 partialView을 구문 분석의 생각처럼 해달라고 내가 ID를 제한의 생각처럼 해달라고 그 플러그인 개발자가에 액세스 할 수 있습니다.

아마도 id는 런타임에 접두사로 보강 될 수 있으며 모델 바인더에는이 접두어가 제공 될 수 있습니까?

Answer 1

DIV 또는 FORM 요소 내에서 플러그인의 내용을 래핑하고 페이지에 고유 한 ID를 부여 할 수 있습니다. 그런 다음 jQuery를 사용하여이 "상위"DIV 또는 FORM 요소 내에있는 요소 만 선택하면됩니다.

런타임시 고유 ID로 사용할 GUID를 자동으로 생성 할 수는 있지만 플러그 인을 작성하는 사람이 약간의 노력을해야합니다. 아마도 "부모"DIV 및 ID를 자동으로 생성하는 방식으로 구성 할 수 있지만,보기의 ID를 플러그인의 속성으로 액세스 할 수 있습니다.

그냥 몇 가지 생각, 난 아직 ASP.NET MVC 플러그인 기반 시스템을 구축하지 않았지만 너무 어렵지 않습니다.

이

<%@ Control Language="C#" Inherits="MvcPluginPartialView.PluginViewUserControl" %> 
<input class="txtText" type="text" value="<%=this.ID %>" /> 
<input class="txtButton" type="button" value="Show Alert" /> 
<script type="text/javascript"> 
    jQuery(function() { 
     // This is the Unique ID of this Plugin on the Page 
     var pluginID = "<%=this.ID %>"; 

     // Attach the OnClick event of the Button 
     $("#" + pluginID + " .txtButton").click(function() { 
      // Display the content of the TextBox in an Alert dialog. 
      alert($("#" + pluginID + " .txtText").val()); 
     }); 
    }); 
</script> 

MvcPluginPartialView.PluginViewUserControl :

namespace MvcPluginPartialView 
{ 
    public class PluginViewUserControl : ViewUserControl 
    { 
     public PluginViewUserControl() 
     { 
      this.ID = "p" + Guid.NewGuid().ToString().Replace("-", ""); 
     } 

     public override void RenderView(ViewContext viewContext) 
     { 
      viewContext.HttpContext.Response.Cache.SetExpires(DateTime.Now); 
      ViewUserControlContainerPage containerPage = new ViewUserControlContainerPage(this); 
      //this.ID = Guid.NewGuid().ToString(); 
      RenderViewAndRestoreContentType(containerPage, viewContext); 
     } 

     internal static void RenderViewAndRestoreContentType(ViewPage containerPage, ViewContext viewContext) 
     { 
      string contentType = viewContext.HttpContext.Response.ContentType; 
      containerPage.RenderView(viewContext); 
      viewContext.HttpContext.Response.ContentType = contentType; 
     } 

     private sealed class ViewUserControlContainerPage : ViewPage 
     { 
      public ViewUserControlContainerPage(ViewUserControl userControl) 
      { 
       this.Controls.Add(userControl); 
      } 

      protected override void Render(System.Web.UI.HtmlTextWriter writer) 
      { 
       writer.Write("<div id='" + this.Controls[0].ID + "'>"); 

       base.Render(writer); 

       writer.Write("</div>"); 
      } 
     } 
    } 
} 

그런 다음에 뷰를 배치

ViewUserControl1.ascx : 여기

사용자 정의 ViewUserControl 기본 클래스를 사용하는 PartialView의 예 당신은 평소와 같이 "Html.RenderPartial"메소드를 사용할 수 있으며 원하는만큼 페이지에 많은 것을 넣을 수 있습니다. pected.

<%Html.RenderPartial("ViewUserControl1"); %> 
<%Html.RenderPartial("ViewUserControl1"); %> 
<%Html.RenderPartial("ViewUserControl1"); %>