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

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 Online Copyright Protection
Copyright © Compile Mode