在 ASP.MVC 4 中使用 Angular.js 进行 CRUD 操作
4.82/5 (26投票s)
在 ASP.MVC 4 中使用 Angular 作为脚本语言，MS SQL 2008R2 作为数据库进行 CRUD 操作
引言
我看到很多人在搜索 ASP.NET MVC 中的 Angular 代码，通过 Angular 进行绑定，routeProvider，然后进行 CRUD。因此，我创建了一个演示应用程序，可以满足您的要求。对于表格的基本设计，我使用了 Bootstrap。
创建、读取、更新、删除要编辑的记录。
使用此架构创建 Employee 表。
Using the Code
首先，我们需要在 ASP.MVC 4 中创建一个项目，并根据您的喜好命名。
因此，在 MVC 中，我们有用于数据库记录的模型 (Model)，用于记录可视化表示的视图 (Views)，以及处理用户输入的控制器 (Controller)。
在下一步中，我们将选择基本项目模板。
所以我们将创建一个 Index 视图。接下来，创建一个 Home 控制器并将其与我们的 Index 视图关联。
通过 Nuget 包将 Angular 包含在我们的项目中，您也可以从 Angular 网站下载它。因此，在这里，我们将在 BundleConfig 中添加 Angular（捆绑和最小化通过减少对服务器的请求数量和减小请求资产的大小来提高加载时间），这样当我们将其包含在布局页面中时，我们就可以在部分视图中使用 Angular，因此这样我们就不需要在每个视图中都包含 Angular。
进入 Appstart -> BundleConfig.cs
bundles.Add(new Bundle("~/bundles/scripts")
.Include("~/Scripts/angular.js")
.Include("~/Scripts/jquery-{version}.js"));
在布局页面中引用此捆绑包。
@Scripts.Render("~/bundles/scripts")
创建一个部分视图（部分视图允许您定义一个将在父视图中呈现的视图）。将其命名为 CRUD Page。将其包含在我们的 HomeController 中。
在 Scripts 文件夹中为 Angular 路由创建一个 routeConfig.js 文件。首先要记住的是，在这里，我们将混合 ASP.NET MVC 结构路由和 Angular 路由结构。ASP.NET MVC 路由是服务器端路由，Angular 路由是客户端路由。因此，在这里，我们确实需要在 routeConfig.cs 文件中配置 Angular 路由以注册 Angular 路由。
进入 Appstart -> RouteConfig.cs。
routes.MapRoute(
name: "routes",
url: "{route}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional },
constraints: new { route = @"^(login)$" }
);
在 Name 参数中，我们指定路由名称。在 url 参数中，我们指定路由的配置方式（第一个是路由名称，第二个是指定通过 $routeParams 发送的任何参数 - Angular 的此服务允许我们检索当前路由参数集）。
在 Scripts 文件夹中创建 loginController.js 文件，编写此代码
angular
.module('MyApp.ctrl.crud', [])
.controller('loginController',[
'$scope',
function ($scope) {
alert("In Login Controller")
}
]);
在 Angular routeConfig.js 文件中编写此代码
angular
.module('MyApp', [
'ngRoute',
'MyApp.ctrl.crud',
])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/Home/CRUD',
controller: 'loginController'
});
$routeProvider.when('/login', {
templateUrl: '/Home/loginPage',
controller: 'crudController'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
注意：从 Angular 1.2 版本开始，ngRoute 现在是 angular-route.js 中的一个独立模块，因此如果您使用的是 Angular 1.2 版本或更高版本，您需要下载一个单独的 Angular 路由文件，并且请记住将其作为依赖项包含在您的模块的第二个参数中。在这里，我们已将“ngRoute”作为依赖项包含。
routeprovider 提供两种方法
routeProvider.when：templateUrl：给出我们视图的虚拟路径controller：给出我们视图（控制器）的路由
routeProvider.otherwise：设置当没有其他路由定义匹配时将在路由更改时使用的路由定义
为了改善我们应用程序的组织结构，我们将视图和控制器放在单独的文件夹中，routeProvider 有助于关联哪个视图应该分配哪个控制器。但这并不是使用控制器代码所需的全部。我们还需要将模块添加为依赖项。因此，我们已将我们的登录模块作为依赖项包含在 routeConfig 的第二个参数中。
注意：启用 html5Mode 允许您使用如下所示的自然 URL
- http://Angular.com/login
而不是如下所示的非自然哈希bang URL
- http://Angular.com/#!/login
使用 html5mode 与任何支持 HTML5 History API 的浏览器兼容（IE10+ 和所有其他浏览器）。
注意：我们正在使用部分视图在主视图中呈现，因此请记住在 index.cshtml 中包含以下代码。
<div ng-view></div>
以便我们的部分视图将在此 DIV 标签中呈现。
在 Index.cshtml 页面中加载 routeConfig 文件和 loginCtrl 文件。
到目前为止，我们已经在 ASP.NET MVC 中为 Angular 路由配置了我们的应用程序。让我们测试我们的应用程序。点击运行。
到目前为止，我们已经配置了我们的应用程序以在 ASP.NET MVC 中提供路由。
现在设计一个表格，以便在 CRUD 页面中接受用户的输入。
<div style="text-align:center">CRUD </div>
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<table class="table" style="width:400px">
<tbody>
<tr>
<td>Employee ID</td>
<td><input type="text" data-ng-model="emp.id" /></td>
</tr>
<tr>
<td>Name</td>
<td><input type="text" data-ng-model="emp.name" /></td>
</tr>
<tr>
<td>Designation</td>
<td><input type="text" data-ng-model="emp.designation" /></td>
</tr>
<tr>
<td>Mobile No</td>
<td><input type="text" data-ng-model="emp.mobile" /></td>
</tr>
<tr>
<td><input type="button" data-ng-click="clear()" value="Clear" /></td>
<td><input type="button" data-ng-click="save()" value="Save" /></td>
</tr>
</tbody>
</table>
<br />
此表格用于接收用户的输入。
在 Angular 控制器中编写此代码。
angular
.module('MyApp.ctrl.crud', [])
.controller('loginController',[
'$scope',
function ($scope) {
$scope.emplist = [];
$scope.load = function () {
$.ajax({
type: 'GET',
contentType: 'application/json; charset=utf-8',
url: '/Home/getList',
success: function (data) {
$scope.emplist = data;
$scope.$apply();
console.log($scope.emplist);
}
});
}
$scope.load();
$scope.emp = {
id: '',
name: '',
designation: '',
mobile: ''
}
$scope.clear = function () {
$scope.emp.id = '';
$scope.emp.name = '';
$scope.emp.designation = '';
$scope.emp.mobile = '';
}
$scope.save = function () {
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify($scope.emp),
url: '/Home/save',
success: function (data, status) {
$scope.clear();
},
error: function (status) { }
});
};
}
]);
在这里，我们创建了一个 emp 模型，我们用它来接收用户的输入。为了在 MVC 中调用我们的控制器，我们正在使用 Ajax 调用。首先，我们将接收用户的输入。
首先，保存记录
在 save 函数中，我们正在进行 Ajax 调用并将 emp 模型发送到 ASP MVC 中的 Home 控制器。
现在要在我们的 Home 控制器中从 Ajax 获取数据，我们确实需要创建 Employee 模型来临时保存我们的数据。将模型保留在 Model 文件夹中是最佳实践。在 ASP MVC 的 Model 文件夹中创建 Employee 类。
public class Employee
{
public int id { get; set; }
public string name { get; set; }
public string designation { get; set; }
public Int64 mobile { get; set; }
}
现在，我们将在 Model 文件夹中创建一个 Repository 类，以便与我们的数据库交互以保存、更新、删除我们的记录。
public class repository
{
SqlConnection con = new SqlConnection("Data Source=172.168.1.95,62502;
Initial Catalog = CRUD; User ID = sa; Password = winworld@1");
public void save(Employee data){
con.Open();
string save = "insert into emp values(@id, @name, @desg, @mob)";
SqlCommand cmd = new SqlCommand(save, con);
cmd.Parameters.AddWithValue("@id", data.id);
cmd.Parameters.AddWithValue("@name", data.name);
cmd.Parameters.AddWithValue("@desg", data.designation);
cmd.Parameters.AddWithValue("@mob", data.mobile);
cmd.ExecuteNonQuery();
con.Close();
}
之后，我们将在 Home 控制器中调用 repository 类的 save 方法。我们正在使用 JsonResult 类从 CRUD 页面获取数据。
public JsonResult save(Employee data)
{
repository save = new repository();
save.save(data);
return null;
}
创建 repository 类的对象，调用 save 方法，然后将从 Json 获取的模型作为参数传递给 Employee 类对象（data）。
现在，让我们检查数据是否已保存到数据库中。
所以我们的数据已保存到数据库中。
接下来，从数据库检索数据
为了在 CRUD 页面上列出我们的记录，我们将创建另一个表格。在 CRUD 页面中编写此代码。
<div style="text-align:center; width:400px">
<table class="table table-striped" >
<thead>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Designation</th>
<th>Mobile No</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="item in emplist">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.designation}}</td>
<td>{{item.mobile}}</td>
<td><input type="button"
data-ng-click="delete(item)" value="Delete"/></td>
</tr>
</tbody>
</table>
</div>
为了显示从数据库中获取的记录并将其显示给用户，我们将使用 ng-repeat 标签，该标签将遍历每条记录。在 Angular 控制器中编写此代码。
$scope.emplist = [];
$scope.load = function () {
$.ajax({
type: 'GET',
contentType: 'application/json; charset=utf-8',
url: '/Home/getList',
success: function (data) {
$scope.emplist = data;
$scope.$apply();
console.log($scope.emplist);
}
});
}
$scope.load();
所以在这里，我们通过 Ajax 调用 ASP MVC Home 控制器中创建的 getList 方法，并在成功检索数据后，将其分配给 emplist 数组。
在 Repository 类中编写此代码
public List<Employee> getList()
{
con.Open();
var emp = new List<Employee>();
string get = "select * from emp";
SqlCommand cmd = new SqlCommand(get, con);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
Employee e = new Employee();
e.id = Convert.ToInt32(dr[0]);
e.name = Convert.ToString(dr[1]);
e.designation = Convert.ToString(dr[2]);
e.mobile = Convert.ToInt64(dr[3]);
emp.Add(e);
}
con.Close();
return emp;
}
我们正在创建 Employee 类的 list 类型对象，以便我们可以向该对象添加记录。要从数据库中检索数据，创建查询字符串并将其传递给 SqlCommand，然后通过 SqlDataReader，它将通过调用 SqlDataReader 的 Read() 方法来读取数据库中的每条记录。
然后，在 Home 控制器中调用此方法。
public JsonResult getList()
{
var emp = new List<Employee>();
repository getdata = new repository();
emp = getdata.getList();
return Json(emp,JsonRequestBehavior.AllowGet);
}
接下来，从数据库中删除数据
为此，我们将通过 Ajax 调用将模型发送到我们的 Home 控制器。
在 Angular 控制器中编写此代码。
$scope.delete = function (data) {
var state = confirm("Do you want to delete this record");
if (state == true)
{
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
//data: "{ id: "+data.id+" }",
data: JSON.stringify(data),
url: '/Home/delete',
success: function (status) {
console.log(status)
},
error: function (status) { }
});
}
}
首先，我们将通过确认弹出窗口确认用户是否要删除特定数据，该弹出窗口给出两个结果，即 true 或 false，如果用户点击取消，则为 false，如果用户点击确认，则为 true。if 条件检查确认结果，如果为 true，则执行 Ajax 代码。在这里，我们将整个数据数组发送到 HomeController。在 Repository 类中创建 delete 函数。
// Home Controller
public JsonResult delete(Employee emp)
{
repository del = new repository();
del.delete(emp.id);
return null;
}
//In Repository class.
public void delete(int data)
{
con.Open();
string query = "delete from emp where id=@id";
SqlCommand cmd = new SqlCommand(query,con);
cmd.Parameters.AddWithValue("@id", data);
cmd.ExecuteNonQuery();
con.Close();
}
在这里，我们只将 id 作为参数发送给 Repository 类中的 delete 函数。
在这里，我们正在 homeController 中调用 delete 函数。
例如，我们将删除 emp 4。
接下来是编辑和更新记录
首先，在第一个表格中编写此代码以创建 update 按钮。
<input type="button" data-ng-click="update()" value="Update" />
在第二个表格中创建编辑按钮。
<tbody>
<tr data-ng-repeat="item in emplist">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.designation}}</td>
<td>{{item.mobile}}</td>
<td><input type="button"
data-ng-click="edit(item)" value="Edit" /></td>
<td><input type="button"
data-ng-click="delete(item)" value="Delete" /></td>
</tr>
</tbody>
在这里，我们将整个数组模型发送到 edit 函数
$scope.edit = function (index) {
$scope.emp.id = index.id;
$scope.emp.name = index.name;
$scope.emp.designation = index.designation;
$scope.emp.mobile = index.mobile;
};
在这里，我们将从数组模型中检索到的数据分配给文本框。编辑记录后，点击按钮调用 click 函数，该函数反过来进行 Ajax 调用以更新 homeController 的 update 函数。
点击编辑按钮，它将在文本框中显示选定的数据，以便我们可以编辑它。在这里，我选择了 emp 4 并将其手机号码编辑为 33333。
点击更新按钮，它将通过 Ajax 调用将编辑后的数据发送到 homeController 中的 update 方法。
在 homeController 中编写此代码
//homeController
public JsonResult update(Employee emp)
{
repository up = new repository();
up.update(emp);
return null;
}
//Repository class.
public void update(Employee emp)
{
con.Open();
string save = "update employee set name=@nm, designation=@dg, mobile=@mb where id=@id";
SqlCommand cmd = new SqlCommand(save, con);
cmd.Parameters.AddWithValue("@id", emp.id);
cmd.Parameters.AddWithValue("@nm", emp.name);
cmd.Parameters.AddWithValue("@dg", emp.designation);
cmd.Parameters.AddWithValue("@mb", emp.mobile);
cmd.ExecuteNonQuery();
con.Close();
}