此文檔解決以下問題：
1.通過前端頁面按鈕執行控制器的方法
2.地址欄訪問json數據
3.返回json數據（JavaScript的ajax方法）
4.返回json數據（jQuery的ajax方法）.
附：ASP.NET Core 官方文檔 地址：https://docs.microsoft.com/zh-cn/aspnet/core/?view=aspnetcore-2.2
1.通過前端頁面按鈕執行控制器的方法
1）AccountController.cs
public IActionResult Index3() { //View 幫助程序方法 //用 return View("<ViewName>"); 顯式返回 //如果使用從應用根目錄開始的絕對路徑（可選擇以“/”或“~/”開頭），則須指定.cshtml或者.html 擴展名 //此處介紹Views文件夾外的頁面訪問 return View("/pages/demo/index3.html"); } public IActionResult Index5() { //Redirect是讓瀏覽器重定向到新的地址 //建議創建在wwwroot項目文件下 return Redirect("/pages/demo/index5.html"); }
2) index5.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../../lib/jquery.js"></script>
</head>
<body>
<h2>根目錄下wwwroot項目文件夾中pages 中demo文件夾中的index5.html頁面</h2>
<input type="button" name="btn" id="btn" value="跳轉(執行account控制器中的index3方法)" />
<script>
$(function () {
$("#btn").click(function () {
//執行account控制器中的index3方法
window.location = "/account/index3";
});
});
</script>
</body>
</html>
3)運行瀏覽 ，account控制器中的index5方法，頁面結果如下，點擊按鈕
4) 按鈕執行 account控制器中的index3方法，頁面結果如下
2.地址欄訪問json數據
1）AccountController.cs
public JsonResult GetJson() { // 返回Json數據 //可在瀏覽器中通過 localhost:端口/[ControllerName]/[MethodName]執行 //這里是 localhost:端口/Account/GetJson return Json(new { Code = 0, Msg = "Json數據測試" }); }
2) 運行瀏覽，結果如下
3.返回json數據（JavaScript的ajax方法）
1）AccountController.cs
public IActionResult Index6() { //Redirect是讓瀏覽器重定向到新的地址 //建議創建在wwwroot項目文件下 return Redirect("/pages/demo/index6.html"); }
2) index6.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>根目錄下wwwroot項目文件夾中pages 中demo文件夾中的index6.html頁面</h2>
code:<input type="text" name="code" id="code" value="" /><br />
msg:<input type="text" name="msg" id="msg" value="" /><br />
<input type="button" name="btn1" id="btn1" value="返回json數據（JavaScript的ajax方法）" onclick="ajax()" /><br />
<input type="button" name="btn2" id="btn2" value="返回json數據（jQuery的ajax方法）" /><br />
<a id="xinxi"></a><br />
</body>
</html>
3) AccountController.cs，添加代碼，如下
public IActionResult Index6() { //Redirect是讓瀏覽器重定向到新的地址 //建議創建在wwwroot項目文件下 return Redirect("/pages/demo/index6.html"); } public IActionResult GetJson2([FromBody]Model model) { //此方法傳遞模型數據類型的數據 //可通過ajax來調用 if (model != null) { int code = model.Code; string msg = model.Msg; return Json(new { Code = code, Msg = msg, result = "code=" + code + "*******msg=" + msg }); } else { return Json(new { result = "Is Null" }); } } public class Model { //此類可以放在Models文件夾中 public int Code { get; set; } public string Msg { get; set; } }
4) index.html ，添加代碼，結果如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../../lib/jquery.js"></script>
</head>
<body>
<h2>根目錄下wwwroot項目文件夾中pages 中demo文件夾中的index6.html頁面</h2>
code:<input type="text" name="code" id="code" value="" /><br />
msg:<input type="text" name="msg" id="msg" value="" /><br />
<input type="button" name="btn1" id="btn1" value="返回json數據（JavaScript的ajax方法）" onclick="ajax()" /><br />
<input type="button" name="btn2" id="btn2" value="返回json數據（jQuery的ajax方法）" /><br />
<a id="xinxi"></a><br />
<script>
function ajax() {
var code = document.getElementById("code").value;
var msg = document.getElementById("msg").value;
var xixn = JSON.stringify({
code: code,
msg: msg
});
var xhr = new XMLHttpRequest;//創建一個 XMLHttpRequest 對象，XMLHttpRequest是實現ajax的基礎
xhr.open("POST", "/Account/GetJson2", true)//請求方式為"Post","/Account/GetJson2"為服務器地址（在MVC這里就是控制器地址+方法名），true表示選擇異步
xhr.setRequestHeader("Content-type", "application/json")//設置請求參數類型
xhr.send(xixn);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var s = xhr.responseText;
document.getElementById("xinxi").innerHTML = JSON.parse(s).result;
}
}
}
</script>
</body>
</html>
5) 運行瀏覽，先執行accoun控制器中的index6方法
6) 輸入數據，點擊按鈕
6) 在當前頁返回數據，結果如下
4.返回json數據（jQuery的ajax方法）
1）AccountController.cs
public IActionResult Index6() { //Redirect是讓瀏覽器重定向到新的地址 //建議創建在wwwroot項目文件下 return Redirect("/pages/demo/index6.html"); } public IActionResult GetJson2([FromBody]Model model) { //此方法傳遞模型數據類型的數據 //可通過ajax來調用 if (model != null) { int code = model.Code; string msg = model.Msg; return Json(new { Code = code, Msg = msg, result = "code=" + code + "*******msg=" + msg }); } else { return Json(new { result = "Is Null" }); } } public class Model { //此類可以放在Models文件夾中 public int Code { get; set; } public string Msg { get; set; } }
2) index6.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../../lib/jquery.js"></script>
</head>
<body>
<h2>根目錄下wwwroot項目文件夾中pages 中demo文件夾中的index6.html頁面</h2>
code:<input type="text" name="code" id="code" value="" /><br />
msg:<input type="text" name="msg" id="msg" value="" /><br />
<input type="button" name="btn1" id="btn1" value="返回json數據（JavaScript的ajax方法）" /><br />
<input type="button" name="btn2" id="btn2" value="返回json數據（jQuery的ajax方法）" /><br />
<a id="xinxi"></a><br />
<script>
$(document).ready(function () {
$("#btn2").click(function () {
var code = $("#code").val();
var msg = $("#msg").val();
var data = JSON.stringify({
code: code,
msg: msg
});
$.ajax({
type: "post",
data: data,
url: "/account/GetJson2",
contentType: 'application/json;charset=utf-8',//返回json數據，一定要設置contentType 為application/json，其他不需要
dataType: "json",
success: function (result) {
var n = result.result;
alert(n)
},
error: function () {
alert("獲取數據失敗!");
}
});
});
});
</script>
</body>
</html>
3) 運行瀏覽，先執行accoun控制器中的index6方法
4) 在當前頁以彈出框形式返回數據，結果如下
正文結束~~~