ASP.NET MVC : Good Replacement for User Control?

Question

I found user controls to be incredibly useful when working with ASP.NET webforms. By encapsulating the code required for displaying a control with the markup, creation of reusable components was very straightforward and very, very useful.

While MVC provides convenient separation of concerns, this seems to break encapsulation (ie, you can add a control without adding or using its supporting code, leading to runtime errors). Having to modify a controller every time I add a control to a view seems to me to integrate concerns, not separate them. I'd rather break the purist MVC ideology than give up the benefits of reusable, packaged controls.

I need to be able to include components similar to webforms user controls throughout a site, but not for the entire site, and not at a level that belongs in a master page. These components should have their own code not just markup (to interact with the business layer), and it would be great if the page controller didn't need to know about the control. Since MVC user controls don't have codebehind, I can't see a good way to do this.

Update FINALLY, a good (and, in retrospect, obvious) way to accomplish this.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace K.ObjectModel.Controls
{
    public class TestControl : ViewUserControl
    {
        protected override void Render(System.Web.UI.HtmlTextWriter writer)
        {
            writer.Write("Hello World");
            base.Render(writer);
        }
    }
}

Create a new class which inherits ViewUserControl

Override the .Render() method as shown above.

Register the control via its associated ASCX as you would in a webForm:

<%@ Register TagName="tn" TagPrefix="k" Src="~/Views/Navigation/LeftBar.ascx"%>

Use the corresponding tag in whatever view or master page that you need:

<k:tn runat="server"/>

Make sure your .ascx inherits your new control:

<%@ Control Language="C#" Inherits="K.ObjectModel.Controls.TestControl" %>

Voila, you're up and running. This is tested with ASP.NET MVC 2, VS 2010 and .NET 4.0.

Your custom tag references the ascx partial view, which inherits from the TestControl class. The control then overrides the Render() method, which is called to render the view, giving you complete control over the process from tag to output.

