UserControl을 사용하여 HTML을 생성하기 위한 팁

사용자 컨트롤은 확실히 ASP.NET을 사용하는 과정에서 aspx 페이지 외에 가장 일반적인 것은 ascx입니다. ascx는 강력한 재사용 기능을 제공하고 합리적으로 사용하면 개발 효율성을 크게 향상시킬 수 있는 독립적인 로직을 갖춘 구성 요소입니다. 사용자 컨트롤을 통해 HTML 콘텐츠를 직접 생성하는 것은 실제로 비교적 일반적인 기술입니다(특히 AJAX 시대). 그러나 인터넷에는 이 영역의 콘텐츠가 상대적으로 적기 때문에 여기서는 문자열을 연결하는 데 어려움을 겪고 있습니다. 예제에서는 이 기술을 간략하게 소개합니다.

객체(기사, 사진, 음악 등)에 댓글을다는 것은 애플리케이션에서 가장 일반적인 기능 중 하나입니다. 먼저 Comment 클래스와 여기에 사용되는 "get" 메소드를 정의합니다.

public partial class Comment{    public DateTime CreateTime { get; set; } 
    public string Content { get; set; }
} 
public partial class Comment{    private static List<Comment> s_comments = new List<Comment>
    {        new Comment
        {
            CreateTime = DateTime.Parse("2007-1-1"),
            Content = "今天天气不错"
        },        new Comment
        {
            CreateTime = DateTime.Parse("2007-1-2"),
            Content = "挺风和日丽的"
        },        new Comment
        {
            CreateTime = DateTime.Parse("2007-1-3"),
            Content = "我们下午没有课"
        },        new Comment
        {
            CreateTime = DateTime.Parse("2007-1-1"),
            Content = "这的确挺爽的"
        }
    }; 
    public static List<Comment> GetComments(int pageSize, int pageIndex, out int totalCount)
    {
        totalCount = s_comments.Count; 
        List<Comment> comments = new List<Comment>(pageSize); 
        for (int i = pageSize * (pageIndex - 1);
            i < pageSize * pageIndex && i < s_comments.Count; i++)
        {
            comments.Add(s_comments[i]);
        } 
        return comments;
    }
}

댓글 목록을 표시하기 위해 사용자 컨트롤(ItemComments.aspx)을 사용하여 이를 캡슐화할 수 있습니다. 당연히 페이징도 필수적입니다.

