ASP.NET mvc中类似UserControl的行为

时间:2010-09-17 13:35:35

标签: asp.net-mvc

决定学习ASP.NET MVC并立即陷入简单的困境。

在Web窗体中,用户控件允许基于功能和便于重用将应用程序分离到组件中。似乎部分视图应该在ASP.NET MVC中做类似的事情,但要么是我错了,要么每个可见页面都由单个控制器处理,并且不能将某些页面部分委托给单独的控制器而不进行硬编码这些控制器关系。

RenderAction可以渲染局部视图并在页面中插入生成的HTML,但是如果我们希望在用户点击此视图中的某个链接以及整个页面时刷新此视图,我们需要所有部分视图链接到请参考父控制器?

例如:

主页\的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);
    }
}

必须有比这更好的方法吗?

1 个答案:

答案 0 :(得分:0)

我不知道我是否理解正确但您可以使用Ajax(通过jQuery)加载此部分视图,并且当您需要仅刷新此部分内容时,您将重新加载该元素。像这样:

在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(索引页面)......

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

干杯