UI composition in ASP.NET MVC - asp.net-mvc

Question

How would you go about supporting external composable parts in an ASP.NET MVC view?
What do I mean by this? Think either "login box on every page" or "iGoogle". It's stuff that needs to be in certain places that is external to each controller/view.
One approach at this would be adding components in the view like so:
<% foreach (var component in GetComponents()) {%>
<%= Html.RenderPartial(component.ViewName, component.ViewData)%>
<%} %>
In the example above I'm looking for a good way to have the viewname and viewdata delivered by each component's controller and not the controller of the view they are displayed on. Any totally different solution you can suggest would also be of interest. Filters, WebForms, etc.
Update: I'll try to explain what I'm trying to wrap my head around with an example. I'll pick the login functionality.
In a typical webforms application this could be a user control that retrieves the appropriate data in the load event of the page's life cycle and updates some UI controls. Upon click the page would post back and we can act upon the posted information in the click event in the same user control.
As of my current understanding of the ASP.NET MVC style the controller that first accepts the request would retrieve the appropriate data and pass it to the view which in turn would pass it along to the login partial view. The login view would define a form whose post action is directed at the login action of the login controller. The posted information is used by the login action and we can choose to pass the request along to the original controller using some nifty scheme.
I assume there is a smarter approach than the above that doesn't require I put controller logic in a view/a master page.

Answer 1

There is two ways you can do this:
One: Make a BaseController, that allways gets the data needed for these components, set the ViewData["loginbox"] = loginBoxData, and then you can pass it along like so.
<% foreach (var component in GetComponents()) {%>
<%= Html.RenderPartial(component.ViewName, ViewData[component.Name])%>
<%} %>
The problem about this method is that you need to have logic to say WHEN all these data needed for the components is going to be fetched, and when not to.
TWO:
There is a MVC Futures DLL that you can download from here.
It you reference that, and remember to add its namespace to your web.config, then you should be able to say: Html.RenderAction("blah") - this method makes the full trip by contacting a controller, initiate the view, and returns the HTML.

Answer 2

You could use the master page and use content placeholders for view content pages and view user controls.
The default project template in ASP.NET MVC Framework Beta has a content placeholder for the View Content Page. There is also a View User Control for the login/logout link at the top right corner of the pages.
View Content Page
The view content pages are supposed to be used with the data that comes from the View that you are looking at. I.e. if you're browsing to the Index action in HomeController, the server will render the Home/Index.aspx view content page.
In the master page you need the following line:
<asp:ContentPlaceHolder ID="Holder1" runat="server" />
And in the view content page itself you compose for that place holder with the following:
<asp:Content ID="Content1" ContentPlaceHolderID="Holder1" runat="server">
<p>This text goes to "Holder1" content place holder and
I can access the ViewData.</p>
<p><%= ViewData["Message"] %>
</asp:Content>
Each asp:ContentPlaceHolder corresponds to the view's asp:Content through the id. So if you want several placeholders like this:
<asp:ContentPlaceHolder ID="Holder1" runat="server" />
<asp:ContentPlaceHolder ID="Holder2" runat="server" />
…you can handle them in the view content page like this:
<asp:Content ID="Content1" ContentPlaceHolderID="Holder1" runat="server">
<p>This text goes to "Holder1" content place holder</p>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Holder2" runat="server">
<p>This text goes to "Holder2" content place holder</p>
</asp:Content>
View User Controls
View user controls can be used regardless of what view you are looking at. Here are some examples of viewing user controls, are taken from Wekeroad's blog post about View User Controls. To use a view user control:
<%=Html.RenderUserControl(“~/UserControls/UserList.ascx”)%>
If you have the need you can also pass data and anonymous types to it.
<%=Html.RenderUserControl(“~/UserControls/UserList.ascx”,ViewData.Users, new {GroupID=2})%>

Answer 3

without understanding the question properly, i'd suggest a masterpage approach. ie. have the masterpage render the components and pages derive from the masterpage.
i fear this is not a good answer however. i dont understand this: "..have the viewname and viewdata delivered by each component's controller and not the controller of the view they are displayed on."

Answer 4

This is an old question but here's my take on it with razor:
In CQRS style apps you can push an ICommand to a single service endpoint and the service figures out how to route it.
a good example of this: https://github.com/ncqrs/ncqrs/blob/master/Framework/src/Ncqrs/Commanding/ServiceModel/CommandService.cs
What say - instead of trying to execute a command we were trying to execute a query?
And instead of 1 we were passing 1 or more as a list of IViewModelExecutor?
In your main page you have a master ViewModel it has a definition for each of it's sub ViewModels, when the page loads we ask the service to get all the view models pertaining to this view:
service.Load(new List<IViewModelExecutor>{UserinfoViewModel, UserAccountViewModel });
the service loads the data from the readmodel and caches where needed. The sub view models are passed to the sub views using Html.RenderPartial("subviewname", Model.SubViewModel)
The sub view knows how to render itself based on the model.
Now - as we have a compositional UI with ajax updates - lets say we want to update the UserAccount part of the page. In the controller we have an action that is responsible for rendering JUST that part.
it can also request from the service.Load(new List<IViewModelExecutor>{UserAccountViewModel })
and only get back the part of the view model it needs - probably cached. unless the params change obv.
Now we have a compositional UI that can be constructed in whole or in part.
And using content negotiation we can serve HTML fragments, JSON or XML depending on the HTTP headers in the request.