介绍 在本文中，我将告诉您如何使用ASP创建单个页面应用程序。NET MVC和jQuery。如果不使用Angular、React和其他第三方的JavaScripts，是很难实现SPA的。在这篇文章中，我将只解释控制器和UI级的交互。我跳过了数据访问层。如果您需要，请下载附件，其中包括应用程序的整体代码。 注意:我对CRUD操作使用了代码优先的方法。下载项目文件后，恢复包并更改连接字符串web。配置并在包管理器控制台中运行update-database命令。 背景 所需内容 ASP。NET mvc jquery sammy . js(用于路由) 使用的代码 创建一个新的MVC项目。 在布局页面中添加jQuery和Sammy.js引用。添加div标记(MainContent)，在其中呈现所有的部分视图。 隐藏,复制Code
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/sammy-0.7.4.js"></script>
</head>
在您的项目中创建layout-routing.js文件，该文件包含应用程序的路由结构，如下所示。 隐藏,收缩,复制Code
var mainContent;
var titleContent;
$(function () {
mainContent = $("#MainContent"); /// render partial views.
titleContent = $("title"); // render titles.
});
var routingApp = $.sammy("#MainContent", function () {
this.get("#/Student/Index", function (context) {
titleContent.html("Student Page");
$.get("/Student/Index", function (data) {
context.$element().html(data);
});
});
this.get("#/Student/Add", function (context) {
titleContent.html("Add Student");
//$("#BigLoader").modal(‘show‘); // If you want to show loader
$.get("/Student/Add", function (data) {
//$("#BigLoader").modal(‘hide‘);
context.$element().html(data);
});
});
this.get("#/Student/Edit", function (context) {
titleContent.html("Edit Student");
$.get("/Student/Edit", {
studentID: context.params.id // pass student id
}, function (data) {
context.$element().html(data);
});
});
this.get("#/Home/About", function (context) {
titleContent.html("About");
$.get("/Home/About", function (data) {
context.$element().html(data);
});
});
this.get("#/Home/Contact", function (context) {
titleContent.html("Contact");
$.get("/Home/Contact", function (data) {
context.$element().html(data);
});
});
});
$(function () {
routingApp.run("#/Student/Index"); // default routing page.
});
function IfLinkNotExist(type, path) {
if (!(type != null && path != null))
return false;
var isExist = true;
if (type.toLowerCase() == "get") {
if (routingApp.routes.get != undefined) {
$.map(routingApp.routes.get, function (item) {
if (item.path.toString().replace("/#", "#").replace(/\\/g, ‘‘).replace("$/", "").indexOf(path) >= 0) {
isExist = false;
}
});
}
} else if (type.toLowerCase() == "post") {
if (routingApp.routes.post != undefined) {
$.map(routingApp.routes.post, function (item) {
if (item.path.toString().replace("/#", "#").replace(/\\/g, ‘‘).replace("$/", "").indexOf(path) >= 0) {
isExist = false;
}
});
}
}
return isExist;
}
IfLinkNotExist()检查url是否不应该重复，之后我们将添加动态url在页面加载的路由列表。 在_layout中添加布局路由引用。cshtml页面。 隐藏,复制Code
<script src="~/layout-routing.js"></script>
@*@Scripts.Render("~/bundles/jquery")*@
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
添加一个新的控制器“WelcomeController”，它只有一个动作“Index”。 隐藏,复制Code
namespace MvcSpaDemo.Controllers
{
public class WelcomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
}
使用右键单击创建“Index”操作的视图。 在该视图中，附加布局页面链接。(我们需要为第一次渲染布局页面)。 隐藏,复制Code
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Welcome</h1>
现在，创建student Controller，其中包括student CRUD操作模块。(添加、更新、删除、查看)。 观点的学生 隐藏,复制Code
public ActionResult Index()
{
return PartialView();
}
public ActionResult _Index()
{
var students = StudentData.GetStudents();
return PartialView(students);
}
添加两个没有布局页面的视图。一个用于外部学生内容，如标题、添加按钮等，另一个用于学生表。 Index.cshtml 隐藏,收缩,复制Code
@{
Layout = null;
}
<h4>Students</h4>
<div class="row">
<a href="#/Student/Add">Add Student</a>
</div>
<div class="row">
<div id="StudentDiv">
</div>
</div>
<script>
$(function () {
GetStudents();
});
function GetStudents() {
$.get("/Student/_Index/", function (data) {
$("#StudentDiv").html(data);
});
}
function DeleteStudent(studentID) {
if (confirm("Delete student?")) {
$.get("/Student/Delete/", { studentID: studentID }, function (data) {
GetStudents();
});
}
}
</script>
_Index.cshtml 隐藏,收缩,复制Code
@model IEnumerable<MvcSpaDemo.Entities.Student>
@{
Layout = null;
}
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Class</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.StudentID</td>
<td>@item.FirstName @item.LastName</td>
<td>@item.Email</td>
<td>@item.Class</td>
<td>
<a href="#/Student/Edit?id=@item.StudentID">Edit</a>
<a href="javascript::;" onclick="DeleteStudent(‘@item.StudentID‘)">Delete</a>
</td>
</tr>
}
</tbody>
</table>
更改RouteConfig.cs中的默认控制器和动作。 隐藏,复制Code
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Welcome", action = "Index", id = UrlParameter.Optional }
);
}
}
使用F5运行应用程序。对About和Contact页面也执行相同的路由。 添加学生asd 现在，在Controller中添加“Create Student Actions”。 隐藏,复制Code
public ActionResult Add()
{
var student = new Student();
ViewBag.Status = "Add";
return PartialView(student);
}
[HttpPost]
public ActionResult Create(Student student)
{
StudentData.AddStudent(student);
return Json(true, JsonRequestBehavior.AllowGet);
}
我们将使用创建或更新的动态路由脚本添加添加页面。 隐藏,收缩,复制Code
@model MvcSpaDemo.Entities.Student
@{
ViewBag.Title = "Add";
Layout = null;
// We use same page for add and edit.
var urlPostString = "/Student/Create";
if (ViewBag.Status == "Edit")
{
urlPostString = "/Student/Update";
}
}
<h2>@ViewBag.Status Student</h2>
<form id="frmStudent" name="frmStudent" method="post" action="#@urlPostString">
@Html.HiddenFor(x => x.StudentID)
<div class="row">
<div class="form-group">
<label for="Variables">First Name</label>
@Html.TextBoxFor(x => x.FirstName, new { @class = "form-control square" })
</div>
<div class="form-group">
<label for="Variables">Last Name</label>
@Html.TextBoxFor(x => x.LastName, new { @class = "form-control square" })
</div>
<div class="form-group">
<label for="Variables">Email</label>
@Html.TextBoxFor(x => x.Email, new { @class = "form-control square" })
</div>
<div class="form-group">
<label for="Variables">Class</label>
@Html.TextBoxFor(x => x.Class, new { @class = "form-control square" })
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Submit" />
</div>
</div>
</form>
<script>
$("#frmStudent").on("submit", function (e) {
debugger;
//if ($("#frmStudent").valid()) {
routingApp.runRoute(‘post‘, ‘#@urlPostString‘);
e.preventDefault();
e.stopPropagation();
//}
});
// add dynamic create or update link
debugger;
if (IfLinkNotExist("POST", "#@urlPostString")) {
routingApp.post("#@urlPostString", function (context) {
//$("#BigLoader").modal(‘show‘);
var formData = new FormData($(‘#frmStudent‘)[0]);
$.ajax({
url: ‘@urlPostString‘,
data: formData,
type: "POST",
contentType: false,
processData: false,
success: function (data) {
//$("#BigLoader").modal(‘hide‘);
if (data) {
if (‘@ViewBag.Status‘ == ‘Add‘)
alert("Student successfully added");
else if (‘@ViewBag.Status‘ == ‘Edit‘)
alert("Student successfully updated");
window.location.href = "#/Student/Index";
}
else {
alert(‘Something went wrong‘);
}
},
error: function () {
alert(‘Something went wrong‘);
}
});
});
}
</script>
现在，运行应用程序。 编辑学生 现在，继续编辑模块。在控制器中添加编辑动作。 隐藏,复制Code
public ActionResult Edit(int studentID) // studentID nothing but parameter name which we pass in layout-routing.
{
var student = StudentData.GetStudentById(studentID);
ViewBag.Status = "Edit";
return PartialView("Add", student);
}
[HttpPost]
public ActionResult Update(Student student)
{
StudentData.UpdateStudent(student);
return Json(true, JsonRequestBehavior.AllowGet);
}
我们使用相同的部分视图进行添加和编辑，所以这里不需要为edit. 创建一个新的视图。 添加操作方法后，只需运行应用程序。 删除Student 现在，我们将实现删除操作。 我们已经在Student Index.cshtml中编写了删除按钮的代码。 隐藏,复制Code
function GetStudents() {
$.get("/Student/_Index/", function (data) {
$("#StudentDiv").html(data);
});
}
function DeleteStudent(studentID) {
if (confirm("Delete student?")) {
$.get("/Student/Delete/", { studentID: studentID }, function (data) {
GetStudents();
});
}
}
运行应用程序。 我希望您喜欢这篇文章。欢迎您对本文提出宝贵的反馈、问题或评论。 本文转载于：http://www.diyabc.com/frontweb/news15850.html
使用ASP的单页应用程序。NET MVC和jQuery的CRUD方法
原文：https://www.cnblogs.com/Dincat/p/13489968.html