繁体   English   中英

ASP.NET MVC中类似UserControl的行为

[英]UserControl-like behavior in ASP.NET mvc

决定学习ASP.NET MVC,并立即陷入一些简单的问题。

在Web窗体中,用户控件允许根据功能将应用程序分为多个组件,并促进重用。 似乎局部视图在ASP.NET MVC中应该做类似的事情,但是或者我弄错了,或者每个可见页面都由单个控制器处理,并且不可能在不进行硬编码的情况下将某些页面部分委派给单独的控制器这些控制器关系。

RenderAction可以呈现部分视图并将结果HTML插入页面中,但是如果我们希望在用户单击该视图中的某个链接以及整个页面时刷新此视图,则需要所有部分视图链接来引用该视图。父控制器?

例如:

Home \\ Index.aspx:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">Home</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
...
<% Html.RenderAction("Index", "Posts"); %>
...

帖子\\ Index.aspx:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<BlogEngine.Models.PostsViewModel>" %>

    <% foreach(var item in Model.Posts){ %>    
        <p class="postMeta"><%: string.Format("{0} {1}", item.CreatedAt, item.CreatedBy) %></p>
        <h1><%: item.Title %></h1>
        <div><%: item.Content %></div>
    <% } %>

    <% if (Model.CurrentPage > 0){ %>        
        <%: Html.ActionLink("Newer posts", "Index", "Home", new { page=Model.CurrentPage - 1}, null) %>
    <%} %>

    <% if (Model.CurrentPage + 1 < Model.TotalPages) { %>
        <%: Html.ActionLink("Older posts", "Index", "Home", new { page=Model.CurrentPage + 1}, null) %>
    <% } %>

PostsController:

public class PostsController : Controller
{
    private const int PostsPerPage = 2;

    private readonly IPostRepository _postRepository;

    public PostsController()
    {
        ...
    }

    public ActionResult Index(int page = 0)
    {
        var model = new PostsViewModel();
        int totalPages = 1;
        model.CurrentPage = page;
        model.Posts = _postRepository.GetPosts(page, PostsPerPage, out totalPages);
        model.TotalPages = totalPages;

        return PartialView(model);
    }
}

有比这更好的方法吗?

我不知道我是否理解正确,但是您可以在使用Ajax(由jQuery)中加载此Partial View的情况下,并且当您只需要刷新这部分内容时,您就可以重新加载元素。 像这样:

用Javascript:

function LoadComments(page) {
   //It'll return a partial view
   $("#comments").load("<%=Url.Action("Posts", "Index")%>?page=" + page); 
}

$(document).ready(function() {
   LoadComments(0); 
});

在yoru PartialView内部,您需要呈现一个JavaScript代码来调用下一个(页面)内容的“重新加载”,因此调用LoadComments(index-page)...

查看jQuery的Ajax APi: http : //api.jquery.com/category/ajax/

干杯

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM