126

Suppose I have ViewModel like

public class AnotherViewModel { public string Name { get; set; } } public class MyViewModel { public string Name { get; set; } public AnotherViewModel Child { get; set; } public AnotherViewModel Child2 { get; set; } }

In the view I can render a partial with 

<% Html.RenderPartial("AnotherViewModelControl", Model.Child) %>

In the partial I'll do

<%= Html.TextBox("Name", Model.Name) %> or <%= Html.TextBoxFor(x => x.Name) %>

However, the problem is that both will render name="Name" while I need to have name="Child.Name" in order for model binder to work properly. Or, name="Child2.Name" when I render the second property using the same partial view.

How do I make my partial view automatically recognize the required prefix? I can pass it as a parameter but this is too inconvenient. This is even worse when I want for example to render it recursively. Is there a way to render partial views with a prefix, or, even better, with automatic reconition of the calling lambda expression so that 

<% Html.RenderPartial("AnotherViewModelControl", Model.Child) %>

will automatically add correct "Child." prefix to the generated name/id strings?

I can accept any solution, including 3-rd party view engines and libraries - I actually use Spark View Engine (I "solve" the problem using its macros) and MvcContrib, but did not find a solution there. XForms, InputBuilder, MVC v2 - any tool/insight that provide this functionality will be great.

Currently I think about coding this myself but it seems like a waste of time, I can't believe this trivial stuff is not implemented already.

A lot of manual solutions may exists, and all of them are welcome. For example, I can force my partials to be based off IPartialViewModel<T> { public string Prefix; T Model; }. But I'd rather prefer some existing/approved solution.

UPDATE: there's a similar question with no answer here.

