While creating a Html TextBox or Dropdown list using jQuery, it would define the ID and Name attributes of an Html TextBox or Dropdown list. First, let's us understand what is ID and Name attribute of Html controls. ID attribute of an input html control is responsible for uniquely identified a control on the html page. We use ID for getting an input html control's value using jQuery at client side or for applying some CSS to that control. And Name attribute of an input html control is responsible for posting that control values on server side.

When you will not defined the Name attributes of an Html TextBox or Dropdown list then form will not post the TextBox or Dropdown list values to the server. It means at controller's action result, you will not find the Html TextBox or Dropdown list. Then, you need to select no of customers from drop down list as shown below:

Also, Textboxes for entering customers full name are created by jQuery as shown below:

When you will submit the form you will get the Textboxes created by jQuery at controller side as shown below:

Here's the view code:

    <script src="~/Scripts/jquery-1.8.2.js"></script>
    <script>
    $(document).ready(function () {
    $("#ddl").change(function () {
    var i = $("#ddl :selected").val();
    var str = "";
    for (var j = 1; j <= i; j++) {
    var id = "txtCustomer" + j;
    //Remember to add name attribute to get values at server side
    str = str + "<span>Customer " + j + " Full Name: </span><input type='text' id='" + id + "' name='" + id + "'/><br/>";
    }
    $("#content").html(str);
    });
    });
    </script>
    
    <br />
    @using (Html.BeginForm())
    {
    <h2>Get TextBoxes Values Created by jQuery</h2>
    <span>Select No. of Customers </span>
    <select id="ddl" name="ddl">
    <option>Select</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    </select>
    <br />
    <div id="content">
    </div>
    <br />
    <div align="center">
    <input type="submit" id="btnSave" value="Save" />
    </div>
    }

And you can get the Html TextBox or Dropdown list values created by jQuery by two method: Get Values Using FormCollection and Get Values Using Request.Form.

Method 1: Get Values Using FormCollection

    public ActionResult Index()
    {
    return View();
    }
    
    [HttpPost]
    public ActionResult Index(FormCollection form, string ddl)
    {
    for (int i = 1; i <= Convert.ToInt32(ddl); i++)
    {
    string id = "txtCustomer" + i;
    string customer = form[id];
    }
    return View();
    }

Method 2: Get Values Using Request.Form

  public ActionResult Index()
    {
    return View();
    }
    
    [HttpPost]
    public ActionResult Index(string ddl)
    {
    for (int i = 1; i <= Convert.ToInt32(ddl); i++)
    {
    string id = "txtCustomer" + i;
    string customer = Request.Form[id];
    }
    return View();
    }

Hope you will enjoy this tutorial!

HostForLIFE.eu ASP.NET MVC 5.2 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.