Question

In my page there is one textbox by default and one add button beside it. I need to add the another textbox when user click Add button. And there should be two buttons Add and Remove beside newly added text box. And same process goes on i.e., user can add Textbox using Add button and remove it using remove button.

I am new to mvc 3 so i am confused how to proceed. Is there any way like placeholder in asp.net so that we can add control at runtime.

Any suggestion and idea will be helpful to me

Answer 1

MVC is a very “hands-off” framework compared to Web Forms, so you’re free to add the new textboxes how you like. Note that “controls” don’t exist in MVC.

Here’s how I’d do it:

Model:

class MyModel {
    public Boolean AddNewTextBox { get; set; }
    public List<String> MultipleTextBoxes { get; set; } // this stores the values of the textboxes.
}

View (I prefer the Web Forms view engine, I’m not a fan of Razor):

<% for(int i=0;i<Model.MultipleTextBoxes.Count;i++) { %>
<%= Html.TextBoxFor( m => m.MultipleTextBoxes[i] ) /* this might look like magic to you... */ %>
<% } %>
<button type="submit" name="AddNewTextbox" value="true">Add New Textbox</button>
<button type="submit">Submit form</button>

Controller:

[HttpPost]
public ActionResult MyAction(MyModel model) {
    if( model.AddNewTextBox ) model.MultipleTextBoxes.Add("Yet another");

    else if( ModelState.IsValid ) {
        // your regular processing
    }
}

You can also add more textboxes with Javascript and it work perfectly fine. All that matters is the HTML input elements. There’s no cryptic viewstate. MVC is stateless.

Note that because I used <button type="submit"> my example will not work reliably in Internet Explorer 6-8 (sucks, I know), but you can replace them with <input type="submit"> with no ill-effects.