<asp:Repeater runat="server" ID="rptComments">
    <ItemTemplate>
        时间：<%# (Container.DataItem as Comment).CreateTime.ToString() %><br />
        内容：<%# (Container.DataItem as Comment).Content %> 
    </ItemTemplate>
    <SeparatorTemplate>
        <hr />
    </SeparatorTemplate>    <FooterTemplate>
        <hr />
    </FooterTemplate></asp:Repeater> <% if (this.PageIndex > 1)
   { %>
        <a href="/ViewItem.aspx?page=<%= this.PageIndex - 1 %>" title="上一页">上一页</a> <% } %><% if (this.PageIndex * this.PageSize < this.TotalCount)
   { %>

및

public partial class ItemComments : System.Web.UI.UserControl{    protected override void OnPreRender(EventArgs e)
    {        base.OnPreRender(e); 
        this.rptComments.DataSource = Comment.GetComments(this.PageSize,            this.PageIndex, out this.m_totalCount);        this.DataBind();
    } 
    public int PageIndex { get; set; } 
    public int PageSize { get; set; } 
    private int m_totalCount;    public int TotalCount
    {        get
        {            return this.m_totalCount;
        }
    }
}

그런 다음 페이지(ViewItem.aspx)에서 이 구성 요소를 사용합니다.

<p id="comments"><demo:ItemComments ID="itemComments" runat="server" /></p>

그리고 :

public partial class ViewItem : System.Web.UI.Page{    protected void Page_Load(object sender, EventArgs e)
    {        this.itemComments.PageIndex = this.PageIndex;
    } 
    protected int PageIndex
    {        get
        {            int result = 0;            Int32.TryParse(this.Request.QueryString["page"], out result); 
            return result > 0 ? result : 1;
        }
    }
}

ViewItem.aspx를 연 후의 효과는 다음과 같습니다.

시간: 2007/1/1 0:00:00 내용: 오늘 날씨가 좋다

---

시간: 2007/1/2 0:00:00 내용 : 매우 맑음

---

시간 : 2007/1/3 0:00:00 내용: 오후에는 수업이 없습니다

---

다음 페이지

이 페이지의 기능은 매우 간단합니다. 즉, 댓글을 보는 것입니다. 현재 주석의 페이지 번호는 QueryString의 페이지 항목을 사용하여 지정된 다음 ItemComments.ascx 컨트롤의 속성을 가져와 ViewItem.aspx에서 설정합니다. ItemComments 컨트롤은 데이터를 가져와 자체 속성을 기반으로 바인딩합니다. 표시 콘텐츠는 모두 ascx에 정의되어 있습니다. 페이징 기능이 필요하기 때문에 이 주석 컨트롤에는 이전 페이지와 다음 페이지에 대한 링크도 포함되어 있습니다. 해당 링크의 대상은 매우 간단하며, 이는 ViewItem.aspx 페이지이며 페이지 번호의 쿼리 문자열만 추가합니다. .

기능이 완성됐는데 사용해보니 갑자기 부적절하다고 느껴지는 이유는 무엇일까요? 페이지를 넘기거나 사용자가 댓글을 게시하면 전체 페이지가 새로 고쳐지기 때문입니다. 이는 좋지 않습니다. ViewItem 페이지에 다른 표시 부분이 여러 개 있을 수 있으며 변경되지 않습니다. 그리고 다른 여러 부분에도 페이지를 매겨야 하는 경우 페이지에 있는 각 부분의 현재 페이지 번호를 유지해야 할 수 있으므로 개발 복잡성은 여전히 ​​상대적으로 높습니다.

그럼 AJAX를 사용해 보겠습니다. 사용자가 페이지를 넘기거나 댓글을 보는 동안 댓글을 남기더라도 페이지의 다른 콘텐츠에는 영향을 미치지 않습니다. 이 기능을 개발하려면 당연히 서버 측 지원이 필요한데 어떻게 해야 할까요? 일반적으로 우리에게는 항상 두 가지 옵션이 있습니다.

1. 서버는 JSON 데이터를 반환하고 렌더링을 위해 클라이언트에서 DOM을 작동합니다.

2. 서버는 HTML 콘텐츠를 직접 반환한 다음 클라이언트에 컨테이너를 설정합니다(예: 위 댓글의 ID가 p인 경우).

그러나 어떤 접근 방식을 채택하더라도 일반적으로 "프레젠테이션" 로직이 다시 작성됩니다(첫 번째 프리젠테이션 로직은 ItemComments.ascx에 작성됩니다). 첫 번째 접근 방식을 사용하는 경우 DOM을 조작하여 클라이언트 측에서 프레젠테이션 논리를 렌더링해야 하며, 두 번째 접근 방식을 사용하는 경우 서버 측에서 문자열 연결을 수행해야 합니다. 어느 접근 방식이든 DRY 원칙에 위배됩니다. ItemComments.ascx의 표시 방법이 수정되면 다른 부분도 이에 따라 수정되어야 합니다. 게다가 DOM 요소를 조작하든 문자열을 이어붙이든 유지 관리가 더 번거롭고 당연히 개발 효율성도 높지 않습니다.

ItemComments 컨트롤에서 HTML 콘텐츠를 직접 가져올 수 있다면 좋을 것입니다. 그렇게 해 보겠습니다. 다음 코드(GetComments.ashx)를 봐주세요:

public class GetComments : IHttpHandler{    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain"; 
        ViewManager<ItemComments> viewManager = new ViewManager<ItemComments>();        
        ItemComments control = viewManager.LoadViewControl("~/ItemComments.ascx");
 
        control.PageIndex = Int32.Parse(context.Request.QueryString["page"]);
        control.PageSize = 3;
 
        context.Response.Write(viewManager.RenderView(control));
    } 
    public bool IsReusable { ... }
}

