Model Binding to Custom Editor Template : The Official Microsoft ASP.NET Forums

Reply

ehcarleton

Member

33 Points

Model Binding to Custom Editor Template

May 03, 2012 09:12 PM|LINK

I am still learning MVC, earlier in the week I asked a question about how to display a collection of objects using a Custom Editor Template. For details on that, which will give insite to this question, please the post:

http://forums.asp.net/t/1798647.aspx/1?Using+a+Custom+Editor+Template

The long and the short of my issue is that this is the code to render the form:

@using(Html.BeginForm("Save", "MDSQuestion")) {
    @Html.HiddenFor(x => x.MdsId)
    @Html.HiddenFor(x => x.SectionId)
    foreach (var p in Model.MDSQuestions) {
        @Html.EditorFor(m => p);
    }
    <input type="submit" value="Save" />
}

Depending on the MDSQuestion type determines which custom editor template is used. Here is one:

@model SportsStore.Domain.Entities.QuestionCode

<div class="item">
    <h3>@Model.Item</h3>
    @Model.ItemDesc<br/>
    @Html.Hidden("index", Model.Item)
    @Html.Hidden(string.Format("[{0}].Item", Model.Item), Model.Item)
    @Html.Hidden(string.Format("[{0}].OldAnswer", Model.Item), Model.CurrentAnswer)
    @Html.DropDownList(string.Format("[{0}].Answer", Model.Item), Model.DisplayAnswers, Model.CurrentAnswer)
</div>

this results in code like this:

<div class="item">
    <h3>B0300</h3>
    Hearing aid<br/>
    <input id="p_index" name="p.index" type="hidden" value="B0300" />
    <input id="p__B0300__Item" name="p.[B0300].Item" type="hidden" value="B0300" />
    <input id="p__B0300__OldAnswer" name="p.[B0300].OldAnswer" type="hidden" value="" />
    <select id="p__B0300__Answer" name="p.[B0300].Answer"><option value="170">(0) No</option>
<option value="171">(1) Yes</option>
<option value="172">(-) Not assessed</option>
<option value="173">(^) Blank (skip pattern)</option>
</select>
</div>

The question is: How do I get the Item/OldAnswer/Answer into the action? Here is the action function:

public class AnsweredQuestions
{
    public string Item { get; set; }
    public string OldAnswer { get; set; }
    public string Answer { get; set; }
}

public ViewResult Save(int mdsId, int sectionId, IList<AnsweredQuestions> answers)

Reply

ignatandrei

All-Star

137716 Points

22159 Posts

Moderator

MVP

Re: Model Binding to Custom Editor Template

May 03, 2012 09:32 PM|LINK

ehcarleton

public ViewResult Save(int mdsId, int sectionId, IList<AnsweredQuestions> answers)

1. Do not put IList, put List ( MVC can not create an interface - neither do you)

2, http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx

My .NET blog : http://msprogrammer.serviciipeweb.ro/ |2012 Programmer tools

Reply

ehcarleton

Member

33 Points

46 Posts

Re: Model Binding to Custom Editor Template

May 04, 2012 02:45 PM|LINK

Well, I tried both List<AnsweredQuestions> and AnsweredQuestions[], in both cases I got a null collection. I also looked at the link you provided and that is the same basic info I have in the book, Pro ASP.Net MVC 3.0 Framework. (Great book, by the way)

A little more on my models, the display model is NOT the same as what the Save action takes. Here is the display model:

public abstract class MDSQuestion
{
    /* snipped lots of properties */
	
    public string CurrentAnswer { get; set; }
    public List<DisplayAnswer> DisplayAnswers { get; set; }
}

public class QuestionChecklist : MDSQuestion
{
}

public class QuestionCode : MDSQuestion
{
}

public class MDSQuestionListViewModel
{
    public int MdsId { get; set; }
    public int SectionId { get; set; }
    public IEnumerable<MDSQuestion> MDSQuestions { get; set; }
    public MDSQuestionPageInfo PagingInfo { get; set; }
}

What is going on here is each question has a collection of answers. Some response types are Codes others CheckList. Rather than using if statements to determine, which to draw, I am using Dynamic Parial views. In the main view, it loops through all the questions and renders them, relying on Html.EditorFor to determine the correct view to display that particular question:

calling foreach (var p in Model.MDSQuestions) { @Html.EditorFor(m => p); }

So the HTML for one question looks like this:

