Ajax與MVC結合
阿新 • • 發佈：2022-04-02
AJAX 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術，是一種在不重新整理頁面的前提下實現前端和後端互動的技術。
在前面的JavaScript和Jquery課程中也有介紹過Ajax技術的應用。
一、Ajax輔助方法
AJax輔助方法：
- 可以用於建立表單和指向控制器操作方法的連結，但不同的是，它們與伺服器採用的是Ajax（非同步互動）方式.
- 當使用Ajax輔助方法時，無須編寫任何指令碼程式碼即可實現程式的非同步性。
- 使用Ajax輔助方法必須先引入jQuery.unobtrusive-ajax.js，此檔案預設包含在ASP.NET MVC應用程式模板中。
（1）Ajax.ActionLink
Ajax.ActionLink方法:
- 可以建立一個具有非同步行為的超連結。
- ActionLink方法的第一個引數是超連結的文字，第二個引數是操作方法的名稱。
- ActionLink方法可以通過設定AjaxOptions物件的屬性值來調整Ajax請求的行為
AjaxOptions屬性和作用：
| 屬性 | 作用 |
|---|---|
| Confirm | 獲取或設定提交請求之前，顯示於確認視窗中的訊息。 |
| HttpMethod | 獲取或設定 HTTP 請求方法（“GET”或“POST”）。 |
| InsertionMode | 獲取或設定指定如何將響應結果插入到目標 DOM 元素的模式。 |
| LoadingElementId | 獲取或設定載入時要顯示的 HTML 元素的 id 屬性值。 |
| OnBegin | 獲取或設定更新頁面之前呼叫的 JavaScript 函式的名稱。 |
| OnComplete | 獲取或設定資料響應之後，更新頁面之前，呼叫的 JavaScript 函式。 |
| OnFailure | 獲取或設定頁面更新失敗時呼叫的 JavaScript 函式。 |
| OnSuccess | 獲取或設定頁面更新成功之後呼叫的 JavaScript 函式。 |
| UpdateTargetId | 獲取或設定要使用伺服器響應來更新的 DOM 元素的 ID。 |
| Url | 獲取或設定要向其傳送請求的 URL。 |
案例一：
使用Ajax.ActionLink實現超級連結，並且點選超級連結之後非同步顯示動態Action內容
超級連結所在Action：
public ActionResult Demo01()
{
return View();
}
超級連結所在的View：
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Demo01</title>
<script src="~/Script/Jquery/jquery-1.7.1.js"></script>
<script src="~/Script/Jquery/jquery.unobtrusive-ajax.js"></script>
</head>
<body>
<h1>
@*在訪問控制器方法的時候如果需要傳遞引數，可以在AjaxOptions中重新設定訪問url*@
@Ajax.ActionLink("顯示名單", "Demo01PartialView", new AjaxOptions { UpdateTargetId = "div1", InsertionMode = InsertionMode.Replace, HttpMethod = "Get" })
</h1>
<div id="div1">
</div>
</body>
</html>
動態內容的Action：
public ActionResult Demo01PartialView()
{
ViewBag.Items = new string[] { "Jimmy", "Susan", "Tomas", "Helen", "Jessica" };
return View();
}
動態內容的View（沒有html,head,body等html結構程式碼）：
<div style="font:bold 20px; color:blue;">
<ul>
@foreach (var item in ViewBag.Items)
{
<li>@item</li>
}
</ul>
</div>
案例二：
使用Ajax.ActionLink實現超級連結，並且點選超級連結之後非同步顯示當前日期
超級連結所在Action：
public ActionResult Demo02()
{
return View();
}
超級連結所在的View：
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Demo02</title>
<script src="~/Script/Jquery/jquery-1.7.1.js"></script>
<script src="~/Script/Jquery/jquery.unobtrusive-ajax.js"></script>
</head>
<body>
<h1>
@Ajax.ActionLink("獲取當前日期", "Demo02GetDate", new AjaxOptions { UpdateTargetId = "div1", InsertionMode=InsertionMode.Replace, HttpMethod="Post" })
</h1>
<div id="div1">
</div>
</body>
</html>
動態內容的Action：
public ActionResult Demo02GetDate()
{
string time = DateTime.Now.ToString("yyyy年MM月dd日");
return Content(time, "text/html");
}
（2）Ajax.BeginForm
案例一：
使用Ajax.BeginForm實現使用者登入表單
登入相關Action：
public ActionResult Demo03()
{
return View();
}
[HttpPost]
public ActionResult Demo03(string txtAccount,string txtPwd)
{
string acc = txtAccount;
string pwd = txtPwd;
if (acc.Equals("") || pwd.Equals(""))
{
return Content("使用者名稱或密碼不能為空", "text/html");
}
if (acc.Equals("admin") && pwd.Equals("admin"))
{
return Content("<script>window.location.href='Demo03WelCome';</script>", "text/html");
}
else
{
return Content("使用者名稱或密碼錯誤", "text/html");
}
}
登入頁面View：
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Demo03</title>
<script src="~/Script/Jquery/jquery-1.7.1.js"></script>
<script src="~/Script/Jquery/jquery.unobtrusive-ajax.js"></script>
<style type="text/css">
div, table, tr, td {margin: 0px;padding: 0px;}
.myTable {width: 800px;margin: 20px auto;border-collapse: collapse;}
.myTable td {height: 30px;line-height: 30px;padding: 6px;}
</style>
</head>
<body>
@*@using (Ajax.BeginForm("Demo03Login", "Home", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "post",
UpdateTargetId = "ErrInfo"
}))*@
@using (Ajax.BeginForm(new AjaxOptions
{
//InsertionMode = InsertionMode.Replace,
HttpMethod = "post",
UpdateTargetId = "ErrInfo"
}))
{
<div style="text-align:center;">
<table width="800" class="myTable" border="1">
<tr>
<td colspan="2" align="center" style="font-weight:bold;">使用者登入</td>
</tr>
<tr>
<td width="200" align="right">使用者名稱：</td>
<td width="600" align="left"><input type="text" name="txtAccount" /></td>
</tr>
<tr>
<td width="200" align="right">密碼：</td>
<td width="600" align="left"><input type="password" name="txtPwd" /></td>
</tr>
<tr>
<td width="200" align="right"></td>
<td width="600" align="left">
<input type="submit" value="登入" />
<span id="ErrInfo"></span>
</td>
</tr>
</table>
</div>
}
</body>
</html>
登入成功之後的Action和VIew：
public ActionResult Demo03WelCome()
{
return View();
}
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Demo03WelCome</title>
</head>
<body>
<div>
<h1>歡迎來到*****系統</h1>
</div>
</body>
</html>
案例二：
使用Ajax.BeginForm實現員工查詢功能
資料表（將資料表生成EF框架內容）：
create table Dept
(
DeptId int primary key identity(1,1),
DeptName varchar(50) not null
)
create table Employee
(
EmpId int primary key identity(1,1),
DeptId int not null,
EmpName varchar(50) not null,
EmpPhone varchar(50) not null,
EmpArea varchar(50) not null,
EmpSalary decimal(18,2) not null
)
insert into Dept(DeptName) values('開發部')
insert into Dept(DeptName) values('測試部')
insert into Dept(DeptName) values('實施部')
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(1,'劉德華','13887855552','武漢',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(2,'張學友','13556528634','深圳',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(3,'劉亦菲','13448494546','廣州',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(1,'周杰倫','13888666855','北京',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(2,'許巍','13868654219','上海',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(3,'孫燕姿','13895133572','成都',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(1,'朴樹','13458788896','武漢',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(2,'周潤發','13554588745','南京',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(3,'李連杰','13998759654','上海',6500)
select * from Dept
select * from Employee
Action：
public ActionResult Demo04()
{
return View();
}
[HttpPost]
public ActionResult Demo04PartialView()
{
DBTESTEntities db = new DBTESTEntities();
var listEmp = from emp in db.Employee select emp;
if (!string.IsNullOrEmpty(Request["txtName"]))
{
string empName = Request["txtName"].ToString();
listEmp = listEmp.Where(p => p.EmpName.Contains(empName));
}
ViewBag.listEmp = listEmp;
return View();
}
View：
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Demo04</title>
<script src="~/Script/Jquery/jquery-1.7.1.js"></script>
<script src="~/Script/Jquery/jquery.unobtrusive-ajax.js"></script>
<script type="text/javascript">
function searchFail()
{
$("#ajaxResult").html("查詢出錯！");
}
</script>
</head>
<body>
<div>
@using (Ajax.BeginForm("Demo04PartialView", "Home", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "post",
OnFailure = "searchFail",
LoadingElementId = "ajaxLoading",
UpdateTargetId = "ajaxResult"
}))
{
<input type="text" name="txtName" />
<input type="submit" value="搜 索" />
<img id="ajaxLoading" src="~/Img/ajax-loader.gif" style="display:none;" />
}
</div>
<div id="ajaxResult">
</div>
</body>
</html>
<style type="text/css">
div, table, tr, td {margin: 0px;padding: 0px;}
.myTable {width: 800px;margin: 20px;border-collapse: collapse;}
.myTable td, .myTable th {height: 30px;line-height: 30px;padding: 6px;}
</style>
<table width="1000" border="1" class="myTable">
<tr>
<th>員工編號</th>
<th>員工姓名</th>
<th>員工電話</th>
<th>所在地區</th>
<th>員工工資</th>
</tr>
@foreach (var item in ViewBag.listEmp)
{
<tr>
<td>@item.EmpId</td>
<td>@item.EmpName</td>
<td>@item.EmpPhone</td>
<td>@item.EmpArea</td>
<td>@item.EmpSalary.ToString("F2")</td>
</tr>
}
</table>
二、Jquery Ajax和MVC結合
以下很多案例中需要資料庫支援，資料表資料如下：
create table Dept
(
DeptId int primary key identity(1,1),
DeptName varchar(50) not null
)
create table Employee
(
EmpId int primary key identity(1,1),
DeptId int not null,
EmpName varchar(50) not null,
EmpPhone varchar(50) not null,
EmpArea varchar(50) not null,
EmpSalary decimal(18,2) not null
)
insert into Dept(DeptName) values('開發部')
insert into Dept(DeptName) values('測試部')
insert into Dept(DeptName) values('實施部')
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(1,'劉德華','13887855552','武漢',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(2,'張學友','13556528634','深圳',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(3,'劉亦菲','13448494546','廣州',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(1,'周杰倫','13888666855','北京',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(2,'許巍','13868654219','上海',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(3,'孫燕姿','13895133572','成都',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(1,'朴樹','13458788896','武漢',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(2,'周潤發','13554588745','南京',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(3,'李連杰','13998759654','上海',6500)
select * from Dept;
select * from Employee;
一下案例中部分功能可以用到Json處理類，如下：
public class MyJson
{
#region 將物件轉換為Json(支援實體、集合)
public static string ToJsJson(object item)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
string output = serializer.Serialize(item);
return output;
}
#endregion
#region 將Json字串轉換為實體或集合
public static T FromJsonTo<T>(string jsonString)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
T jsonObject = serializer.Deserialize<T>(jsonString);
return jsonObject;
}
#endregion
#region 將DataTable轉換成Json字串
public static string DataTableToJson(DataTable dt)
{
StringBuilder jsonBuilder = new StringBuilder();
//jsonBuilder.Append("{\"");
//jsonBuilder.Append(dt.TableName.ToString());
//jsonBuilder.Append("\":[");
jsonBuilder.Append("[");
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":\"");
jsonBuilder.Append(dt.Rows[i][j].ToString());
jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]");
//jsonBuilder.Append("]");
//jsonBuilder.Append("}");
return jsonBuilder.ToString();
}
#endregion
#region 將DataRow轉換成Json資料
public static string DataRowToJson(DataTable dt)
{
StringBuilder jsonBuilder = new StringBuilder();
jsonBuilder.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":\"");
jsonBuilder.Append(dt.Rows[0][j].ToString());
jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("},");
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
return jsonBuilder.ToString();
}
#endregion
}
（1）檢查使用者名稱是否可用
Action：
public ActionResult Demo05()
{
return View();
}
public ActionResult Demo05Check()
{
//假設liubei,guanyu,zhangfei三個使用者名稱已經被註冊過
string acc = Request["acc"].ToString();
if (acc.Equals(""))
return Content("使用者名稱不能為空!", "text/html");
if (acc.Equals("liubei") || acc.Equals("guanyu") || acc.Equals("zhangfei"))
{
return Content("使用者名稱已經被註冊!", "text/html");
}
else
{
return Content("恭喜,使用者名稱可以使用!", "text/html");
}
}
View：
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Demo05</title>
<script src="~/Script/Jquery/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function () {
$("#btCheck").click(function () {
var acc = $("#acc").val();
$.ajax({
type: "POST",
url: "Demo05Check",
data: { acc: acc },
success: function (msg) {
$("#spanInfo").html(msg);
}
});
})
})
</script>
</head>
<body>
<div>
<h1>使用者名稱驗證</h1>
<form method="post">
使用者名稱:<input type="text" name="acc" id="acc" />
<input type="button" value="驗證" id="btCheck" />
<span id="spanInfo" style="color:red;"></span>
</form>
</div>
</body>
</html>
（2）查詢資料列表
Action：
public ActionResult Demo06()
{
return View();
}
//使用JsonResult返回查詢資料(不需要Json工具類)
public JsonResult Demo06Search()
{
DBTESTEntities db = new DBTESTEntities();
var listView = from emp in db.Employee
join dept in db.Dept on emp.DeptId equals dept.DeptId
select new
{
EmpId = emp.EmpId,
DeptId = emp.DeptId,
DeptName = dept.DeptName,
EmpName = emp.EmpName,
EmpPhone = emp.EmpPhone,
EmpArea = emp.EmpArea,
EmpSalary = emp.EmpSalary
};
if (!string.IsNullOrEmpty(Request["txtName"]))
{
//linq to entity,不能在lambda裡面進行int.parse,或者其它的顯示隱式的轉換
string txtName = Request["txtName"].ToString();
listView = listView.Where(p => p.EmpName.Contains(txtName));
}
return Json(listView, JsonRequestBehavior.AllowGet);
}
View：
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Demo06</title>
<style type="text/css">
div, table, tr, td { margin: 0px; padding: 0px;}
.myTable { width: 800px;margin: 20px; border-collapse: collapse; }
.myTable td, .myTable th {height: 30px;line-height: 30px; padding: 6px; }
</style>
<script src="~/Script/Jquery/jquery-1.7.1.js"></script>
<script type="text/javascript">
function ShowTable(arrJson) {
var strTable = "<table width='1000' border='1' id='myTable' class='myTable'>";
strTable += "<tr><th>員工編號</th><th>員工姓名</th><th>部門名稱</th><th>員工電話</th><th>所在地區</th><th>員工工資</th></tr>";
for (var i = 0; i < arrJson.length; i++) {
strTable += "<tr>";
strTable += "<td>" + arrJson[i].EmpId + "</td>";
strTable += "<td>" + arrJson[i].EmpName + "</td>";
strTable += "<td>" + arrJson[i].DeptName + "</td>";
strTable += "<td>" + arrJson[i].EmpPhone + "</td>";
strTable += "<td>" + arrJson[i].EmpArea + "</td>";
strTable += "<td>" + arrJson[i].EmpSalary + "</td>";
//strTable += "<td><a href='javascript:void(0);' class='myedit' id='edit_" + arrJson[i].StuId + "'>編輯</a> <a href='javascript:void(0);' class='mydel' id='del_" + arrJson[i].StuId + "'>刪除</a></td>";
strTable += "</tr>";
}
strTable += "</table>";
$("#divResult").html(strTable);
}
$(function () {
$("#selectEmp").click(function () {
var txtName = $("#txtName").val();
//使用getJson獲取資料
//$.getJSON("Demo06Search", { txtName: txtName }, function (arrJson) {
// ShowTable(arrJson);
//});
//使用ajax獲取資料
$.ajax({
type: "POST",
url: "Demo06Search",
data: { txtName: txtName },
success: function (arrJson) {
ShowTable(arrJson);
},
dataType:"json"
});
//使用post獲取資料
//$.post("Demo06Search", { txtName: txtName },
// function (arrJson) {
// ShowTable(arrJson);
// },
// "json"
//);
})
})
</script>
</head>
<body>
<div>
<input type="text" name="txtName" id="txtName" />
<input id="selectEmp" type="button" value="搜 索" />
</div>
<div id="divResult">
</div>
</body>
</html>
（3）返回多個表資料
組合類：
public class DeptAndEmp
{
public List<Dept> ListDept { get; set; }
public List<Employee> ListEmp { get; set; }
}
Action：
public ActionResult Demo07()
{
return View();
}
public ActionResult Demo07Search()
{
DBTESTEntities db = new DBTESTEntities();
var listDept = from dept in db.Dept select dept;
var listEmp = from emp in db.Employee select emp;
DeptAndEmp deptEmp = new DeptAndEmp();
deptEmp.ListDept = listDept.ToList();
deptEmp.ListEmp = listEmp.ToList();
//方案一: 使用工具類返回資料
//string jsonResult = MyJson.ToJsJson(deptEmp);
//return Content(jsonResult);
//方案二:使用Json.NET - Newtonsoft，第三方工具返回資料
//string jsonResult = JsonConvert.SerializeObject(deptEmp);
//return Content(jsonResult);
//方案三:使用MVC中Json進行返回資料
return Json(deptEmp, JsonRequestBehavior.AllowGet);
}
View：
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Demo07</title>
<style type="text/css">
div, table, tr, td {margin: 0px;padding: 0px;}
.myTable {width: 800px;margin: 20px;border-collapse: collapse;}
.myTable td, .myTable th {height: 30px;line-height: 30px;padding: 6px;}
</style>
<script src="~/Script/Jquery/jquery-1.7.1.js"></script>
<script type="text/javascript">
function ShowDept(arrJson) {
var strTable = "<table width='1000' border='1' id='myTable' class='myTable'>";
strTable += "<tr><th>部門編號</th><th>部門名稱</th>";
for (var i = 0; i < arrJson.ListDept.length; i++) {
strTable += "<tr>";
strTable += "<td>" + arrJson.ListDept[i].DeptId + "</td>";
strTable += "<td>" + arrJson.ListDept[i].DeptName + "</td>";
strTable += "</tr>";
}
strTable += "</table>";
$("#divDept").html(strTable);
}
function ShowEmp(arrJson)
{
var strTable = "<table width='1000' border='1' id='myTable' class='myTable'>";
strTable += "<tr><th>員工編號</th><th>員工姓名</th><th>部門編號</th><th>員工電話</th><th>所在地區</th><th>員工工資</th></tr>";
for (var i = 0; i < arrJson.ListEmp.length; i++) {
strTable += "<tr>";
strTable += "<td>" + arrJson.ListEmp[i].EmpId + "</td>";
strTable += "<td>" + arrJson.ListEmp[i].EmpName + "</td>";
strTable += "<td>" + arrJson.ListEmp[i].DeptId + "</td>";
strTable += "<td>" + arrJson.ListEmp[i].EmpPhone + "</td>";
strTable += "<td>" + arrJson.ListEmp[i].EmpArea + "</td>";
strTable += "<td>" + arrJson.ListEmp[i].EmpSalary + "</td>";
//strTable += "<td><a href='javascript:void(0);' class='myedit' id='edit_" + arrJson[i].StuId + "'>編輯</a> <a href='javascript:void(0);' class='mydel' id='del_" + arrJson[i].StuId + "'>刪除</a></td>";
strTable += "</tr>";
}
strTable += "</table>";
$("#divEmp").html(strTable);
}
$(function () {
//使用ajax獲取資料
$.ajax({
type: "POST",
url: "Demo07Search",
//data: { txtName: txtName },
success: function (arrJson) {
ShowDept(arrJson);
ShowEmp(arrJson);
},
dataType: "json"
});
})
</script>
</head>
<body>
<div id="divDept">
</div>
<br /><br />
<div id="divEmp">
</div>
</body>
</html>
（4）自定義Json格式
Action：
public ActionResult Demo08()
{
return View();
}
public ActionResult Demo08Search()
{
//完全自定義Json格式
DBTESTEntities db = new DBTESTEntities();
var listDept = from dept in db.Dept select dept;
var listEmp = from emp in db.Employee select emp;
JArray jArrDept = new JArray();
foreach (var item in listDept)
{
JObject obj = new JObject();
obj.Add("DeptId", item.DeptId);
obj.Add("DeptName", item.DeptName);
jArrDept.Add(obj);
}
JArray jArrEmp = new JArray();
foreach (var item in listEmp)
{
JObject obj = new JObject();
obj.Add("EmpId", item.EmpId);
obj.Add("DeptId", item.DeptId);
obj.Add("EmpName", item.EmpName);
obj.Add("EmpPhone", item.EmpPhone);
obj.Add("EmpArea", item.EmpArea);
obj.Add("EmpSalary", item.EmpSalary);
jArrEmp.Add(obj);
}
JObject jObj = new JObject();
jObj.Add("Dept", jArrDept);
jObj.Add("Emp", jArrEmp);
string jsonResult = JsonConvert.SerializeObject(jObj);
return Content(jsonResult);
//部分自定義Json格式
//DBTESTEntities db = new DBTESTEntities();
//var listDept = from dept in db.Dept select dept;
//var listEmp = from emp in db.Employee select emp;
//JObject jObj = new JObject();
////jObj.Add("Dept", (JArray)JsonConvert.DeserializeObject(JsonConvert.SerializeObject(listDept)));
////jObj.Add("Emp", (JArray)JsonConvert.DeserializeObject(JsonConvert.SerializeObject(listEmp)));
//jObj.Add("Dept", JArray.Parse(JsonConvert.SerializeObject(listDept)));
//jObj.Add("Emp", JArray.Parse(JsonConvert.SerializeObject(listEmp)));
//string jsonResult = JsonConvert.SerializeObject(jObj);
//return Content(jsonResult);
}
View：
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Demo08</title>
<style type="text/css">
div, table, tr, td { margin: 0px; padding: 0px; }
.myTable { width: 800px; margin: 20px; border-collapse: collapse;}
.myTable td, .myTable th {height: 30px;line-height: 30px; padding: 6px;}
</style>
<script src="~/Script/Jquery/jquery-1.7.1.js"></script>
<script type="text/javascript">
function ShowDept(arrJson) {
var strTable = "<table width='1000' border='1' id='myTable' class='myTable'>";
strTable += "<tr><th>部門編號</th><th>部門名稱</th>";
for (var i = 0; i < arrJson.Dept.length; i++) {
strTable += "<tr>";
strTable += "<td>" + arrJson.Dept[i].DeptId + "</td>";
strTable += "<td>" + arrJson.Dept[i].DeptName + "</td>";
strTable += "</tr>";
}
strTable += "</table>";
$("#divDept").html(strTable);
}
function ShowEmp(arrJson)
{
var strTable = "<table width='1000' border='1' id='myTable' class='myTable'>";
strTable += "<tr><th>員工編號</th><th>員工姓名</th><th>部門編號</th><th>員工電話</th><th>所在地區</th><th>員工工資</th></tr>";
for (var i = 0; i < arrJson.Emp.length; i++) {
strTable += "<tr>";
strTable += "<td>" + arrJson.Emp[i].EmpId + "</td>";
strTable += "<td>" + arrJson.Emp[i].EmpName + "</td>";
strTable += "<td>" + arrJson.Emp[i].DeptId + "</td>";
strTable += "<td>" + arrJson.Emp[i].EmpPhone + "</td>";
strTable += "<td>" + arrJson.Emp[i].EmpArea + "</td>";
strTable += "<td>" + arrJson.Emp[i].EmpSalary + "</td>";
//strTable += "<td><a href='javascript:void(0);' class='myedit' id='edit_" + arrJson[i].StuId + "'>編輯</a> <a href='javascript:void(0);' class='mydel' id='del_" + arrJson[i].StuId + "'>刪除</a></td>";
strTable += "</tr>";
}
strTable += "</table>";
$("#divEmp").html(strTable);
}
$(function () {
//使用ajax獲取資料
$.ajax({
type: "POST",
url: "Demo08Search",
//data: { txtName: txtName },
success: function (arrJson) {
ShowDept(arrJson);
ShowEmp(arrJson);
},
dataType: "json"
});
})
</script>
</head>
<body>
<div id="divDept">
</div>
<br /><br />
<div id="divEmp">
</div>
</body>
</html>