Read Controller action using Jquery in ASP.NET MVC and LINQ
In this example I am going to demonstrate that how we can read controller action using jquery and json. Action will return output in json format.here I am using $.getJSON method of jquery.
Step1. Create new Empty MVC Project
Open Visual Studio->New Project->Visual C#->Web->ASP.NET Web application->Give Project Name->Select Empty Template->Check MVC Checkbox->Click OK
Step 2. Now to we will add LINQ to sql classes(dbml) in Models folder .
Right click on Model folder =>select new Item->Select Data tab at left side in opened window->Select LINQ to sql classes in middle.->Give the name of your dbml file(here DataClasses1.dbml)
Step 3. Connect with sql database .We have to create sql database in sql server management studio.I supposed you already created it so I am not telling way to create it.
Open server explorer(Ctrl+alt+s)->Right click on data connection and select add connection->Enter your sql server name->Select Database(my Database name is Ganesha).
(In this process DataClasses1DataContext will be created in models folder)
Create table sql query
CREATE TABLE [dbo].[Employee]( [empid] [int] IDENTITY(1,1) NOT NULL, [empname] [varchar](50) NULL, [empfathername] [varchar](50) NULL, [empsalary] [int] NULL, CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED ( [empid] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY]
I want to perform CRUD on this table.
Step 4. In server explorer window expand newly added(ganesha) database->Drag and drop Employee Table on design serface.+Ctrl S
(It will add employee model in DataClasses1DataContext)
Step 5. Create controller in controller folder-> Select Create Empty controller ->Controller Name(Here ReadJSON)=>OK(This Controller Index action will read JSON controller action of Employee Controller)
Step 6. Create controller in controller folder-> Select Create Empty controller ->Controller Name(Here Employee)=>OK(In this Controller we will write JSON action which will be read by ReadJSON’s Index Action (and Index View)
Step 7: Create Images folder and add ajax_linq_MVC.png.(Download (Search ajaxloader.gif image)it from internet)
Pass namespace using LINQCRUD.Models
Write following code in Employee Controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using LINQCRUD.Models;
namespace LINQCRUD.Controllers
{
public class EmployeeController : Controller
{
DataClasses1DataContext db = new DataClasses1DataContext();
public JsonResult ReadEmployee()
{
var emp = db.Employees.ToList();
return Json(emp, JsonRequestBehavior.AllowGet);
}
}
}
In ReadJSONController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace LINQCRUD.Controllers
{
public class ReadJSONController : Controller
{
//
// GET: /ReadJSON/
public ActionResult Index()
{
return View();
}
}
}
Step 7: Add Empty Index View in above action.
Step8 : Install Jquery.3.0.0.js from NuGet Package Manager.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Read Employee Table using Jquery JSON</title>
<script src="~/Scripts/jquery-3.0.0.js"></script>
<script>
$(document).ready(function () {
//Ajax Start
$(document).ajaxStart(function () {
$("#div1").css("display", "block");
});
$(document).ajaxStop(function () {
$("#div1").css("display", "none");
})
$(document).ajaxComplete(function () {
$("#div1").css("display", "none");
});
//Ajax Complete
$("#btn").click(function () {
$("table tr").remove();
$("table").append("<tr><th>EmpId</th><th>Employee Name</th><th>Employee Father Name</th><th>Employee Salary</th></tr>");
$.getJSON("/Employee/ReadEmployee", function (data) {
$.each(data, function (i, value) {
$("table").append("<tr id=rows><td>" + value.empid + "</td><td>" + value.empname + "</td><td>" + value.empfathername + "</td><td>" + value.empsalary + "</td></tr>");
})
})
})
})
</script>
</head>
<body>
<div>
<input type="button" name="name" id="btn" value="Get Employee" />
<hr />
<table border="1" width="300px">
</table>
<div id="div1" style="display:none">
<img src="../images/ajax_linq_MVC.png" /></div>
</div>
</body>
</html>