<div class="item">
    <h3>H0100A</h3>
    Appliances: indwelling catheter <br/>
    <input id="p_index" name="p.index" type="hidden" value="H0100A" />
    <input id="p__H0100A__Item" name="p.[H0100A].Item" type="hidden" value="H0100A" />
    <input id="p__H0100A__OldAnswer" name="p.[H0100A].OldAnswer" type="hidden" value="0" />
        <div class="questionCheckbox"><input checked="checked" id="p__H0100A__Answer" name="p.[H0100A].Answer" type="radio" value="0" /> (0) Not checked (No)</div>
        <div class="questionCheckbox"><input id="p__H0100A__Answer" name="p.[H0100A].Answer" type="radio" value="1" /> (1) Checked (Yes)</div>
        <div class="questionCheckbox"><input id="p__H0100A__Answer" name="p.[H0100A].Answer" type="radio" value="-" /> (-) Not assessed</div>

</div>

I had been wondering where the 'p' was coming from in the HTML, I just discovered that it is the 'p' in the foreach.

So going in there are three layers of model:

```
MDSQuestionListViewModel
```
```
MDSQuestion 
```
```
DisplayAnswers 
```

On the acction, I simply want a collection of the answers with a key value to match them backup to save them. I am guessing the 'p' is getting in the way, I simply don't know how to handle it. Any suggestions?

Sam

Reply

francesco ab...

All-Star

20944 Points

3286 Posts

Re: Model Binding to Custom Editor Template

May 04, 2012 03:39 PM|LINK

The problem is not the editor for but:

foreach (var p in Model.MDSQuestions) { @Html.EditorFor(m => p); }

If you read the post Andrei advices you should know you HAVE NEVER use a foreach if you need to bind the resulting list. Your code gives the same names to all item of the list so model binding fail.

The right way is to use a norma for with an index i and then to use:

Html.EditorFor(m => m.MDSQuestions[i])

About m => p......it is strange you don't get an exception because just expressions of the type m => m.prop are allowed in Html helpers. that is expressions that encode access to members of the Model...like (m => m.MDSQuestions[i]

Francesco Abbruzzese http://www.dotnet-programming.com/
Mvc Controls Toolkit | Data Moving Plug-in Videos

Edited by ehcarleton on May 04, 2012 05:29 PM
Edited by ehcarleton on May 04, 2012 06:01 PM

Reply

ehcarleton

Member

33 Points

46 Posts

Re: Model Binding to Custom Editor Template

May 04, 2012 05:29 PM|LINK

Thank you for pointing out the use of foreach. I have fixed that, the HTML is looking better, but it still isn't working. Here is the HTML:

<input id="MDSQuestions_0__Item" name="MDSQuestions[0].Item" type="hidden" value="H0100A" />
<input id="MDSQuestions_0__OldAnswer" name="MDSQuestions[0].OldAnswer" type="hidden" value="0" />
<div class="questionCheckbox"><input checked="checked" id="MDSQuestions_0__Answer" name="MDSQuestions[0].Answer" type="radio" value="0" /> (0) Not checked (No)</div>
<div class="questionCheckbox"><input id="MDSQuestions_0__Answer" name="MDSQuestions[0].Answer" type="radio" value="1" /> (1) Checked (Yes)</div>
<div class="questionCheckbox"><input id="MDSQuestions_0__Answer" name="MDSQuestions[0].Answer" type="radio" value="-" /> (-) Not assessed</div>

I am wondering if the issue is that the original object was MDSQuestion and I want to put it back into a collection of AnsweredQuestions objects. Is that the issue? If so, how to I work around it?

Sam

Reply

ehcarleton

Member

33 Points

46 Posts

Re: Model Binding to Custom Editor Template

May 04, 2012 08:45 PM|LINK

I just tried flipping things around so the view model contains the Answer data, which contains the question data, but that failed. It looks like this:

public class MDSQuestionListViewModel
{
    public int MdsId { get; set; }
    public int SectionId { get; set; }
    public IList<AsmtData> AsmtData { get; set; }
    public MDSQuestionPageInfo PagingInfo { get; set; }
}
//////////////////////////////////////////////
public class AsmtData
{
    public string Item { get; set; }
    public string OldAnswer { get; set; }
    public string CurrentAnswer { get; set; }
    public MDSQuestion MDSQuestion { get; set; }
}

public class AsmtDataChecklist : AsmtData
{
}

public class AsmtDataCode : AsmtData
{
}
//////////////////////////////////////////////
public class MDSQuestion
{
    // all properties cut out
}

public class QuestionChecklist : MDSQuestion
{
}

