How to get textboxes values created by jQuery in MVC4

Description:-

There was a problem that I was faced when I was trying to get the values of TextBoxes created by jQuery. I was  to get the value of each Textbox created by jQuery by using the Id attribute of the TextBox, but I was getting NULL value. so behind this reason and finally I got the solution. Let's understand the ID and Name attribute of Html controls.

So in this example we explain that how to find TextBox values in controller action Method and inserted into the database created by Jquery.

1.                 ID

Id attribute of an input html control are used to uniquely identified a control on the html page. We use Id for getting an input html control's value using jQuery at client side.

2.                 Name

Name attribute of an input html control are used for posting that control values on server side like TextBox.

Hence, while creating a Html TextBox or Dropdown list using jQuery also defined the Id and Name attributes of an Html TextBox or Dropdown list.

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

how to create or generate thumbnails of the image create thumbnails of the image in asp.net

sorting data in gridview with up and down arrow sorting data with up and down arrow in gridview

Ajax Autocomplete Textbox search example autocomplete textbox search in asp.net

to use this example first you have to create a controller and then create a view for the Index and then put the below code in controller and view page are defined below.



Index.cshtml:-

<script src="~/Scripts/jquery-ui-1.8.20.js"></script>

<script src="~/Scripts/jquery-ui-1.8.20.min.js"></script>

<script src="~/Scripts/jquery-1.7.1.js"></script>

<script src="~/Scripts/jquery-1.7.1.min.js"></script>

<script>

    $(document).ready(function () {

        alert("hi");

        $("#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>

}

gevaluecontroller:-

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace MvcApplication1.Controllers

{

    public class getvalueController : Controller

    {

        //

        // GET: /getvalue/

        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();

        }

      

    }

}

This entry was posted in : MVC