در این مقاله نشان می دهیم که چگونه داده ها را با استفاده از جی کوئری، Ajax و JSON در ASP.Net MVC نمایش دهیم.
در ادامه همراه من باشید.مقاله به صورت قدم به قدم بوده به همراه تصاویر هر بخش است، امیدوارم استفاده کنید.
JSON در ASP.Net MVC
visualstudio را باز کرده و یک پروژه جدید ایجاد می کنیم.
شکل زیر، ساختار جدول داده های ماست که می خواهیم آن را نمایش دهیم.
اسکریپت جدول:
CREATE TABLE [dbo].[Emp_Information]( [EMP_ID] [<strong>int</strong>] IDENTITY(1,1)NOTNULL, [<strong>Name</strong>] [<strong>varchar</strong>](50)NULL, [ProjectName] [<strong>varchar</strong>](50)NULL, [ManagerName] [<strong>varchar</strong>](50)NULL, [City] [<strong>varchar</strong>](50)NULL, [Joining_Date] [datetime] NULL, <strong>CONSTRAINT</strong> [PK_Emp_Information] PRIMARYKEYCLUSTERED ( [EMP_ID] <strong>ASC</strong> )<strong>WITH</strong> (PAD_INDEX=<strong>OFF</strong>,STATISTICS_NORECOMPUTE=<strong>OFF</strong>, IGNORE_DUP_KEY=<strong>OFF</strong>,ALLOW_ROW_LOCKS=<strong>ON</strong>,ALLOW_PAGE_LOCKS=<strong>ON</strong>)<strong>ON</strong> [<strong>PRIMARY</strong>] )<strong>ON</strong> [<strong>PRIMARY</strong>] GO SETANSI_PADDINGOFF GO
حالا یک ADO.NET Entity Data Model اضافه می کنیم.
بنابراین روی Solution Explorer پروژه راست کلیک می کنیم، Add را انتخاب کرده و سپس روی New Item کلیک می کنیم.
ADO.Net Entity Data Model را انتخاب می کنیم:
حال روی فولدر Models راست کلیک کرده و سپس Add و New Class را انتخاب می کنیم.
حال یک کنترلر جدید اضافه می کنیم، روی فولدر Controller راست کلیک کرده و Add New Controller را می زنیم.
کد زیر را در کنترلر می نویسیم:
<strong>using</strong> System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ShowListData_jQuery_JSON_MVC.Models;
namespace ShowListData_jQuery_JSON_MVC.Controllers
{
public class EmployeeController: Controller
{
// GET: Employee
public ActionResult Index()
{
<strong>return</strong> View();
}
public JsonResultGetAllEmployee()
{
CompanyDBEntitiesobj = new CompanyDBEntities();
var contacts = obj.Emp_Information.Select(x => <strong>new</strong>
{
Id = x.EMP_ID,
Name = x.Name,
ProjectName = x.ProjectName,
ManagerName = x.ManagerName,
city = x.City
}).ToList();
return Json(contacts, JsonRequestBehavior.AllowGet);
}
}
}
Now my View(Index.cshtml):
@ {
ViewBag.Title = " Showing Data Using jQuery Ajax Call JSON in ASP.NET MVC";
} < h1 >
MVC درJSON وjQuery Ajax call نمایش داده ها با استفاده از < /h1> < div >
<
tableid = "tblEmployee"
<strong>class</strong> = "tblEmployee" >
< thead >
<
img src = "~/Loading.gif"
alt = "Loading"
id = "imgLoading"
<strong>class</strong> = "Load" / >
< /thead> < tbody > < /tbody> < /table> < /div> < script src = "~/Scripts/jquery-1.10.2.min.js" > < /script> < script type = "text/javascript" >
$(document).ready(function()
{
$("#tblEmployeetbodytr").remove();
$.ajax
({
type: 'POST',
url: '@Url.Action("GetAllEmployee")',
dataType: 'json',
data: {},
success: function(data)
{
$("#imgLoading").hide();
var items = '';
var rows = "
<tr>" +
"
<th align='left' class='EmployeeTableTH'>Employee ID</th>
<th align='left' class='EmployeeTableTH'>Name</th>
<th align='left' class='EmployeeTableTH'>Project Name</th>
<th align='left' class='EmployeeTableTH'>Manager Name</th>
<th align='left' class='EmployeeTableTH'>City</th>
" +
"</tr>
";
$('#tblEmployeetbody').append(rows);
$.each(data, function(i, item)
{
var rows = "
<tr>" +
"
<td class='EmployeeTableTD'>" + item.Id + "</td>
" +
"
<td class='EmployeeTableTD'>" + item.Name + "</td>
" +
"
<td class='EmployeeTableTD'>" + item.ProjectName + "</td>
" +
"
<td class='EmployeeTableTD'>" + item.ManagerName + "</td>
" +
"
<td class='EmployeeTableTD'>" + item.city + "</td>
" +
"</tr>
";
$('#tblEmployeetbody').append(rows);
});
},
error: function(ex)
{
var r = jQuery.parseJSON(response.responseText);
alert("Message: " + r.Message);
}
});
return false;
}); < /script> < styletype = "text/css" >
.tblEmployee
{
font - family: verdana, arial, sans - serif;
font - size: ۱۱ px;
color: #۳۳۳۳۳۳;
border-width: ۱px;
border-color: # ۶۶۶۶۶۶;
border - collapse: collapse;
}
.EmployeeTableTH
{
border - width: ۱ px;
padding: ۸ px;
border - style: solid;
border - color: #۶۶۶۶۶۶;
background-color: # dedede;
}
.EmployeeTableTD
{
border - width: ۱ px;
padding: ۸ px;
border - style: solid;
border - color: #۶۶۶۶۶۶;
background-color: # ffffff;
} < /style>
حالا برنامه را اجرا می کنیم:
با سلام و تشکر
لطفا سورس برنامه را بگذارید