Get the Value of Textboxes By Using jQuery in Web API

Introduction

This article explains how to get the value of Textboxes using jQuery in the Web API. The value of Textboxes depend on the Id attribute. We select the Id attribute and the TextBox gets the value according to the Id attribute. For exanple: if we use an Id attribute value of 2 then two Textboxes are displayed and every TextBox takes the value. Here we declare two attributes in HTML controls that are "Id" and "Name" attributes. Let's understand these two attributes.

ID: Id works as an input attribute in the HTML control. We use it for getting the value of a HTML control used by jQuery on the client-side.

Name: We use the "name" attribute that is the posted value of the HTML control on the server-side.

Here we use jQuery to create the Textboxes and Dropdown list. The dropdown list for selecting the Id defined in the Dropdown list and Name defines the TextBox.

Now the following is the procedure for creating this application.

Step 1

First we create the Web API application as in the following:

• Start Visual Studio 2012.
• From the Start window select "New Project".
• From the new project window select "Installed" -> "Visual C#" -> "Web".
• Select "ASP.NET MVC4 Web Application" and click the "OK" button.

• From the "MVC4 Project" window select "Web API".

• Click the "OK" button.

Step 2

Now write the some code in the controller file "HomeController". This file exists in:

• In the "Solution Explorer".
• Expand the Controller Folder.
• Select the "HomeController" file.

Add this code in this file:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace ApiTexebox.Controllers

{

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            return View();

        }

        [HttpPost]

        public ActionResult Index(String tx)

        {

            for (int a=1;a<=Convert.ToInt32(tx); a++)

            {

                string emp_id ="txtEmployee" +a;

                string employee = Request.Form[emp_id];

            }

            return View();

        }

    }

}

 

Step 3

Now write some code in the "index.cshtml" file. This file exists:

• In the "Solution Explorer".

• Expand the Home folder.

• Select the "Index.cshtml" file.

Add the following code:

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

    <script>

        $(document).ready(function () {

            $("#tx").change(function () {

                var a = $("#tx :selected").val();

                var srtg = "";

                for (var i = 1; i <= a; i++) {

                    var emp_id = "txtEmployee" + i;

                    //Remember to add name attribute to get values at server side

                    srtg = srtg + "<span>Employee " + i + " Full Name: </span><input type='text' id='" +emp_id + "' name='" +emp_id + "'/><br/>";

                }

                $("#content").html(srtg);

            });

        });

    </script>

    

    <br />

    @using (Html.BeginForm())

    {

    <h2>Get the Value of Textboxes by using the jQuery</h2>

    <span>Select No. of Employee</span>

    <select id="tx" name="tx">

    <option>Select</option>

    <option>1</option>

    <option>2</option>

    <option>3</option>

    <option>4</option>

  <option>5</option>

    </select>

    <br />

    <div id="content">

    </div>

    <br />

    <div align="center">

    <input type="submit" id="btnSave" value="Save" />

    </div>

    }

Step4

Execute the application; press "F5".The output will be like this:

Select the number of employees from the DropDown list. Here we select 1.

 

Here we select 5 for  the number of the Employees:

Now insert the all Employees Name: