MENU

How To Read TextBox Values Using jQuery In ASP.NET MVC

Filed Under: , , , on
In this article we will learn how to read Text Box values using jQuery In MVC .Consider the following is the Razor View in MVC Named Employee.cshtml having following controls.
<div class="form-horizontal">
        <div class="editor-label">
            Name
        </div>
        <div class="editor-label">
            <input type="text" id="txtName" />
        </div>

        <div class="editor-label">
            Address
        </div>
        <div class="editor-label">
            <input type="text" id="txtAddress" />
        </div>

        <div class="editor-label">
            City
        </div>
        <div class="editor-label">
            <input type="text" id="txtcity" />
        </div>
        <div class="editor-label">
            <br />
            <input class="btn-default" type="button" id="btnSave" value="Save" />
        </div>
    </div>
To read the Text Box values using jQuery ,use the following syntax.
//Reading text box values using Jquery 
$("#txtName").val(),
$("#txtAddress").val(),
$("#txtcity").val()
The whole function will be look like as follows
$(document).ready(function () {
        $("#btnSave").click(function () {
            $.ajax(
            {
                type: "POST", //HTTP POST Method
                url: "Home/AddEmployee", // Controller/View 
                data: { //Passing data
                    Name: $("#txtName").val(), //Reading text box values using Jquery 
                    City: $("#txtAddress").val(),
                    Address: $("#txtcity").val()
                }

            });

        });
    });
Note
  • To work with jQuery we need to reference of jQuery library .You can use following CDN jQuery library from any provider such as Microsoft,Google or jQuery .
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
To use above jQuery library you need an active internet connection , You can download and use it as offline jQuery library as wel.You need to be add reference as below.
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
 From above preceding example we learned how to read text box values using jquery.
Refer following articles to learn about ASP.NET MVC
for more MVC article ,please refer www.compilemode.com , MVC section using following link.
Summary
I hope this article is useful for all readers, if you have a suggestion then please contact me.

Post a Comment

www.CodeNirvana.in

Protected by Copyscape
Copyright © Compilemode