2011-02-22 4 views
5

mvc에 익숙하지 않으므로 이것이 가능한지 확실하지 않습니다.mvc 용 html 도우미 작성

저는 기본적으로 멋진 이미지를 사용하여 둥근 모서리 상자를 만드는 데 사용하는 HTML이 있습니다.

mvc3에서 도우미를 호출하고 div 태그의 주 영역에 원하는 내용을 삽입 할 수있는 도우미 함수를 만들 수 있습니까?

내가 사방 그래서 내가 도우미의 몇 가지 유형을 생성하고 내가 이것을 사용해야 할 때마다 호출 할 수 있습니다 바라고이 스타일을 사용하려면이 복사하고 싶지 해달라고 내 HTML

<div class="rounded"> 
    <div class="top"> 
     <div class="right"> 
     </div> 
    </div> 
    <div class="middle"> 
     <div class="right"> 
      <div class="content"> 
      Some how allow me to insert data into here 
       <div class="Clear"> 
      </div> 
     </div> 
    </div> 
    <div class="bottom"> 
     <div class="right"> 
     </div> 
    </div> 
</div> 


</div> 

입니다 상자에 html을 삽입 할 수 있도록 허용

<div class="content"> 
      Some how allow me to insert data into here 
       <div class="Clear"> 
      </div> 

누구에게 의견이 있습니까?

public class RoundedCorner : IDisposable 
{ 
    private readonly ViewContext _viewContext; 
    private bool _disposed = false; 

    public RoundedCorner(ViewContext viewContext) 
    { 
     _viewContext = viewContext; 
    } 

    public void Dispose() 
    { 
     Dispose(true); 
     GC.SuppressFinalize(this); 
    } 

    protected virtual void Dispose(bool disposing) 
    { 
     if (!_disposed) 
     { 
      _disposed = true; 
      _viewContext.Writer.Write(
       @"<div class=""Clear""> 
        </div> 
        </div> 
        </div> 
        <div class=""bottom""> 
        <div class=""right""> 
        </div> 
        </div> 
        </div> 
        </div>" 
      ); 
     } 
    } 
} 

public static class HtmlExtensions 
{ 
    public static RoundedCorner RoundedCorner(this HtmlHelper htmlHelper) 
    { 
     htmlHelper.ViewContext.Writer.Write(
      @"<div class=""rounded""> 
      <div class=""top""> 
      <div class=""right""> 
      </div> 
      </div> 
      <div class=""middle""> 
      <div class=""right""> 
      <div class=""content"">" 
     ); 
     return new RoundedCorner(htmlHelper.ViewContext); 
    } 
} 

하고 단순히보기 :

@using (Html.RoundedCorner()) 
{ 
    <div>Some how allow me to insert data into here</div> 
} 

생성 것이다 (내가 알고, 무엇

답변

6

사용자 정의 HTML 도우미를위한 훌륭한 시나리오처럼 보인다 주셔서 감사합니다 추악한 형식이지만 완벽하게 유효한 HTML이지만, 나는 그 순간을 고치기에는 너무 게으른 편이다.)

<div class="rounded"> 
       <div class="top"> 
       <div class="right"> 
       </div> 
       </div> 
       <div class="middle"> 
       <div class="right"> 
       <div class="content"> <div>Some how allow me to insert data into here</div> 

<div class="Clear"> 
        </div> 
        </div> 
        </div> 
        <div class="bottom"> 
        <div class="right"> 
        </div> 
        </div> 
        </div> 
        </div> 
+0

감사합니다. Darin, Im mvc를 좋아해요. 그 이상으로 놀아요. :) –

+0

죄송합니다. 한 번 더 질문합니다.이 수업은 어디에 두어야합니까? 그리고 어떻게 참조 할 수 있습니까, 뷰 web.config에 내 네임 스페이스를 추가해야합니까? –

+0

doh! 그것을 무시하고 헬퍼 폴더에 추가하고 web.config의 네임 스페이스에 대한 참조를 추가했습니다. –

2

나는 Darin이 제공 한 위의 솔루션이 마음에 든다. 내가 할 수있는 유일한 변경 사항은 RoundedCorner 클래스에서 클래스의 일부와 도우미의 다른 부분을 갖는 대신 뷰 열기 및 닫기 태그를 뷰 컨텍스트에 쓰는 두 개의 개인 메서드를 갖는 것입니다. 그런 다음 도우미는 RoundedCorner의 새 인스턴스를 반환합니다.