Post
Ask Question

Get The Data From ASP.NET MVC Controller Using JQuery Ajax And Bind It To The Textbox

This blog will demonstrate, how to get the data from ASP.Net MVC controller(s) using JQuery Ajax and bind the retrieved values to the textbox. For that, I have created a controller "JQueryAjaxCallController" with the Get action method "AjaxGetCall" and a class "Employee" as below.

Controller 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. namespace JQueryAjaxCallINMVC.Controllers {  
  7.     public class JQueryAjaxCallController: Controller {  
  8.         //  
  9.         // GET: /JQueryAjaxCall/  
  10.         public ActionResult Index() {  
  11.                 return View();  
  12.             }  
  13.             [HttpGet]  
  14.         public JsonResult AjaxGetCall() {  
  15.             Employee employee = new Employee {  
  16.                 Name = "Gnanavel Sekar",  
  17.                     Designation = "Software Engineer",  
  18.                     Location = "Chennai"  
  19.             };  
  20.             return Json(employee, JsonRequestBehavior.AllowGet);  
  21.         }  
  22.     }  
  23.     public class Employee {  
  24.         public string Name {  
  25.             get;  
  26.             set;  
  27.         }  
  28.         public string Designation {  
  29.             get;  
  30.             set;  
  31.         }  
  32.         public string Location {  
  33.             get;  
  34.             set;  
  35.         }  
  36.     }  
  37. }  
In AjaxGetCall(), I added the dummy record to the employee model to view in browser. 

View

Next step is to add a View for the Controller and while adding it you will need to select the Employee class created earlier.

 

Once you click the Add button, it will create strongly typed view with Employee model. Now we need to create Razor/Html controls to get the user input. Here, I used the HTML controls to bind the retrieved data and we made a jQuery Ajax GET call MVC controller in the below code.
  1. @model JQueryAjaxCallINMVC.Controllers.Employee  
  2. @ {  
  3.     Layout = null;  
  4. } < html > < head > < meta name = "viewport"  
  5. content = "width=device-width" / > < title > Jqurery AJAX Call < /title> < script type = "text/javascript"  
  6. src = "https://code.jquery.com/jquery-1.12.4.js" > < /script> < script type = "text/javascript" > $(function() {  
  7.     $("#btnGet").click(function() {  
  8.         $.ajax({  
  9.             type: "GET",  
  10.             url: "/JQueryAjaxCall/AjaxGetCall",  
  11.             contentType: "application/json; charset=utf-8",  
  12.             dataType: "json",  
  13.             success: function(response) {  
  14.                 if (response != null) {  
  15.                     $('#EmployeeName').val(response.Name);  
  16.                     $('#EmployeeDesignation').val(response.Designation);  
  17.                     $('#EmployeeLocation').val(response.Location);  
  18.                 } else {  
  19.                     alert("Something went wrong");  
  20.                 }  
  21.             },  
  22.             failure: function(response) {  
  23.                 alert(response.responseText);  
  24.             },  
  25.             error: function(response) {  
  26.                 alert(response.responseText);  
  27.             }  
  28.         });  
  29.     });  
  30. }); < /script> < /head> < body > < div style = "margin-left:20px" > JQuery Ajax GET call wtih ASP.NET MVC controller < /div> < br / > < div title = "GetPortion" > < input type = "button"  
  31. id = "btnGet"  
  32. value = "Get Data" / > < input type = "text"  
  33. id = "EmployeeName"  
  34. placeholder = "Name" / > < input type = "text"  
  35. id = "EmployeeDesignation"  
  36. placeholder = "Designation" / > < input type = "text"  
  37. id = "EmployeeLocation"  
  38. placeholder = "Location" / > < /div> < /body> < /html>  
Detailed Description



RouteConfig.cs

You need to set your startup controller and view.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using System.Web.Routing;  
  7. namespace JQueryAjaxCallINMVC {  
  8.     public class RouteConfig {  
  9.         public static void RegisterRoutes(RouteCollection routes) {  
  10.             routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
  11.             routes.MapRoute(name: "Default", url: "{controller}/{action}/{id}", defaults: new {  
  12.                 controller = "JQueryAjaxCall", action = "Index", id = UrlParameter.Optional  
  13.             });  
  14.         }  
  15.     }  
  16. }  
Now run your application

 

Refer to the attached demo project and I hope it's helpful.