Background
Many times there is a need to work with JSON (JavaScript object Notation) in ASP.NET MVC with the help of jQuery Ajax call. So let's start step by step, so it will be useful to understand from scratch.
Step 1 : Create MVC application
Many times there is a need to work with JSON (JavaScript object Notation) in ASP.NET MVC with the help of jQuery Ajax call. So let's start step by step, so it will be useful to understand from scratch.
Step 1 : Create MVC application
- "Start", then "All Programs" and select "Microsoft Visual Studio 2015".
- "File", then "New" and click "Project", then select "ASP.NET Web Application Template" and provide the Project a name as you wish and click on OK.
- Choose MVC empty application option and click OK
Right click on Model folder in the created MVC application, give the class name Employee or as you wish and click on OK.
Employee.cs
- public class Employee
- {
- public int Id { get; set; }
- public string Name { get; set; }
- public string City { get; set; }
- public string Address { get; set; }
- }
Right click on Controller folder in the created MVC application, give the class name Home or as you wish and click OK.
HomeController.cs
- public class HomeController: Controller
- {
- // GET: Home
- public ActionResult Index()
- {
- return View();
- }
- [HttpGet]
- public JsonResult EmpDetails()
- {
- //Creating List
- List < Employee > ObjEmp = new List < Employee > ()
- {
- //Adding records to list
- new Employee
- {
- Id = 1, Name = "Vithal Wadje", City = "Latur", Address = "Kabansangvi"
- },
- new Employee
- {
- Id = 2, Name = "Sudhir Wadje", City = "Mumbai", Address = "Kurla"
- }
- };
- //return list as Json
- return Json(ObjEmp, JsonRequestBehavior.AllowGet);
- }
- }
Chintan GoswamiPosted Aug 8, 2018, 7:56 AM
Public ActionResult EditState(int id) { StateModel sm = new StateModel(); var state = sm.EditState(id); if (state != null) { return Json(state, JsonRequestBehavior.AllowGet); } else { return null; } //return View(); }
Jayendra MistryPosted Apr 9, 2017, 1:51 PM
Plz help Me to diaply JSONResult Data in HTML Table
Jayendra MistryPosted Apr 9, 2017, 1:49 PM
I can't get output only display Json result data but can't display in HTML Table
Vithal WadjePosted Nov 30, 2015, 1:34 AM
Thanks
Santhakumar MunuswamyPosted Nov 29, 2015, 11:52 PM
Good one
Vithal WadjePosted Nov 29, 2015, 10:35 PM
Thanks Banketeshvar Narayan sir
Vithal WadjePosted Nov 29, 2015, 10:35 PM
Thanks Harshad Pansuriya sir
Banketeshvar NarayanPosted Nov 28, 2015, 3:18 AM
Good One
Harshad PansuriyaPosted Nov 27, 2015, 11:08 PM
Nice one
Vithal WadjePosted Nov 27, 2015, 3:53 PM
ace mary can you explain exact problem
Vithal WadjePosted Nov 27, 2015, 3:50 PM
thanks Aqib sir
Muhammad Aqib ShehzadPosted Nov 27, 2015, 5:11 AM
good one
Ace MaryPosted Nov 27, 2015, 2:43 AM
Just starting out with Kendo and JSON and not having much luck in binding a grid to a json datasource. Here's my data, stored as a file called 'data.json' stored in the same directory as the page:{ “firstName”: “John”, “lastName”:”Smith”, “department”:”Human Resources” } and my page: <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Kendo1.aspx.vb" Inherits="KendoUI.Kendo1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="Styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> <link href="Styles/kendo.default.min.css" rel="stylesheet" type="text/css" /> <!--Then paste the following for Kendo UI Web scripts--> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/kendo.web.min.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <script type="text/javascript"> $(document).ready(function () { var ds = new kendo.data.DataSource({ transport: { read: { url: "data.JSON", dataType: "json" } } }); $("#grid").kendoGrid({ dataSource: ds, columns: [ { field: "firstName", title: "First Name" }, { field: "lastName", title: "Last Name" }] }); }); </script> <div> <input id="myAutoComplete" /> </div> <!-- Define the HTML div that will hold the Grid --> <div id="grid" style="width: 40%; margin: auto;"> </div> </form> </body> </html> http://goo.gl/8aE6LK | http://goo.gl/LYLHhG