간단한 코드죠? 객체를 생성하고 속성을 설정한 다음 Response.Write를 통해 출력하면 됩니다. 실제로는 별 문제가 아니지만 핵심은 ViewManager 클래스에 있습니다. 구현 방법을 살펴보겠습니다.

public class ViewManager<T> where T : UserControl{    private Page m_pageHolder; 
    public T LoadViewControl(string path)
    {        this.m_pageHolder = new Page();        return (T)this.m_pageHolder.LoadControl(path);
    } 
    public string RenderView(T control)
    {        StringWriter output = new StringWriter(); 
        this.m_pageHolder.Controls.Add(control);        HttpContext.Current.Server.Execute(this.m_pageHolder, output, false); 
        return output.ToString();
    }
}

ViewManager에는 LoadViewControl과 RenderView라는 두 가지 메서드만 있습니다. LoadViewControl 메서드의 기능은 Control 인스턴스를 생성하여 반환하는 것이고, RenderView 메서드의 기능은 HTML을 생성하는 것입니다. 이 구현의 비결은 새로 생성된 Page 개체를 컨트롤 생성을 위한 "컨테이너"로 사용하는 것입니다. 결국 우리는 실제로 Page 개체의 전체 수명 주기를 실행하고 결과를 출력합니다. 이 빈 페이지 개체는 다른 코드를 생성하지 않으므로 우리가 얻는 것은 사용자 컨트롤에 의해 생성된 코드입니다.

그러나 이러한 AJAX 효과를 얻으려면 두 가지 작업이 필요합니다.

첫 번째는 클릭 시 JavaScript 함수를 호출하도록 ItemComments 컨트롤의 페이지 넘기기 링크를 수정하는 것입니다. 예를 들어, "이전 페이지"에 대한 코드는 다음과 같습니다.

<a href="/ViewItem.aspx?page=<%= this.PageIndex - 1 %>" title="上一页"    
onclick="return getComments(<%= this.PageIndex - 1 %>);">上一页</a>

둘째, 클라이언트 메소드 getComments를 구현합니다. 여기서는 프로토타입 프레임워크를 사용했습니다. 장점은 매우 간결한 코드를 사용하여 HTML을 대체하는 AJAX 효과를 얻을 수 있다는 것입니다.

<script type="text/javascript" language="javascript">
    function getComments(pageIndex)
    {        new Ajax.Updater(            "comments",            "/GetComments.ashx?page=" + pageIndex + "&t=" + new Date(),
            { method: "get" }); 
        
        return false; // IE only
    }</script>

완료되었습니다.

사실 앞서 언급했듯이 UserControl을 사용하여 HTML 코드를 생성하는 것은 매우 일반적인 기술입니다. 특히 AJAX 애플리케이션이 점점 더 대중화됨에 따라 위에서 언급한 방법을 합리적으로 사용하면 애플리케이션에 AJAX 효과를 쉽게 추가할 수 있습니다. 그리고 대부분의 경우 페이지에 콘텐츠를 표시할 필요가 없더라도 UserControl을 사용하여 콘텐츠를 편집할 수 있습니다. UserControl을 작성하는 것이 문자열을 연결하는 것보다 개발 효율성과 유지 관리성이 훨씬 높기 때문입니다. 이 방법은 실제로 오랫동안 검증된 WebForms 모델을 사용하기 때문에 실행 효율성 측면에서도 상당히 효율적입니다. 또한 지금의 예에서와 같이 HTML 생성에 UserCotrol을 사용하면 다른 이점도 있습니다.

1. 페이지 렌더링 논리는 한 번만 구현되므로 유지 관리성이 향상됩니다.

2. 은 클라이언트의 6dc338e96418ddb2f62886b029f4122c href가 여전히 유효하므로 페이지 SEO에 영향을 주지 않습니다.

사실 WebForms는 매우 강력한 모델이므로 ASP.NET MVC의 View도 WebForms 엔진을 사용합니다. 위의 예를 통해 UserControl 자체는 추가 콘텐츠를 가져오지 않기 때문에 UserControl을 사용하여 XML 데이터를 생성하는 등 실제로 다른 많은 작업을 수행할 수 있습니다.

위 내용은 UserControl을 사용하여 HTML을 생성하기 위한 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!