public class QuestionCode : MDSQuestion
{
}

The view and partial view:

@using(Html.BeginForm("Save", "MDSQuestion")) {
    <input type="submit" value="Save" />
    @Html.HiddenFor(x => x.MdsId)
    @Html.HiddenFor(x => x.SectionId)
    for (var i = 0; i < Model.AsmtData.Count(); i++ )
    {
        @Html.EditorFor(m => m.AsmtData[i]);
    }
    <input type="submit" value="Save" />
}
// --------------------------------

@model Entities.AsmtDataChecklist

<div class="item">
    <h3>@Model.Item</h3>
    @Model.MDSQuestion.ItemDesc <br/>
    @Html.Hidden("Item", Model.Item)
    @Html.Hidden("OldAnswer", Model.CurrentAnswer)
    @foreach (var p in Model.MDSQuestion.DisplayAnswers)
    {
        <div class="questionCheckbox">@Html.RadioButton("CurrentAnswer", p.ItemValue, p.ItemValue == Model.CurrentAnswer) @p.DisplayValue</div>
    }

</div>

// --------------------------------

@model Entities.AsmtDataCode

<div class="item">
    <h3>@Model.Item</h3>
    @Model.MDSQuestion.ItemDesc<br/>
    @Html.Hidden("Item", Model.Item)
    @Html.Hidden("OldAnswer", Model.CurrentAnswer)
    @Html.DropDownList("CurrentAnswer", Model.MDSQuestion.DisplayAnswers, Model.CurrentAnswer)

</div>

The following action still comes up with a NULL collection:

public ViewResult Save(int mdsId, int sectionId, AsmtData[] answers)
{}

/* the HTML code */

<div class="item">
    <h3></h3>
    Appliances: indwelling catheter <br/>
    <input id="AsmtData_0__Item" name="AsmtData[0].Item" type="hidden" value="" />
    <input id="AsmtData_0__OldAnswer" name="AsmtData[0].OldAnswer" type="hidden" value="0" />
        <div class="questionCheckbox"><input checked="checked" id="AsmtData_0__CurrentAnswer" name="AsmtData[0].CurrentAnswer" type="radio" value="0" /> (0) Not checked (No)</div>
        <div class="questionCheckbox"><input id="AsmtData_0__CurrentAnswer" name="AsmtData[0].CurrentAnswer" type="radio" value="1" /> (1) Checked (Yes)</div>
        <div class="questionCheckbox"><input id="AsmtData_0__CurrentAnswer" name="AsmtData[0].CurrentAnswer" type="radio" value="-" /> (-) Not assessed</div>

</div>

Any suggestions on what I am doing wrong?

Edited by ehcarleton on May 04, 2012 08:48 PM

Reply

francesco ab...

All-Star

20944 Points

3286 Posts

Re: Model Binding to Custom Editor Template

May 05, 2012 09:06 AM|LINK

ehcarleton

public ViewResult Save(int mdsId, int sectionId, AsmtData[] answers)

The prefix written in the view now appears to match the prefix expected by the receiving action method...so model binding should work...however there migth be some errors. Have you checked if the ModelState is valid? an exception thrown by the AsmData object during model binding might cause the model binding process to be aborted and the list to be null.

Francesco Abbruzzese http://www.dotnet-programming.com/
Mvc Controls Toolkit | Data Moving Plug-in Videos

Edited by francesco abbruzzese on May 05, 2012 09:06 AM

Reply

ehcarleton

Member

33 Points

46 Posts

Re: Model Binding to Custom Editor Template

May 06, 2012 02:01 AM|LINK

How/where do I go looking for exceptions being thrown during model binding? Trng to track down the error I created my own default model binder and via Debug.WrieLine I do see the list (AsmtData[]) is being created, but I never seeing any AsmtData being created. Oh, here is the AsmtData object:

public class AsmtData
{
    public static AsmtData Create(MDSQuestion question)
    {
        switch (question.FieldType.ToLower())
        {
            case "checklist":
                return new AsmtDataChecklist { MDSQuestion = question };
            case "code":
                return new AsmtDataCode { MDSQuestion = question };
            //case "date":
            //    return new QuestionDate { FieldType = fieldType };
            //case "icd":
            //    return new QuestionICD { FieldType = fieldType };
            //case "number":
            //    return new QuestionNumber { FieldType = fieldType };
        }

        throw new NotImplementedException();
    }

    public string Item { get; set; }
    public string OldAnswer { get; set; }
    public string CurrentAnswer { get; set; }
    public MDSQuestion MDSQuestion { get; set; }
}

