MENU

Read Strongly Typed Control Values Using jQuery In ASP.NET MVC

Filed Under: , , , on
Sometimes we need to read the strongly typed view control values using jQuery in ASP.NET MVC. As we know Strongly typed view is created from model class . So let's learn step by step how to achieve this task.

Suppose we have following model class
EmpModel.cs 
 public class EmpModel
    {
        public int Id { get; set; }     
        public string Name {get; set; }
        public string City { get; set; }      
        public string Address { get; set; }
    }
Consider we have following Strongly typed view which is generated from preceding model class.
<div class="form-horizontal">
    <hr />
 
    <div class="form-group">
        @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
       
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } })

        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })
   
        </div>
    </div>

    <div class="form-group" id="divSave">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" name="SaveData" id="btnsave" value="Save" class="btn btn-primary" />
        </div>
    </div>
    </div>

If you run above code then by default id and name of the control is the name of model property which is we defined in model class, That is if we defined the property name as city then by default id and name of that control is city. However we can define the id and name of the control as we wish .
 As we know when any code render at browser its final code is pure html . So lets run the above code and see the generated code by using inspect element or view source code then the final html code will be look like as follows

<div class="form-horizontal">  
    <div class="form-group">
        <label class="control-label col-md-2" for="Name">Name</label>
        <div class="col-md-10">
            <input class="form-control text-box single-line" id="Name" name="Name" value="" type="text">

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-md-2" for="City">City</label>
        <div class="col-md-10">
            <input class="form-control text-box single-line" id="City" name="City" value="" type="text">

        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-2" for="Address">Address</label>
        <div class="col-md-10">
            <input class="form-control text-box single-line" id="Address" name="Address" value="" type="text">
        </div>
    </div>

    <div class="form-group" id="divSave">
        <div class="col-md-offset-2 col-md-10">
            <input name="SaveData" id="btnsave" value="Save" class="btn btn-primary" type="submit">
        </div>
    </div>
    
       </div>
</div>
In preceding generated html we can see that id and name of the controls which are enough to identify the controls and read the values with their Id or Name.
Now create the following function to read the controls value .
   $(document).ready(function () {
        //firing function on button click
        $("#btnsave").click(function () {
       
           //Reading the values of controls by id
          var Name=$("#Name").val()
          var city= $("#City").val()
          var Address= $("#Address").val()
          alert(Name+" "+city+" "+Address)
         
        });
  });
Now if you click on save button then it will shows the textbox values on alert box as shown in the following screen shot.
compilemode.com example of reading strongly typed control values

I hope from preceding example , We have learned how to read strongly typed control values using jQuery in ASP.NET MVC.
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 . Now You need to be add reference of downloaded jQuery library reference as like below. 
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
Summary

 I hope this article is useful for all readers, If you have a suggestion related to this article then please contact me.

Post a Comment

www.CodeNirvana.in

Protected by Copyscape
Copyright © Compilemode