The difference between using this approach and calling Html.RenderPartial() or `Html.RenderAction()' is adding the control to a view is done with a webforms-like tag, which is not only more comfortable for designers, but keeps them from having to be aware of controller names and methods. The name of the control class is isolated to the ASCX, also making it easier to drop these in an assembly and reuse them across separate projects.

Some may say that this violates SoC, but I believe that this approach is functionally equivalent to tying a partial view and a controller together while maintaining clean markup. It should be clear, however, that it is still up to the developer to keep only presentation-related logic in the control Business and data access logic still belong in their respective layers.

Parcae

Argh... Your edit is frustrating as you've changed your question. "reusable, packaged controls" with MVC live in a totally different world than RenderPartial and RenderAction. -- What your starting to talk about is the RenderPartial vs. RenderAction debate/discussion which has been answered previously and is mostly a philosophical argument about code responsibilities. – Flashboard

@jfar ?? I've added the "options" section because those are what everyone seems to be offering as solutions. If you have a better idea, I'd be thrilled to hear it. – Parcae

@David Lively - You can't compare the options RenderPartial and Portable Areas without defining the scope of the solution your trying to solve. Its like saying "how should I kill this bug? flyswatter, baseball bat, or nuke from orbit" without telling the person your asking whether your trying to kill a mosquito or an synthetic alien species with acid blood. When you say "reusable, packaged controls" your talking about a huge problem but by including RenderPartial as an option your saying "simple markup reuse". Which one is it? What kind of bug are you trying to kill? – Flashboard

@jfar Good point. I need to be able to include components similar to webforms user controls throughout a site, but not for the entire site, and not at a level that belongs in a master page. These components should have their own code not just markup (to interact with the business layer), and it would be great if the page controller didn't need to know about the control. Since MVC user controls don't have codebehind, I can't see a good way to do this. Is that clear? – Parcae

@David Lively I wish I could say this without sounding snarky but don't you think these details could have existed in your original question? Based on these details the answer is a clean: "Use RenderAction" – Flashboard

@jfar I've searched previous questions, and have yet to find a good answer. And yes, that's a bit snarky. If you're not interested in providing a helpful response, don't waste your time or mine. – Parcae

@David Lively So then why wasn't your question: "I've seen these questions, don't like the answer, any other techniques?" Filling SO with vague questions that change mid edit when you really want to ask duplicated questions isn't helpful either. ;) – Flashboard

Argh. The edit just listed some of the suggestions all in one place. The text of my question was unchanged. This question isn't vague, and I have yet to see an effective response either on SO or Google. – Parcae

@David Lively - I thought we already agreed its vague, you even said "good point"? You really should update the question with the comments you posted here. I will if you don't. Also if your discounting the compartmentalization/component question answers that already exist on SO you should include why and not just say you haven't found something effective. – Flashboard

Answer 1

At first glance its easy to dismiss MVC as not having the capabilities for reusable components.

Once you get the know ASP.NET MVC you'll find there are several techniques for creating rich controls and components and encapsulating aspects of MVC follow along the same pathways as encapsulating a WebForms application.

I think what you're doing is only looking at the View aspects of MVC and not how all the underlying M and C can be encapsulated and tied together. Partial Views, Render Action/Partial are just small pieces of the underlying component capabilities of MVC. There is much more richness under the covers.

Flashboard

"Richness under the covers" that's what he said. – Seraglio

Answer 2

I'm a little confused here.

First of all, the .NET MVC equivalent to User Controls is Partial Views. Partial Views are a convenient way of encapsulating common View functionality in a single location. You can then call a Partial View from inside another View.

Second of all, modifying a View shouldn't mean also modifying a controller. If you are required to make a change to both just because your View changed (and not the underlying data), then there's a code issue somewhere along the line.

Tshombe

I understand your point (I think), but consider this: I want to display, say, a hit counter on a page. Without having code linked to that control or partial view, I'll need to modify the underlying controller to ensure that the current hit count is provided in the ViewData or model passed to the view. Any controller that needs to display this partial view will need to provide this data, and thus will have to be modified. Thoughts? This could be provided in a common base controller class, but the requirement for displaying this may not reflect a class hierarchy. – Parcae

@David Lively: Place counter html code in master page (using partial view or not). Set counter value in ViewData in your BaseController class. You should have base controller class to share common features. – Paroxysm

@Paroxysm That helps in many situations, but in this one it only seems to make sense if the pages that need to display the counter have a hierarchical relationship. Also, if I start throwing all of this in a BaseController class, every controller that descends from that will carry this data which is not required for all views. – Parcae

" .NET MVC equivalent to User Controls is Partial Views." - :( This is like comparing Apples to Orange Seeds. They are barely equivalent. The only similarity is they will both contain markup. – Flashboard

@jfar - The purpose behind using either one is, in this case, the same. Partial Views in .NET MVC are used to encapsulate code for re-use, much the same way that User Controls were used to re-use the same control code. – Tshombe

@David Lively: If you don't want to place counter on most of the pages, dotjoe gave valid solution. Html.RenderAction is the way to go. – Paroxysm

@Paroxysm Looks like that will solve the problem, but then the view needs to be aware of controller actions specifically for this component. In a webforms user control, this wouldn't be necessary, as the webforms engine would find the appropriate class and render methods for an asp:mycontrol tag. – Parcae

@Justin well, partial views encapsulate markup, but the controller seems to still be responsible for determining where the data comes from. Which means, again, I have to modify the controller to correspond to changes in the view. – Parcae

@Justin Niessner - I disagree. A User Control was fully aware of the WebForm viewstate, http and event pipeline, everything MVC handles with the Controller. WebForm user controls did much more than just simply render models into HTML. – Flashboard

@David Lively: You can easily hide Html.RenderAction behind another method Html.VisitCounter, which could call RenderAction. View is not really aware what hides behind VisitCounter method. – Paroxysm

Hey David, having read everything you said, I think you want to package UI and it's corresponding code as you did in WebForms world with the Design view and Codebehind code. If I am right in this thinking, then you will be most likely using RenderAction() because that's the only way to go through the controller action and execute some code before rendering your View or Partial View. I too have found that RenderAction() helps me a lot in my scenarios, although some people here at SO would like to convince you into using only RenderPartial (as though there was something bad with RenderAction). – Compare

Answer 3

a user control is just some stuff that renders html, in mvc you have html helpers and partial views and normal views (you can render them with renderaction )

Html.Helper("someStuff")
Html.RenderPartial("viewname")
Html.RenderAction<Controller>(o => o.Action());

so basically it's just the helpers

you can actually easily substitute a call to

Html.TextBoxFor(o => o.Name);

with

Html.RenderPartial("textbox", Model.Name);

Gaultiero

Answer 4

Consider the following example:

• My view (CustomerDetail.ascx) binds to ICustomerDetail view-model which looks like:

  interface ICustomerDetail {
  string Name { get; }
  Address CurrentAddress { get; }
  }

• I can create a partial view Address.ascx which binds to IAddress view-model

• When I am creating the CustomerDetail.ascx, I can place the Address.ascx on the same surface & bind it to the oCustomerDetail.Address field

• IMO - we should be composing views from multiple such smaller partial views in MVC & this is where you will see the re-usability & the power of user controls (partial views)

• Now if my controller returns ICustomerDetail, I will be able to re-use the Address.ascx without any problems

HTH.

Nearsighted

That's a nice explanation, however, one point that everyone seems to miss is that with RenderAction you will always have some controller action code that will run first. So, if you need something special to happen, before the View or ViewUserControl gets rendered, then use RenderAction. And use RenderPartial() when you don't need anything else to be loaded from somewhere (you already have everything either in current Model in the View from where you are calling RenderPartial() or you don't need anything else and can call RenderPartial() with just the ViewUserControl name as its argument). – Compare

Answer 5

Let's take a registration page for an e-commerce site, as an example. You prompt the user for their name, password, postal information, favorite dog breed, etc. Somewhere else in the application, you also need to collect a billing address and a shipping address. To enforce DRY, you create a user control that manages the entry of the address information.

So, to further illustrate, your address class looks something like this:

public class Address
{
    public string StreetAddress { get; set; }
    public string City { get; set; }
    ...
}

Your registration class:

public class UserReg
{
    public string UserName { get; set; }
    public Address MailingAddress { get; set; }
    ...
}

Your billing and shipping addresses may descend from the Address class:

public class BillingAddress : Address
{ 
    ...
}

public class ShippingAddress : Address
{ 
    ...
}

For the following examples, I am assuming that you have added System.Web.Mvc to the namespaces section of web.config. Based on this class hierarchy, your user control will have a control tag that refers only to the Address class:

<%@ Control Language="C#" Inherits="ViewUserControl<Address>" %>

Since you've done this, you simply need to pass the appropriate model reference from the page. In the User Registration page:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="ViewPage<UserReg>" %>
    ...
    <% Html.RenderPartial("AddressControl", Model.MailingAddress); %>

In the billing address page:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="ViewPage<BillingAddress>" %>
    ...
    <% Html.RenderPartial("AddressControl", Model); %>

In the shipping address page:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="ViewPage<ShippingAddress>" %>
    ...
    <% Html.RenderPartial("AddressControl", Model); %>

I can pass the model directly from the billing and shipping page, because the class directly descends from Address. As long as the logic is in place to process the addresses correctly, you're not going to have to make many changes to the controller, if any.

Combat

+1 for the code, but this doesn't appear to answer the core of the question, which may have been poorly phrased. I need to keep code for the partial view with the view, so that it can execute without having to modify the controller. – Parcae

Answer 6

Partial views are certainly not close to WebUserControls.

In WebUserControls, you can write the HTML, and its own event handlers and is also connected to the parent page. For e.g. I can create a Sign In Web user control and use it anywhere in the web application. As an independent control, it can handle all the verifications and signing and allows redirections.

You don't get that in Partial views.

Bickering