public class AsmtDataChecklist : AsmtData
{
}

public class AsmtDataCode : AsmtData
{
}

Reply

francesco ab...

All-Star

20944 Points

3286 Posts

Re: Model Binding to Custom Editor Template

May 06, 2012 07:36 AM|LINK

Exceptions thrown during the modelbindig are automatically recorded in the ModelState as validation errors. Just check Modelstate.IsValid in your controller, and if not debug all entries of the ModelState to discover the error. You can just add a ValidationSummary to your page, so all errors are displayed there.

Francesco Abbruzzese http://www.dotnet-programming.com/
Mvc Controls Toolkit | Data Moving Plug-in Videos

Reply

ehcarleton

Member

33 Points

46 Posts

Re: Model Binding to Custom Editor Template

May 07, 2012 02:43 AM|LINK

Ok, this has me totally stumped. I looked into what you said and if I understand it correctly, the following if statement should be false:

public ViewResult Save(int mdsId, int sectionId, AsmtData[] answers)
{
    if (ModelState.IsValid)
    {
        foreach (var a in answers)
            Debug.WriteLine(string.Format("{0}: {1} ({2})", a.Item, a.CurrentAnswer, a.OldAnswer));
    }

    return DisplayAsmt(mdsId, ref sectionId);
}

But it is true. Just to be save, I added a condition to check to see if answers was not null and placed the @Html.ValidationSummary() on the view, just in case and... I don't seem to get anything different.

I am at a total lost on how to get this to work. I don't have a solution by 9:30am EST time tomorrow, I am going to have to be forced to recommend old fashion ASP.Net for the next phase rather than MVC. This is the VERY last thing I ever wanted to do, but... I am simply out of time. Might anyone have any last minute suggestions on how to get this working? Here is the whole HTML form:

<form action="/MDSQuestion/Save" method="post">    <input type="submit" value="Save" />
<input data-val="true" data-val-number="The field MdsId must be a number." data-val-required="The MdsId field is required." id="MdsId" name="MdsId" type="hidden" value="44941" /><input data-val="true" data-val-number="The field SectionId must be a number." data-val-required="The SectionId field is required." id="SectionId" name="SectionId" type="hidden" value="2" />
<div class="item">
    <h3></h3>
    Comatose<br/>
    <input id="AsmtData_0__Item" name="AsmtData[0].Item" type="hidden" value="" />
    <input id="AsmtData_0__OldAnswer" name="AsmtData[0].OldAnswer" type="hidden" value="0" />
    <select id="AsmtData_0__CurrentAnswer" name="AsmtData[0].CurrentAnswer"><option value="161">(0) No</option>
<option value="162">(1) Yes</option>
<option value="163">(-) Not assessed</option>
</select>

</div>
<div class="item">
    <h3></h3>
    Hearing<br/>
    <input id="AsmtData_1__Item" name="AsmtData[1].Item" type="hidden" value="" />
    <input id="AsmtData_1__OldAnswer" name="AsmtData[1].OldAnswer" type="hidden" value="0" />
    <select id="AsmtData_1__CurrentAnswer" name="AsmtData[1].CurrentAnswer"><option value="164">(0) Adequate-no difficulty in normal conversation, social interaction, listening to TV</option>
<option value="165">(1) Minimal difficulty-difficulty in some environments (e.g., when person speaks softly or setting is noisy)</option>
<option value="166">(2) Moderate difficulty-speaker has to increase volume and speak distinctly</option>
<option value="167">(3) Highly impaired-absence of useful hearing</option>
<option value="168">(-) Not assessed</option>
<option value="169">(^) Blank (skip pattern)</option>
</select>

</div>
<div class="item">
    <h3></h3>
    Hearing aid<br/>
    <input id="AsmtData_2__Item" name="AsmtData[2].Item" type="hidden" value="" />
    <input id="AsmtData_2__OldAnswer" name="AsmtData[2].OldAnswer" type="hidden" value="0" />
    <select id="AsmtData_2__CurrentAnswer" name="AsmtData[2].CurrentAnswer"><option value="170">(0) No</option>
<option value="171">(1) Yes</option>
<option value="172">(-) Not assessed</option>
<option value="173">(^) Blank (skip pattern)</option>
</select>

</div>
<div class="item">
    <h3></h3>
    Speech clarity<br/>
    <input id="AsmtData_3__Item" name="AsmtData[3].Item" type="hidden" value="" />
    <input id="AsmtData_3__OldAnswer" name="AsmtData[3].OldAnswer" type="hidden" value="0" />
    <select id="AsmtData_3__CurrentAnswer" name="AsmtData[3].CurrentAnswer"><option value="174">(0) Clear speech-distinct intelligible words</option>
