接触了一天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="123", EmailAddress="zhangsan@gmail.com" }, new Contact(){ Id=Guid.NewGuid().ToString(), Name="李四", PhoneNo="456", 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(), Jso