ASP.NET MVC+Vue.js实现联系人管理

最新推荐文章于 2024-08-01 12:19:19 发布

diaobiao8107

最新推荐文章于 2024-08-01 12:19:19 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签：测试后端前端 ViewUI

原文链接：http://www.cnblogs.com/guwei4037/p/9173928.html

本文介绍了如何结合ASP.NET MVC和Vue.js开发一个联系人管理应用。通过创建Model、Controller和Repository，实现了联系人的增删改查功能。在前端，Vue.js的使用简化了代码并实现了前后端分离。文章提到了Vue.js的核心特性如v-for、v-if/v-else等，并指出Vue.js的优点，包括易于学习、组件化开发和数据双向绑定。最后，作者分享了一个关于参数传递的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接触了一天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(), JsonRequestBehavior.AllowGet);
    }

    [HttpPost]