<option value="175">(1) Unclear speech-slurred or mumbled words</option>
<option value="176">(2) No speech-absence of spoken words</option>
<option value="177">(-) Not assessed</option>
<option value="178">(^) Blank (skip pattern)</option>
</select>

</div>
<div class="item">
    <h3></h3>
    Makes self understood<br/>
    <input id="AsmtData_4__Item" name="AsmtData[4].Item" type="hidden" value="" />
    <input id="AsmtData_4__OldAnswer" name="AsmtData[4].OldAnswer" type="hidden" value="0" />
    <select id="AsmtData_4__CurrentAnswer" name="AsmtData[4].CurrentAnswer"><option value="179">(0) Understood</option>
<option value="180">(1) Usually understood-difficulty communicating some words or finishing thoughts but is able if prompted or given time</option>
<option value="181">(2) Sometimes understood-ability is limited to making concrete requests</option>
<option value="182">(3) Rarely/never understood</option>
<option value="183">(-) Not assessed</option>
<option value="184">(^) Blank (skip pattern)</option>
</select>

</div>
<div class="item">
    <h3></h3>
    Ability to understand others<br/>
    <input id="AsmtData_5__Item" name="AsmtData[5].Item" type="hidden" value="" />
    <input id="AsmtData_5__OldAnswer" name="AsmtData[5].OldAnswer" type="hidden" value="0" />
    <select id="AsmtData_5__CurrentAnswer" name="AsmtData[5].CurrentAnswer"><option value="185">(0) Understands-clear comprehension</option>
<option value="186">(1) Usually understands-misses some part/intent of message but comprehends most conversation</option>
<option value="187">(2) Sometimes understands-responds adequately to simple, direct communication only</option>
<option value="188">(3) Rarely/never understands</option>
<option value="189">(-) Not assessed</option>
<option value="190">(^) Blank (skip pattern)</option>
</select>

</div>
<div class="item">
    <h3></h3>
    Vision<br/>
    <input id="AsmtData_6__Item" name="AsmtData[6].Item" type="hidden" value="" />
    <input id="AsmtData_6__OldAnswer" name="AsmtData[6].OldAnswer" type="hidden" value="0" />
    <select id="AsmtData_6__CurrentAnswer" name="AsmtData[6].CurrentAnswer"><option value="191">(0) Adequate-sees fine detail, such as regular print in newspapers/books</option>
<option value="192">(1) Impaired-sees large print, but not regular print in newspapers/books</option>
<option value="193">(2) Moderately impaired-limited vision; not able to see newspaper headlines but can identify objects</option>
<option value="194">(3) Highly impaired-object identification in question, but eyes appear to follow objects</option>
<option value="195">(4) Severely impaired-no vision or sees only light, colors or shapes; eyes do not appear to follow objects</option>
<option value="196">(-) Not assessed</option>
<option value="197">(^) Blank (skip pattern)</option>
</select>

</div>
<div class="item">
    <h3></h3>
    Corrective lenses<br/>
    <input id="AsmtData_7__Item" name="AsmtData[7].Item" type="hidden" value="" />
    <input id="AsmtData_7__OldAnswer" name="AsmtData[7].OldAnswer" type="hidden" value="1" />
    <select id="AsmtData_7__CurrentAnswer" name="AsmtData[7].CurrentAnswer"><option value="198">(0) No</option>
<option value="199">(1) Yes</option>
<option value="200">(-) Not assessed</option>
<option value="201">(^) Blank (skip pattern)</option>
</select>

</div>    <input type="submit" value="Save" />
</form>

Model Binding to Custom Editor Template RSS

14 replies

ehcarleton

Model Binding to Custom Editor Template

ignatandrei

Re: Model Binding to Custom Editor Template

ehcarleton

ehcarleton

Re: Model Binding to Custom Editor Template

francesco ab...

Re: Model Binding to Custom Editor Template

ehcarleton

Re: Model Binding to Custom Editor Template

ehcarleton

Re: Model Binding to Custom Editor Template

francesco ab...

Re: Model Binding to Custom Editor Template

ehcarleton

ehcarleton

Re: Model Binding to Custom Editor Template

francesco ab...

Re: Model Binding to Custom Editor Template

ehcarleton

Re: Model Binding to Custom Editor Template

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft