نمایش داده ها با استفاده از جی کوئری، Ajax و JSON در ASP.Net MVC

در این مقاله نشان می دهیم که چگونه داده ها را با استفاده از جی کوئری، Ajax و JSON در ASP.Net MVC نمایش دهیم.

در ادامه همراه من باشید.مقاله به صورت قدم به قدم بوده به همراه تصاویر هر بخش است، امیدوارم استفاده کنید.

JSON در ASP.Net MVC

visualstudio را باز کرده و یک پروژه جدید ایجاد می کنیم.

ajax

 ASP.Net MVC

شکل زیر، ساختار جدول داده های ماست که می خواهیم آن را نمایش دهیم.

Json

اسکریپت جدول:


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 کلیک می کنیم.

 آموزش MVC

ADO.Net Entity Data Model را انتخاب می کنیم:

 چگونه با json اطلاعات را بخوانیم

 استفاده از json در ASP.Net MVC

 آموزش MVC

 چگونه با json اطلاعات را بخوانیم

 استفاده از json در ASP.Net MVC

 JSON در ASP.Net MVC

حال روی فولدر Models راست کلیک کرده و سپس Add و New Class را انتخاب می کنیم.

ASP.Net MVC

حال یک کنترلر جدید اضافه می کنیم، روی فولدر Controller راست کلیک کرده و Add New Controller را می زنیم.

آموزش ASP.Net MVC

JSON در ASP.Net MVC

کد زیر را در کنترلر می نویسیم:

آموزش MVC

<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>

حالا برنامه را اجرا می کنیم:

JSON در ASP.Net MVC

JSON در ASP.Net MVC

  • پسورد: www.mspsoft.com
فاطمه زکایی

فاطمه زکایی هستم. فارغ التحصیل کارشناسی مهندسی نرم افزار، مدت سه سال هست که در زمینه توسعه اپلیکیشن های تحت وب و اندروید و همچنین تولید محتوای تخصصی برنامه نویسی تحت وب و اندروید در مجموعه mspsoft در خدمت شما هستم.

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

    hamidrezasheikhi95 پاسخ

    با سلام و تشکر
    لطفا سورس برنامه را بگذارید