Custom controls with ASP.NET MVC Razor

Question

How can I use custom controls with ASPNET.MVC Razor?

I want to use a custom control on a Razor view. for instance:

<mycontrols:something>@Model.MyVar</mycontrols:something>

or

<mycontrols:something myattribute="@Model.MyVar" />

Please note that my goal is to use only few controls derived from MvcControl, only for trivial repetive ui stuffs.

I tried to find out a syntax similar to @Register to write on the top of the view, but without any success.

Then I went to the web.config, adding

<pages>
   <controls>
      <add tagPrefix="mycontrols" namespace="mynamespace" assembly="myassembly"/>
   </controls>
</pages>

but it looks like custom controls are ignored in rendering.

Someone could help?

...Might be it is a little bit old fashion, but sometimes also custom control could be useful to make your code cleaner!

Echoing the opinions of everyone else here, but you're taking the wrong approach. There are better ways of doing what you want in Razor, and indeed, MVC in general. — Dan Atkinson, Jan 03 '11 at 15:48

score 19 · Answer 1 · answered Jan 03 '11 at 13:05

19

The Razor syntax does not support the notion of Controls at all. If you want to use controls you will have to use the ASPX (WebForms) syntax.

However, the recomended MVC pattern is to use html helper functions or partial views. In Razor you can also use the @helper syntax for quick helper functions.

answered Jan 03 '11 at 13:05

marcind

52,944
13
125
111

I think it is important to note that "ASPX syntax" can be misleading here. I've seen questions of people asking how to use server controls on ASP.NET MVC using ASPX view engine. But yes, your answer is correct! – Fabio Milheiro Mar 19 '12 at 10:54

score 10 · Answer 2 · answered Jan 03 '11 at 08:01

10

In ASP.NET MVC custom server controls should be avoided. Most of them rely on ViewState and PostBack which are notions that no longer exist in MVC. You should prefer using templates, HTML helpers to implement some reusable functionality. Another problem with controls is most of them encapsulate some business logic which fetches data from somewhere and renders it which is an anti-MVC pattern. In MVC it is the controller responsibility to manipulate the model and fetch data and pass a view model to the view which simply should display it.

answered Jan 03 '11 at 08:01

Darin Dimitrov

1,023,142
271
3,287
2,928

I know that, but I'm going to use controls derived from MvcControls, only for trivial ui stuffs. – Fabrizio Jan 03 '11 at 08:03
What do you mean by *MvcControls*? – Darin Dimitrov Jan 03 '11 at 08:04
I mean to implement controls derived from class MvcControl in namespace Microsoft.Web.Mvc.Controls from MvcFutures assembly. – Fabrizio Jan 03 '11 at 08:10
5

@Fabrizio even if you have good enough reasons to want to use controls in MVC, they simply will not work with Razor because the page model it uses was not designed to work with controls. Regardless of your feelings on the use of controls, they are near impossible to use in Razor. – marcind Jan 03 '11 at 16:04

score 6 · Answer 3 · answered Jan 03 '11 at 11:56

MVC uses partial views rather than custom controls, and they can be used in two ways that cover pretty much everything a custom control can do

RenderPartial which renders data already retrieved by the page controller
RenderAction which is similar but has its own controller action so can get data independently

The only scenario I can think of where it would be worth putting a custom control on an mvc view is if you are working on a partially migrated webforms project, and I doubt that would work with anything other than the WebFormsViewEngine.

score 1 · Answer 4 · answered Mar 06 '15 at 14:26

I had the same demand. Wanted to use custom webcontrol from Razor/MVC page. One should not do that with controls, that is handling postback. You don't have the eventcycle to support that, but if your only demand is to use a 'rendering control', you could instantiate it in razor, and control where the rendering takes place:

@{
  var myControl = new mycontrols.something();
  myControl.myattribute = Model.MyVar;
  mycontrol.RenderControl(new HtmlTextWriter(this.Output));
}

Patrick Lee Scott · Answer 5 · 2011-11-11T21:32:25.130

You can do this, though I don't recommend it, though I'm not here to judge. I might add that I don't expect postback and view state to continue working either but you can at least render all of the html.

The only way to do this is a bit of a hack, because razor doesn't support webforms view engine controls. However, it does support partial views made in the webforms View engine. So a hacky solution is to include a partial view with your control in it as such:

For example, say you want to use the office web ui ribbon in your mvc3 project, you could do so by including

<body>
    <div>
        @Html.Partial("_RibbonPartial")
    </div>
</body>

in your view. Where _Ribbon is of type .aspx

then in your partial view simply use your control and set runat="server" and put it inside of a form with runat="server"

//_Ribbon.aspx
<form id="form1" runat="server">
    <XyzControls:Manager ID="Manager1" runat="server" UITheme="Silver" />
    <XyzControls:OfficeRibbon ID="OfficeRibbon1" runat="server" ApplicationMenuColor="#267c29"
        ApplicationMenuText="Item" ApplicationMenuType="Backstage">
//... rest of control code
</form>

Then you need to use ajax to implement events instead of using postback.

Then to cleanup, get rid of the generated code from webforms view engine for post back that you don't need.. You can try keeping it, I haven't so I'm not sure what will happen. I know there are ways to have a fake viewstate as well if you really want to get into messy hacky stuff, but to remove the extra code from webforms you can use the following jquery:

$(function ()
{
    // we don't need any of the webforms stuff
    $("#__EVENTTARGET","#aspnetForm").parents("div:first").remove();
    $("#__EVENTVALIDATION","#aspnetForm").parents("div:first").remove();
});

Custom controls with ASP.NET MVC Razor

5 Answers5

Linked