CODEWITHSUNDEEP
asp.net-mvc-4c#-4.0
hakan
hakan

Reputation: 3534

Templates for custom classes

It is a very common problem but I got stuck it!

I have a model class and I want to edit it in a view :

public class FormFillModel
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }

    public string Sector { get; set; }
    public List<FormFieldModel> Fields { get; set; }
}

I can edit string properties but I can not edit Fields property.

I created a editor template for it. under ~/shared/editortemplates/FormFieldsListModel.cshtml

@model List&lt;SoruCevapForm.Models.FormFieldModel&gt;

@foreach (var field in Model)
{
<div class="editor-label">
    @Html.Label(field.Text)
</div>
<div class="editor-field">
    @Html.TextBoxFor(model => field.Val)
</div>
<br />
}

and finally...

<h2>FillForm</h2>
@using (Html.BeginForm())
{
    <fieldset>
        <legend>@Model.Title</legend>
        @Html.HiddenFor(model => model.Id)
        <table>
            <tr>
                <td>
                    <div class="display-label">
                        @Html.DisplayNameFor(model => model.Title)
                    </div>
                </td>
                <td>
                    <div class="display-field">
                        @Html.DisplayFor(model => model.Title)
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="display-label">
                        @Html.DisplayNameFor(model => model.Sector)
                    </div>
                </td>
                <td>
                    <div class="display-field">
                        @Html.DisplayFor(model => model.Sector)
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="display-label">
                        @Html.DisplayNameFor(model => model.Description)
                    </div>
                </td>
                <td>
                    <div class="display-field">
                        @Html.DisplayFor(model => model.Description)
                    </div>
                </td>
            </tr>
        </table>
    </fieldset>

    <fieldset>
        <legend>Fields</legend>

        @Html.EditorFor( model => model.FieldsList.Fields, "FormFieldsListModel")

        <p>
            <input type="submit" value="Submit" />
        </p>
    </fieldset>

}

but when I post...

    [HttpPost]
    public ActionResult FillForm(int id, FormFillModel model)
    {
        return RedirectToAction("UserPage");
    }

model.Fields property is empty.

EDIT: Result Html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>FillForm</title>
    <link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.5.3.js"></script>

</head>
<body>
    <br />
    <a href="/Account/Logout">Logout</a>
    <br />


<h2>FillForm</h2>
<form action="/FormManage/FillForm/1" method="post">    <fieldset>
        <legend>TestForm2</legend>
        <input data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="Id" name="Id" type="hidden" value="1" />
        <table>
            <tr>
                <td>
                    <div class="display-label">
                        Title
                    </div>
                </td>
                <td>
                    <div class="display-field">
                        TestForm2
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="display-label">
                        Sector
                    </div>
                </td>
                <td>
                    <div class="display-field">

                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="display-label">
                        Description
                    </div>
                </td>
                <td>
                    <div class="display-field">
                        TestForm Description
                    </div>
                </td>
            </tr>
        </table>
    </fieldset>
    <fieldset>
        <legend>Fields</legend>

        <div class="editor-label">
    <label for="FieldsList_Fields__0__Name">Name</label>
</div>
<div class="editor-field">
    <input id="FieldsList_Fields__0__Val" name="FieldsList.Fields.[0].Val" type="text" value="" />
</div>
<br /><div class="editor-label">
    <label for="FieldsList_Fields__1__Surname">Surname</label>
</div>
<div class="editor-field">
    <input id="FieldsList_Fields__1__Val" name="FieldsList.Fields.[1].Val" type="text" value="" />
</div>
<br /><div class="editor-label">
    <label for="FieldsList_Fields__2__Address">Address</label>
</div>
<div class="editor-field">
    <input id="FieldsList_Fields__2__Val" name="FieldsList.Fields.[2].Val" type="text" value="" />
</div>
<br />

        <p>
            <input type="submit" value="Submit" />
        </p>
    </fieldset>
</form>
<p>
    <a href="/FormManage/UserPage">Back</a>
</p>


    <script src="/Scripts/jquery-1.7.1.js"></script>


</body>
</html>

What should I do?

Upvotes: 0

Views: 181

Answers (1)

Jan
Jan

Reputation: 16042

Try using an indexed access in your editortemplate while iterating your list:

@for (int i=0; i<Model.Count(); i++)
{
    <div class="editor-field">
        @Html.TextBoxFor(model => Model[i].Val)
    </div>
}

That will render names with an index for the input fields like Fields[0].Val and Fields[1].Val which is required for the modelbinder to bind the values to a list property.

EDIT I found an inconsistency in your view/model:

your model has a property calld Fields. But in your view you wrote model.FieldsList.Fields`: 

@Html.EditorFor( model => model.FieldsList.Fields, "FormFieldsListModel")

How is this possible? Whats the exact viewmodel of your view? That additional FieldsList renders the wrong fieldnames and so it can't bind to the Fields property of your model on post back.

Upvotes: 1

Related Questions