How to dynamically generate controls in MVC?

Question

In asp.net, you can use asp:Repeater for dynamically generating controls.

for example:

<asp:Repeater runat="server" id="rpt">
   <ItemTemplate>
       <asp:Textbox runat="server"/>
   </ItemTemplate>
</asp:Repeater>

Then you can get loop through the items on the server side:

foreach(var items in rpt.Items)
{
}

And in MVC, you can do something like this:

@foreach(var item in model)
{
   @Html.TextBoxFor(a=>item.searchCriteria);
}

But there is a problem:

I would like to generate textboxes when ever user clicks add more textbox button:

If I use foreach in MVC, then I won't be able to fetch the user input on the controller, also, I don't have a model to loop through.

And the final desired output will be:

After the user clicks the "Add more textbox" button, a new textbox will be append to the bottom, and after the user clicks the search button, the text inside the textbox will be generated into a query string, something like this:

View:

 <input name="searchCriteria" type="text" class="form-control" />
 <input name="searchCriteria" type="text" class="form-control" />
 <input name="searchCriteria" type="text" class="form-control" />
 <input name="searchCriteria" type="text" class="form-control" />

Controller:

 public ActionResult Search()
        {
            string queryString = Request.RawUrl;
            //parse the querystring here
            return View(NumberOfVisitorsReport);
        }

And the query string generated will be:

www.website.com/?searchCriteria=a&searchCriteria=b&searchCriteria=c

So are there any alternative way to achieve this in MVC?

Edit:

I've took a look at some post on "How to generate controls dynamically in MVC"

For example

Control creation based on model value in MVC4

He is generating controls based on value in database, if I implement this to my website, the controls will lose value on each post back.

You can use JavaScript...that's generally the best approach when you want to make something happen on the client side. — mason, Jan 24 '16 at 04:59

score 2 · Answer 1 · answered Jan 24 '16 at 05:02

You probably want to move away from "postback" and look to adding text boxes dynamically in the browser using jQuery or a similar framework. If you either name the new text boxes carefully or do the submit as an AJAX post of a JSON object, you can harvest all the values from all the added controls.

score 1 · Accepted Answer · answered Jan 24 '16 at 05:41

1

You must use jquery.

This article can help for solve to problem.

Dynamic Form in Asp.net MVC & jquery

answered Jan 24 '16 at 05:41

Demster

124
3
5

score 0 · Answer 3 · answered Jan 24 '16 at 05:03

You are going to have to use For loop insead of ForEach. Then use the index to Create new Textbox controls, this way when you submit the form, index of newly created textbox will be submited, you can even BIND it to a model if the data type of your model is LIST.

Example:

 @for (int i = 0; i < Model.Contributor.Count(); i++)
    {

        @Html.HiddenFor(model => Model.Contributor[i].Id)

  }

now you know the value/index of "i", use that to populate new controls.

How to dynamically generate controls in MVC?

3 Answers3