使用ASP的单页应用程序。NET MVC和jQuery的CRUD方法

2022-08-30 16:33:59

介绍在本文中，我将告诉您如何使用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方法

码农公寓

相关文章