Improve this question

    11 Answers 11

    Reset to default
    113

    You can extend Html helper class by this :

    using System.Web.Mvc.Html public static MvcHtmlString PartialFor<TModel, TProperty>(this HtmlHelper<TModel> helper, System.Linq.Expressions.Expression<Func<TModel, TProperty>> expression, string partialViewName) { string name = ExpressionHelper.GetExpressionText(expression); object model = ModelMetadata.FromLambdaExpression(expression, helper.ViewData).Model; var viewData = new ViewDataDictionary(helper.ViewData) { TemplateInfo = new System.Web.Mvc.TemplateInfo { HtmlFieldPrefix = name } }; return helper.Partial(partialViewName, model, viewData); }

    and simply use it in your views like this :

    <%= Html.PartialFor(model => model.Child, "_AnotherViewModelControl") %>

    and you will see everything is ok!

    Improve this answer
    8
    • 18
      This will be incorrect for nested partial rendering. You need to append the new prefix to the old prefix from helper.ViewData.TemplateInfo.HtmlFieldPrefix in the form of {oldprefix}.{newprefix}
      – Ivan Zlatev
      CommentedMar 1, 2012 at 16:29
    • @Mahmoud Your code works great, but I was finding that the ViewData/ViewBag was empty when it came time to execute code in the Partial. I found that the helper, of type HtmlHelper<TModel> had a new property ViewData, which hid the base model's. With that, I replaced new ViewDataDictionary(helper.ViewData) with new ViewDataDictionary(((HtmlHelper)helper).ViewData). Do you see any problem with that?
      – Pat Newell
      CommentedAug 20, 2012 at 17:20
    • @IvanZlatev Thanks. I will correct the post after testing it.
      – Mahmoud Moravej
      CommentedAug 22, 2012 at 7:25
    • 2
      @IvanZlatev is correct. Before you set the name, you should do string oldPrefix = helper.ViewData.TemplateInfo.HtmlFieldPrefix; if (oldPrefix != "") name = oldPrefix + "." + name;
      – kennethc
      CommentedApr 27, 2014 at 8:14
    • 2
      An easy fix for nested templates is to use HtmlFieldPrefix = helper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(name)
      – Aman Mahajan
      CommentedDec 1, 2015 at 21:20
    102

    so far, i was searching for the same thing I have found this recent post:

    http://davybrion.com/blog/2011/01/prefixing-input-elements-of-partial-views-with-asp-net-mvc/

    <% Html.RenderPartial("AnotherViewModelControl", Model.Child, new ViewDataDictionary { TemplateInfo = new System.Web.Mvc.TemplateInfo { HtmlFieldPrefix = "Child1" } }) %>
    Improve this answer
    8
    • 4
      Thanks for the link, this is by far the best option listed here
      – B Z
      CommentedMar 28, 2011 at 18:45
    • 34
      Super late to this party, but if you do this approach, you should use the ViewDataDictionary constructor that takes the current ViewData, or you'll lose model state errors, validation data, etc.
      – bhamlin
      CommentedApr 6, 2012 at 8:10
    • 10
      building on bhamlin's comment. you can also pass along nested prefix such as (sry this is vb.net ex): Html.RenderPartial("AnotherViewModelControl", Model.PropX, New ViewDataDictionary(ViewData) With {.TemplateInfo = New TemplateInfo() With {.HtmlFieldPrefix = ViewData.TemplateInfo.HtmlFieldPrefix & ".PropX"}})
      – hubson bropa
      CommentedMay 21, 2013 at 18:03
    • 2
      Great answer, +1. Maybe it would be worth editing it to take @bhamlin comment into account
      – ken2k
      CommentedJul 10, 2014 at 9:12
    • 2
      Note that if you need to return this partial from a controller you'll need to set this prefix there too. stackoverflow.com/questions/6617768/…
      – The Muffin Man
      CommentedApr 17, 2015 at 16:03
    12

    My answer, based on the answer of Mahmoud Moravej including the comment of Ivan Zlatev.

     public static MvcHtmlString PartialFor<TModel, TProperty>(this HtmlHelper<TModel> helper, System.Linq.Expressions.Expression<Func<TModel, TProperty>> expression, string partialViewName) { string name = ExpressionHelper.GetExpressionText(expression); object model = ModelMetadata.FromLambdaExpression(expression, helper.ViewData).Model; StringBuilder htmlFieldPrefix = new StringBuilder(); if (helper.ViewData.TemplateInfo.HtmlFieldPrefix != "") { htmlFieldPrefix.Append(helper.ViewData.TemplateInfo.HtmlFieldPrefix); htmlFieldPrefix.Append(name == "" ? "" : "." + name); } else htmlFieldPrefix.Append(name); var viewData = new ViewDataDictionary(helper.ViewData) { TemplateInfo = new System.Web.Mvc.TemplateInfo { HtmlFieldPrefix = htmlFieldPrefix.ToString() } }; return helper.Partial(partialViewName, model, viewData); }

    Edit: The Mohamoud's answer is incorrect for nested partial rendering. You need to append the new prefix to the old prefix, only if it is necessary. This was not clear in the latest answers (:

    Improve this answer
    2
    • 6
      It would be helpful to others if you elaborate on how the above improves upon the existing answer.
      – Leigh
      CommentedSep 7, 2013 at 14:39
    • 2
      After a fat-fingered copy-and-paste error, this one worked perfectly for ASP.NET MVC 5. +1.
      – Greg Burghardt
      CommentedDec 15, 2015 at 21:14
    10

    Using MVC2 you can achieve this.

    Here is the strongly typed view:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcLearner.Models.Person>" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Create </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>Create</h2> <% using (Html.BeginForm()) { %> <%= Html.LabelFor(person => person.Name) %><br /> <%= Html.EditorFor(person => person.Name) %><br /> <%= Html.LabelFor(person => person.Age) %><br /> <%= Html.EditorFor(person => person.Age) %><br /> <% foreach (String FavoriteFoods in Model.FavoriteFoods) { %> <%= Html.LabelFor(food => FavoriteFoods) %><br /> <%= Html.EditorFor(food => FavoriteFoods)%><br /> <% } %> <%= Html.EditorFor(person => person.Birthday, "TwoPart") %> <input type="submit" value="Submit" /> <% } %> </asp:Content>

    Here is the strongly typed view for the child class (which must be stored in a subfolder of the view directory called EditorTemplates):

    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MvcLearner.Models.TwoPart>" %> <%= Html.LabelFor(birthday => birthday.Day) %><br /> <%= Html.EditorFor(birthday => birthday.Day) %><br /> <%= Html.LabelFor(birthday => birthday.Month) %><br /> <%= Html.EditorFor(birthday => birthday.Month) %><br />

    Here is the controller:

    public class PersonController : Controller { // // GET: /Person/ [AcceptVerbs(HttpVerbs.Get)] public ActionResult Index() { return View(); } [AcceptVerbs(HttpVerbs.Get)] public ActionResult Create() { Person person = new Person(); person.FavoriteFoods.Add("Sushi"); return View(person); } [AcceptVerbs(HttpVerbs.Post)] public ActionResult Create(Person person) { return View(person); } }

    Here are the custom classes:

    public class Person { public String Name { get; set; } public Int32 Age { get; set; } public List<String> FavoriteFoods { get; set; } public TwoPart Birthday { get; set; } public Person() { this.FavoriteFoods = new List<String>(); this.Birthday = new TwoPart(); } } public class TwoPart { public Int32 Day { get; set; } public Int32 Month { get; set; } }

    And the output source:

    <form action="/Person/Create" method="post"><label for="Name">Name</label><br /> <input class="text-box single-line" id="Name" name="Name" type="text" value="" /><br /> <label for="Age">Age</label><br /> <input class="text-box single-line" id="Age" name="Age" type="text" value="0" /><br /> <label for="FavoriteFoods">FavoriteFoods</label><br /> <input class="text-box single-line" id="FavoriteFoods" name="FavoriteFoods" type="text" value="Sushi" /><br /> <label for="Birthday_Day">Day</label><br /> <input class="text-box single-line" id="Birthday_Day" name="Birthday.Day" type="text" value="0" /><br /> <label for="Birthday_Month">Month</label><br /> <input class="text-box single-line" id="Birthday_Month" name="Birthday.Month" type="text" value="0" /><br /> <input type="submit" value="Submit" /> </form>

    Now this is complete. Set a breakpoint in the Create Post controller action to verify. Don't use this with lists however because it wont work. See my question on using EditorTemplates with IEnumerable for more on that.

    Improve this answer
    4
    • Yes, it looks like it. The problems are that lists do not work (while nested view models are usually in lists) and that it's v2... which I'm not quite ready to use in production. But still good to know it will be something that I need... when it comes (so +1).
      – queen3
      CommentedSep 28, 2009 at 20:05
    • I also came across this the other day, matthidinger.com/archive/2009/08/15/…, you might want to see if you can figure out how to extend it for editors (though still in MVC2). I spent a few minutes on it, but kept running into problems because I am not up to par with expressions yet. Maybe you can do better than I did.
      – Nick Larsen
      CommentedSep 28, 2009 at 20:11
    • 1
      A useful link, thanks. Not that I think it's possible to make EditorFor work here, because it won't generate [0] indexes I suppose (I'd bet it doesn't support it at all yet). One solution would be to render EditorFor() output to string and manually tweak the output (append required prefixes). A dirty hack, though. Hm! I may do extension method for Html.Helper().UsePrefix() which will just replace name="x" with name="prefix.x"... in MVC v1. Still a bit of work but not that much. And Html.WithPrefix("prefix").RenderPartial() that works in pair.
      – queen3
      CommentedSep 28, 2009 at 20:38
    • +1 for recommending the Html.EditorFor method to render the child form. This is precisely what editor templates are supposed to be used for. This should be the answer.
      – Greg Burghardt
      CommentedSep 21, 2016 at 15:18
    10

    This is an old question, but for anyone arriving here looking for a solution, consider using EditorFor, as suggested in a comment in https://stackoverflow.com/a/29809907/456456. To move from a partial view to an editor template, follow these steps.

    1. Verify that your partial view is bound to ComplexType.

    2. Move your partial view to a subfolder EditorTemplates of the current view folder, or to the folder Shared. Now, it is an editor template.

    3. Change @Html.Partial("_PartialViewName", Model.ComplexType) to @Html.EditorFor(m => m.ComplexType, "_EditorTemplateName"). The editor template is optional if it's the only template for the complex type.

    Html Input elements will automatically be named ComplexType.Fieldname.

    Improve this answer
    0
      9

      PartailFor for asp.net Core 2 in case someone needs it. 

       public static ModelExplorer GetModelExplorer<TModel, TResult>(this IHtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TResult>> expression) { if (expression == null) throw new ArgumentNullException(nameof(expression)); return ExpressionMetadataProvider.FromLambdaExpression(expression, htmlHelper.ViewData, htmlHelper.MetadataProvider); } public static IHtmlContent PartialFor<TModel, TResult>(this IHtmlHelper<TModel> helper, Expression<Func<TModel, TResult>> expression, string partialViewName, string prefix = "") { var modelExplorer = helper.GetModelExplorer(expression); var viewData = new ViewDataDictionary(helper.ViewData); viewData.TemplateInfo.HtmlFieldPrefix += prefix; return helper.Partial(partialViewName, modelExplorer.Model, viewData); }
      Improve this answer
        6

        As stated here: https://stackoverflow.com/a/58943378/3901618 - for ASP.NET Core - you can use the partial tag helper.

        <partial name="AnotherViewModelControl" for="Child" /> <partial name="AnotherViewModelControl" for="Child2" />

        It generates all required name prefixes.

        Improve this answer
        1
        • 1
          Don't use <partial model="Model.blah"... as it will not generate the correct prefix.
          – Jess
          CommentedAug 11, 2022 at 20:05
        3

        I came across this issue also and after much pain i found it was easier to redesign my interfaces such that i didn't need to post back nested model objects. This forced me to change my interface workflows: sure i now require the user to do in two steps what i dreamed of doing on one, but the usability and code maintainability of the new approach is of greater value to me now.

        Hope this helps some.

        Improve this answer
          2

          You could add a helper for the RenderPartial which takes the prefix and pops it in the ViewData. 

           public static void RenderPartial(this HtmlHelper helper,string partialViewName, object model, string prefix) { helper.ViewData["__prefix"] = prefix; helper.RenderPartial(partialViewName, model); }

          Then a further helper which concatenates the ViewData value

           public static void GetName(this HtmlHelper helper, string name) { return string.Concat(helper.ViewData["__prefix"], name); }

          and so in the view ...

          <% Html.RenderPartial("AnotherViewModelControl", Model.Child, "Child.") %>

          in the partial ...

          <%= Html.TextBox(Html.GetName("Name"), Model.Name) %>
          Improve this answer
          2
          • Yes, that's what I described in a comment to stackoverflow.com/questions/1488890/…. An even better solution would be RenderPartial which takes lambda, too, which is easy to implement. Still, thanks for the code, I guess that's the most painless and timeless approach.
            – queen3
            CommentedSep 29, 2009 at 9:33
          • 1
            why not use helper.ViewData.TemplateInfo.HtmlFieldPrefix = prefix? I'm using that in my helper and it seems to be working fine.
            – ajbeaven
            CommentedFeb 28, 2011 at 22:18
          1

          Like you, I add Prefix property (a string) to my ViewModels which I append before my model bound input names. (YAGNI preventing the below)

          A more elegant solution might be a base view model that has this property and some HtmlHelpers that check if the view model derives from this base and if so append the prefix to the input name.

          Hope that helps,

          Dan

          Improve this answer
          2
          • 1
            Hmm, too bad. I can imagine many elegant solutions, with custom HtmlHelpers checking properties, attributes, custom render, etc... But for example if I use MvcContrib FluentHtml, do I rewrite all of them to support my hacks? It's strange that nobody talks about it, as if everybody just uses flat single-level ViewModels...
            – queen3
            CommentedSep 28, 2009 at 19:45
          • Indeed, after using the framework for any length of time and striving for nice clean view code, I think the tiered ViewModel is inevitable. The Basket ViewModel within the Order ViewModel for example.
            – Daniel Elliott
            CommentedSep 28, 2009 at 19:51
          1

          How about just before you call RenderPartial you do

          <% ViewData["Prefix"] = "Child."; %> <% Html.RenderPartial("AnotherViewModelControl", Model.Child) %>

          Then in your partial you have

          <%= Html.TextBox(ViewData["Prefix"] + "Name", Model.Name) %>
          Improve this answer
          2
          • 1
            This is basically the same as passing it manually (it's type safe to derive all view models from IViewModel with "IViewModel SetPrefix(string)" instead), and is very ugly, unless I rewrite all the Html helpers and RenderPartial so that they automatically manage this. The problem is not how to do it, I solved this already; the problem is, can it be done automatically.
            – queen3
            CommentedSep 28, 2009 at 19:54
          • as there is no common place you can put code that will affect all html helpers you would not be able to do this automatically. see other answer...
            – Anthony Johnston
            CommentedSep 29, 2009 at 7:49

          Start asking to get answers

          Find the answer to your question by asking.

          Ask question

          Explore related questions

          See similar questions with these tags.