ASP.NET MVC+Vue.js实现联系人管理
接触了一天vue.js，简单浏览了一本关于vue的电子书，就开始动手使用ASP.NET MVC和Vue.js开发一个联系人管理的小程序。
先看一下这个联系人管理的小程序的界面，也就是我们大概要实现什么样的功能。
上面截图可以看出，这是一个很简单的表格管理功能。我们先分析一下，上述有哪些功能需要实现：
1、默认先加载出所有的联系人信息，有信息的行后面的操作那一栏，显示“修改”、“删除”，没有信息的行后面的操作那一栏，显示“添加”（默认只添加一行需要添加的信息）。
2、点击“添加”按钮对应的空白文本框中的内容，即可完成添加联系人的操作。添加操作完成后，自动添加一行空白行，以便再次添加。
3、编辑任意文本框中的内容，点击对应行后面的“修改”按钮，即可完成修改操作。
4、点击“删除”按钮，即可删除对应行的联系人记录
大家可以先思考一下，如果就单独使用ASP.NET MVC，不使用任何JS或jQuery插件，怎么完成。
下面就开始要正式实现上面的功能，首先我们要准备好后端的内容，就是Model、Controller、Repository这些内容。
Model很简单，就一个联系人的类：
public class Contact
{
public string Id { get; set; }
public string Name { get; set; }
public string PhoneNo { get; set; }
public string EmailAddress { get; set; }
}
然后新建一个ContactRepository类，用来提供数据的CRUD操作（这里只是简单的将数据封装到static变量中）：
public class ContactRepository
{
private static List<Contact> contacts; static ContactRepository()
{
contacts = new List<Contact>()
{
new Contact(){ Id=Guid.NewGuid().ToString(), Name="张三", PhoneNo="", EmailAddress="zhangsan@gmail.com" },
new Contact(){ Id=Guid.NewGuid().ToString(), Name="李四", PhoneNo="", EmailAddress="lisi@gmail.com" },
};
} public IEnumerable<Contact> Get()
{
return contacts;
} public Contact Get(string id)
{
return contacts.FirstOrDefault(t => t.Id == id);
} public void Put(Contact contact)
{
contact.Id = Guid.NewGuid().ToString();
contacts.Add(contact);
} public void Post(Contact contact)
{
Delete(contact.Id);
contacts.Add(contact);
} public void Delete(string id)
{
Contact contact = contacts.FirstOrDefault(t => t.Id == id);
contacts.Remove(contact);
}
}
接下来就是ContactController控制器：
public class ContactController : Controller
{
private static ContactRepository contactRepository = new ContactRepository(); public ActionResult Index()
{
return View();
} [HttpGet]
public JsonResult Get()
{
return Json(contactRepository.Get(), JsonRequestBehavior.AllowGet);
} [HttpPost]
public JsonResult Add(Contact contact)
{
contactRepository.Put(contact);
return Json(contactRepository.Get());
} [HttpPost]
public JsonResult Update(Contact contact)
{
contactRepository.Post(contact);
return Json(contactRepository.Get());
} [HttpPost]
public JsonResult Delete(string id)
{
var contact = contactRepository.Get(id);
contactRepository.Delete(id);
return Json(contactRepository.Get());
}
}
控制器中的代码也非常简单，就是简单的提供了CRUD对应的Action方法。
上述的操作，是ASP.NET MVC中的常规操作，也可以说是套路。完成了后端（ASP.NET MVC）开发工作，下面就是前端（Vue）开发工作了。
要在项目中使用Vue，首先要导入Vue的js文件，可以直接将Vue.js拷贝到Scripts目录中。此外由于我们需要在cshtml中发起ajax请求，调用controller中的各种action方法，因此我们也需要引用vue的ajax插件-axios。它们都可以通过NuGet在线安装。引用vue、axios后的目录截图如下：
联系人页面代码（Index.cshtml）：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>联系人管理</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/vue.js"></script>
<script src="~/Scripts/axios.js"></script>
<style type="text/css">
table {
margin: 10px auto auto 10px;
}
</style>
</head>
<body>
<div id="app">
<table v-show="contactsList.length" class="table-condensed" border="1">
<thead class="navbar-header">
<tr>
<th>姓名</th>
<th>电话号码</th>
<th>Email地址</th>
<th>操作</th>
</tr>
<tr v-for="(contact,index) in contactsList">
<td><input type="text" v-model="contact.Name" /></td>
<td><input type="text" v-model="contact.PhoneNo" /></td>
<td><input type="text" v-model="contact.EmailAddress" /></td>
<td>
<div v-if="contact.Id!=''">
<a href="#" v-on:click="updateContact(contact.Id,contact.Name,contact.PhoneNo,contact.EmailAddress)">修改</a>
<a href="#" v-on:click="deleteContactById(contact.Id)">删除</a>
</div>
<div v-else>
<a href="#" v-on:click="addContact(contact.Name,contact.PhoneNo,contact.EmailAddress)">添加</a>
</div>
</td>
</tr>
</thead>
</table>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
contactsList:[]
},
mounted() {
this.getAllContacts();
},
methods: {
getAllContacts: function () {
axios.get('@Url.Action("Get", "Contact")'
).then(
(response) => {
this.contactsList = [];
for (var i = 0; i < response.data.length; i++) {
this.contactsList.push(response.data[i]);
}
this.contactsList.push({ Id:"", Name: "", PhoneNo: "", EmailAddress: "" });
},
(response) => {
alert(response.status);
}
).catch(function (response) {
alert(response);
});
},
addContact: function (name, phoneno, emailaddress) {
axios.post('@Url.Action("Add", "Contact")', { contact: { Name: name, PhoneNo: phoneno, EmailAddress: emailaddress } }).then(
(response) => {
this.contactsList = [];
for (var i = 0; i < response.data.length; i++) {
this.contactsList.push(response.data[i]);
}
this.contactsList.push({ Id: "", Name: "", PhoneNo: "", EmailAddress: "" });
},
(response) => {
alert(response.status);
}
).catch(function (response) {
alert(response);
});
},
updateContact: function (id, name, phoneno, emailaddress) {
axios.post('@Url.Action("Update", "Contact")', { contact: { Id: id, Name: name, PhoneNo: phoneno, EmailAddress: emailaddress} }).then(
(response) => {
this.contactsList = [];
for (var i = 0; i < response.data.length; i++) {
this.contactsList.push(response.data[i]);
}
this.contactsList.push({ Id: "", Name: "", PhoneNo: "", EmailAddress: "" });
},
(response) => {
alert(response.status);
}
).catch(function (response) {
alert(response);
});
},
deleteContactById: function (id) {
axios.post('@Url.Action("Delete", "Contact")', { id: id }).then(
(response) => {
this.contactsList = [];
for (var i = 0; i < response.data.length; i++) {
this.contactsList.push(response.data[i]);
}
this.contactsList.push({ Id: "", Name: "", PhoneNo: "", EmailAddress: "" });
},
(response) => {
alert(response.status);
}
).catch(function (response) {
alert(response);
});
}
}
});
</script>
</body>
</html>
上述代码有几个需要说明的地方：
1、js部分：
a）我们将crud操作，封装到了一个vue对象当中。
b）mounted方法涉及到vue对象的生命周期（限于篇幅，这里不展开），但要知道一点mounted方法一般会将ajax初始化数据操作放在其中。
c）axios插件的ajax请求操作（比如：get、post）可以看下相关的开发文档，基本上看下例子就能上手开发。
2、html部分：
html部分用到了一些vue指令，比如v-for（遍历对象列表）、v-if / v-else（条件判断）、v-show（是否显示，带表达式）、v-model（模型绑定）。这部分知识是vue的核心知识，这里限于篇幅，不再细讲。先基本会用即可。
总结：通过这个程序可以发现Vue的一个很大的优点，就是使用Vue后真正做到了所谓的前后端分离。前端页面完全看不到夹渣的C#后端代码，代码显示很干净整洁。当然Vue还有其它优点，比如：相对容易学习（angular、react），虚拟dom、组件式开发，基于MVVM的数据双向绑定，Vue.js文件很小，插件丰富、对应的阿里移动端Vue.js解决方案-weex等等，还是非常值得学习和应用的，怪不得当前Vue.js这么火热。
最后有一个坑需要注意一下，就是js部分调用后台controller中的action时，传递参数是这样的：
{ contact: { Id: id, Name: name, PhoneNo: phoneno, EmailAddress: emailaddress}
对应的Controller的Update方法是这样的：
[HttpPost]
public JsonResult Update(Contact contact)
{
contactRepository.Post(contact);
return Json(contactRepository.Get());
}
其中的变量名，一定要一致，否则后台Controller中的Update方法接收不到前端页面传入的值。
代码下载链接：https://pan.baidu.com/s/1EmJfwceYKiXZu0mPRCyXhQ 密码：q9o3
ASP.NET MVC+Vue.js实现联系人管理的更多相关文章
- asp.net mvc + vue.js + axios.js
1.新建一个 MVC 应用程序 2.右键解决方案 添加VUE 3.搜索vue 1.安装axios.js ,用于数据请求,get , post axios
- Asp.net MVC + Vue.js
@{ Layout = null; } <!DOCTYPE html><html> <head> <meta charset="UTF-8" ...
- 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- 26、ASP.NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱 ...
- ASP.NET Core + Vue.js 开发
1.新建 项目文件夹 pro,在 VS CODE 打开终端,输入dotnet new mvc 命令,新建asp.net core项目. 2.在Startup.cs添加webpack的引用与配置 usi ...
- MVC + Vue.js 初体验(实现表单操作)
Vuejs http://cn.vuejs.org/ Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...
- ASP.NET没有魔法——ASP.NET MVC使用Area开发一个管理模块
之前的My Blog提供了列表的展示和文章显示功能,但是所有数据仍然只能通过数据库录入,为了完成最初的角色“作者”的用例,本章将介绍如何使用“Area”实现My Blog的管理功能. 根据功能分离代码 ...
- [Asp.net Mvc]为js,css静态文件添加版本号
方式一: 思路 string version = ViewBag.Version; @Scripts.RenderFormat("<script type=\"text/ja ...
- Asp.net MVC Vue Axios无刷新请求数据和响应数据
Model层Region.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; ...
随机推荐
- js的几个补充事件
在这里我做几个前面文章当中没有介绍的javascript补充事件 1.onscroll:当元素滚动条滚动时执行的事件: <div class="container"> ...
- js权威指南笔记
//如setTimeout的delay参数为0毫秒,那么指定的函数不会立即执行.只会把它放到队列中,等到前面处于等待状态的事件处理 //程序全部执行完成后,再调用它. function invoke( ...
- kettle 6.1 按时间循环增量抽取数据
场景:假设有一张表数据量很大,需要按一个时间来循环增量抽取 方法:主要是通过JOB自身调用,实现循环调用,类似于 函数自调用 的循环. 1.JOB全图: 2.获取增量时间,并设置增量时间环境变量 3. ...
- 系统架构-设计模式(适配器、观察者、代理、抽象工厂等)及架构模式(C/S、B/S、分布式、SOA、SaaS)(干货)
博客园首页是需要分享干货的地方,今天早上写的<HRMS(人力资源管理系统)-从单机应用到SaaS应用-系统介绍>内容下架了,所以我就按照相关规定,只分享干货,我把之前写完的内容整理发布上来 ...
- UVA - 1456 Cellular Network
题目大意: 手机在蜂窝网络中的定位是一个基本问题.如果蜂窝网络已经得知手机处于c1, c2,-,cn这些区域中的一个.最简单的方法是同一时候在这些区域中寻找手机.但这样做非常浪费带宽. 因为蜂窝网络中 ...
- jvm实战-jvm调优
jvm调优 jvm调优主要是内存管理方面的调优,包括各个代的大小,GC策略等. 代大小调优 JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内 ...
- 我的博客即将搬运同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=i5j7gwrxj9x5
我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=i5j7gwrxj9x5
- 如何修改启动jupyter的文件路径
1.cmd 2.jupyter notebook 工作目录路径 办法二: 1.启动pycharm 2.创建一个ipynb文件 3.运行该文件---在打印结果中找到网址,在网页中打开即可正常显示
- mysql官方驱动jar
问题描述: 在mysql5.7版本,发现登录不了,找不到原因.有人说是驱动的问题,下载最新的驱动,问题得到解决! 问题解决: 下载最新mysql-jar驱动,传统版本最新mysql-jar驱动版本5. ...
- js 动态生成html 触发事件传参字符转义
通常,在使用 JS 动态生成 html 的过程中,会嵌入相应的样式.事件等属性元素,而这时经常会出现所谓的 “单.双引号不够用” 的情况,别急,这时可以利用 html 语言中的转义字符来解决.下面就来 ...