CODEWITHSUNDEEP
c#asp.net-mvc
Abdus Sattar Bhuiyan
Abdus Sattar Bhuiyan

Reputation: 3074

How to write Razor code for List type entity?

My View Model is:

 public class CompanyAccountViewModel
 {
    public string Name { get; set; }
    public float Interval { get; set; }
    public List<string> MobileNo { get; set; }
 }

and My view is:

@model PowerSupply.Models.CompanyAccountViewModel

@{
    ViewBag.Title = "Register";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h3>Register</h3> <br />

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()



    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group row">
        @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "col-sm-2 col-md-1 col-form-label" })
        <div class="col-sm-10 col-md-3">
            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group row">
        @Html.LabelFor(model => model.Interval, htmlAttributes: new { @class = "col-sm-2 col-md-1 col-form-label" })
        <div class="col-sm-10 col-md-3 positioned_relative">
            @Html.EditorFor(model => model.Interval, new { htmlAttributes = new { @class = "form-control" } })
            <span class="help-text">Hour</span>
            @Html.ValidationMessageFor(model => model.Interval, "", new { @class = "text-danger" })
        </div>
    </div>


    <div class="form-group row">
        @Html.LabelFor(model => model.MobileNo, htmlAttributes: new { @class = "col-sm-2 col-md-1 col-form-label" })
        <div class="col-sm-10 col-md-3">
            <span class="add-new-icon glyphicon glyphicon-plus-sign" id="add_mobile"> </span>

            @Html.EditorFor(model => model.MobileNo, new { htmlAttributes = new { @class = "form-control",@id= "add_mobile" } })
            @Html.ValidationMessageFor(model => model.MobileNo, "", new { @class = "text-danger" })

        </div>
    </div>




    <div class="form-group row new_mobile_wrapper">
        <div class="col-md-offset-3">
            <div class="new_mobile_container">
            </div>
        </div>
    </div>

    <div class="form-group row">
        <div class="col-md-offset-2 col-sm-10 col-md-2">
            <input type="submit" value="Register" class="btn btn-primary col-sm-offset-1" />
        </div>
    </div>

}

Here I all field is being rendered properly but:

@Html.EditorFor(model => model.MobileNo, new { htmlAttributes = new { @class = "form-control",@id= "add_mobile" } })

This does not generate any markup. I point out the reason and it due to the Entity Type. Entity Type of MobileNo is List. How to modify this @Html.EditorFor? Any idea? It kills my whole day.

Upvotes: 0

Views: 173

Answers (2)

Tetsuya Yamamoto
Tetsuya Yamamoto

Reputation: 24957

The problem lies in this property:

public List<string> MobileNo { get; set; }

Since a user may have multiple mobile phone numbers, you cannot bind this collection to a single @Html.EditorFor() helper (binding like current state doesn't generate any HTML markup). You need to generate the EditorFor helper for each string value by using a loop:

@for (var i = 0; i < Model.MobileNo.Count; i++)
{
    @Html.EditorFor(m => m.MobileNo[i], new { htmlAttributes = new { @class = "col-sm-2 col-md-1 col-form-label" } })
}

Or use TextBoxFor as alternative, also inside the loop:

@for (var i = 0; i < Model.MobileNo.Count; i++)
{
    @Html.TextBoxFor(m => m.MobileNo[i], new { @class = "col-sm-2 col-md-1 col-form-label" })
}

If you want to create mobile number inputs dynamically from List<string> property, see this article to get started.

Upvotes: 1

Mike
Mike

Reputation: 11

That's probably because your MobileNo list has no data values when CompanyAccountViewModel was returned to the view.

Upvotes: 1

Related Questions