Want to add multiple textbox in mvc4 regor

Question

I have two Model Class

public partial class EndUser
{
    public EndUser()
    {
        this.Mobiles = new List<Mobile>();
    }

       public virtual long Id { get; set; }
       public virtual string FullName { get; set; }

       [DataType(DataType.Password)]
       public virtual string UserPassword { get; set; }
       public virtual string Email { get; set; }
       public virtual IList<Mobile> Mobiles { get; set; }

    public partial class Mobile
    {
       public virtual long Id { get; set; }
       public virtual string Number { get; set; }
       public virtual EndUser EndUser { get; set; }
    }

My controller

    public ActionResult CreateClient()
    {
        return View("CreateClient");
    }

Scaffold Template Create My view

CreateClient

@using (Html.BeginForm())
{
@Html.ValidationSummary(true)

<fieldset>
    <legend>EndUser</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.FullName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.FullName)
        @Html.ValidationMessageFor(model => model.FullName)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.UserPassword)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.UserPassword)
            @Html.ValidationMessageFor(model => model.UserPassword)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

But I want to add my Client Mobile From this view. How can i create multiply(unknown) text field to add mobile numbers? If client have more then one mobile number he can add more textbox by clicking "Add More Number" button. I cant create textbox for mobile number field.

Please help me out. Im new in MVC.

Answer 1

You can resume it in a few steps.

1. Create a view (ie) "DynamicMobileForm" where you will have a foreach Model.Mobiles, it should create a textbox for each item.
2. In the controller, create a Get method to retrieve only this partial DynamicMobileForm view (You can use the same model, should contain at least your Mobiles property loaded)
3. In your ABM form, remove any html regarding mobile, and paste this: @{Html.RenderPartial("DynamicMobileForm", Model);} this will render this section only.
4. Now you just need a way to dynamically increment the amount of editors, this is very easy, create a button, and with jquery perform a call to controller with a POST Method, like DynamicMobileFormAddRow... Inside this method, you only need to Add() a new instance inside your Model.Mobiles list, and return the same model as your GetMethod.

When the page loads, will render your partial section only, adding a new textbox, and when you submit it, will automatically post it inside your Mobiles Array.

Hope it helps.

Answer 2

It's not as easy as you think...

Check this for a quick info. Check this for a complete how-to