MVC中使用Web API和EntityFramework

2021-02-12 22:20

阅读:483

最近做了一个项目技术预研:在ASP.NET MVC框架中使用Web API和EntityFramework,构建一个基础的架构,并在此基础上实现基本的CRUD应用。

以下是详细的步骤。

第一步

在数据库中创建一张数据表,表名为Customer,见下图:

技术分享图片

第二步

  • 打开 Visual Studio,新建项目。

  • 选择‘ASP.NET Web Application‘,命名为‘WebApi‘。
    技术分享图片

  • 我们要创建一个‘Web API‘,在模板中选择‘Web API‘,点击‘确定‘。
    技术分享图片

    第三步

    接下来我要添加一个类。

  • 右键点击这个 web api项目,添加一个‘ADO.NET Entity Data Model‘。
    技术分享图片

  • 添加‘EF Designer from database‘,点击‘下一步‘。
    技术分享图片

  • 在配置窗口中添加新连接,输入服务器名称,选择数据库,点击‘确定‘。
    技术分享图片

  • 点击‘下一步‘,选择要关联的数据表。
    技术分享图片

  • 点击‘完成‘。

    第四步

    现在的工作就是要为Wep Api添加控制器了。

  • 右键选择‘controllers‘文件夹。
    技术分享图片

  • 选择‘MVC5 Controller with views, using Entity Framework‘。
    技术分享图片

  • 点击‘添加‘。

  • 选择数据模型类Customer,选择Data context类文件,本例中为SystemTestEntity。

  • 设置控制器名称为CustomersController,点击‘添加‘。
    技术分享图片
    上述操作完成后,CustomerController.cs会自动生成。

CustomerController.cs

using System.Data.Entity;  
using System.Data.Entity.Infrastructure;  
using System.Linq;  
using System.Net;  
using System.Web.Http;  
using System.Web.Http.Description;  
using CRUDWebApiExam.Models;  
  
namespace CRUDWebApiExam.Controllers  
{  
    public class CustomersController : ApiController  
    {  
        private SystemTestEntities db = new SystemTestEntities();  
  
        // GET: api/Customers  
        public IQueryableGetCustomer()  
        {  
            return db.Customer;  
        }  
  
        // GET: api/Customers/5  
        [ResponseType(typeof(Customer))]  
        public IHttpActionResult GetCustomer(int id)  
        {  
            Customer customer = db.Customer.Find(id);  
            if (customer == null)  
            {  
                return NotFound();  
            }  
            return Ok(customer);  
        }  
  
        // PUT: api/Customers/5  
        [ResponseType(typeof(void))]  
        public IHttpActionResult PutCustomer(int id, Customer customer)  
        {  
            if (!ModelState.IsValid)  
            {  
                return BadRequest(ModelState);  
            }  
            if (id != customer.CustomerId)  
            {  
                return BadRequest();  
            }  
            db.Entry(customer).State = EntityState.Modified;  
            try  
            {  
                db.SaveChanges();  
            }  
            catch (DbUpdateConcurrencyException)  
            {  
                if (!CustomerExists(id))  
                {  
                    return NotFound();  
                }  
                else  
                {  
                    throw;  
                }  
            }  
            return StatusCode(HttpStatusCode.NoContent);  
        }  
  
        // POST: api/Customers  
        [ResponseType(typeof(Customer))]  
        public IHttpActionResult PostCustomer(Customer customer)  
        {  
            if (!ModelState.IsValid)  
            {  
                return BadRequest(ModelState);  
            }  
            db.Customer.Add(customer);  
            db.SaveChanges();   
            return CreatedAtRoute("DefaultApi", new { id = customer.CustomerId }, customer);  
        }  
  
        // DELETE: api/Customers/5  
        [ResponseType(typeof(Customer))]  
        public IHttpActionResult DeleteCustomer(int id)  
        {  
            Customer customer = db.Customer.Find(id);  
            if (customer == null)  
            {  
                return NotFound();  
            }  
            db.Customer.Remove(customer);  
            db.SaveChanges();  
            return Ok(customer);  
        }  
  
        protected override void Dispose(bool disposing)  
        {  
            if (disposing)  
            {  
                db.Dispose();  
            }  
            base.Dispose(disposing);  
        }  
  
        private bool CustomerExists(int id)  
        {  
            return db.Customer.Count(e => e.CustomerId == id) > 0;  
        }  
    }  
}  

运行这个 Web Api项目,你会看到下面的结果
技术分享图片

第五步

到此为止,web api已经构建成功了。接下来我们需要为这个web api服务添加消费对象了,这个消费对象就是本文要涉及的MVC项目。

  • 首先要添加一个model类,我们可以直接采用上文中的Customer类。右键点击models文件夹,添加类并命名。本例中,我直接命名为Customer.cs。
    Customer.cs
using System;  
using System.ComponentModel.DataAnnotations;  
  
namespace MVCPersatantion.Models  
{  
    public class Customer  
    {  
        [Display(Name = "CustomerId")]  
        public int CustomerId { get; set; }  
        [Display(Name = "Name")]  
        public string Name { get; set; }  
        [Display(Name = "Address")]  
        public string Address { get; set; }  
        [Display(Name = "MobileNo")]  
        public string MobileNo { get; set; }  
        [Display(Name = "Birthdate")]  
        [DataType(DataType.Date)]  
        public DateTime Birthdate { get; set; }  
        [Display(Name = "EmailId")]  
        public string EmailId { get; set; }          
    }   
}  
  • customer类添加完成后,接下来需要添加一个ViewModel文件夹,并在里面新建一个CustomerViewModel.cs文件。
    CustomerViewModel.cs
using MVCPersatantion.Models;  
  
namespace MVCPersatantion.ViewModel  
{  
    public class CustomerViewModel  
    {  
        public Customer customer { get; set; }  
    }  
}

第六步

我已经添加了一个消费web api服务的类,现在我还需要添加一个Client类。

  • 右键点击models文件夹,添加类文件CustomerClient.cs。
    CustomerClient.cs
using System;  
using System.Collections.Generic;  
using System.Net.Http;  
using System.Net.Http.Headers;  
  
namespace MVCPersatantion.Models  
{  
    public class CustomerClient  
    {  
        private string Base_URL = "http://localhost:30110/api/";  
  
        public IEnumerablefindAll()  
        {  
            try  
            {  
                HttpClient client = new HttpClient();  
                client.BaseAddress = new Uri(Base_URL);  
                client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));  
                HttpResponseMessage response = client.GetAsync("customers").Result;  
  
                if (response.IsSuccessStatusCode)  
                    return response.Content.ReadAsAsync>().Result;  
                return null;  
            }  
            catch  
            {  
                return null;  
            }  
        }  
        public Customer find(int id)  
        {  
            try  
            {  
                HttpClient client = new HttpClient();  
                client.BaseAddress = new Uri(Base_URL);  
                client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));  
                HttpResponseMessage response = client.GetAsync("customers/" + id).Result;  
  
                if (response.IsSuccessStatusCode)  
                    return response.Content.ReadAsAsync().Result;  
                return null;  
            }  
            catch  
            {  
                return null;  
            }  
        }  
        public bool Create(Customer customer)  
        {  
            try  
            {  
                HttpClient client = new HttpClient();  
                client.BaseAddress = new Uri(Base_URL);  
                client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));  
                HttpResponseMessage response = client.PostAsJsonAsync("customers", customer).Result;  
                return response.IsSuccessStatusCode;  
            }  
            catch  
            {  
                return false;  
            }  
        }  
        public bool Edit(Customer customer)  
        {  
            try  
            {  
                HttpClient client = new HttpClient();  
                client.BaseAddress = new Uri(Base_URL);  
                client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));  
                HttpResponseMessage response = client.PutAsJsonAsync("customers/" + customer.CustomerId, customer).Result;  
                return response.IsSuccessStatusCode;  
            }  
            catch  
            {  
                return false;  
            }  
        }  
        public bool Delete(int id)  
        {  
            try  
            {  
                HttpClient client = new HttpClient();  
                client.BaseAddress = new Uri(Base_URL);  
                client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));  
                HttpResponseMessage response = client.DeleteAsync("customers/" + id).Result;  
                return response.IsSuccessStatusCode;  
            }  
            catch  
            {  
                return false;  
            }  
        }  
    }  
}

细心的朋友们可能已经发现,我的代码中有一些重复代码。实际应用中我们可以抽取成公用代码,这样任何地方都能够使用了。这里为了清楚的阐述过程,所以写了一些重复的代码。

我们看第一行private string Base_URL = "http://localhost:50985/api/",这个Base_URL是web api的服务地址。

接下来就可以编写Insert、Update、Delete、Select的业务逻辑了。

第七步

右键点击Controllers文件夹,添加一个名为Customer控制器,控制器中添加服务客户端调用的方法。

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Mvc;  
using MVCPersatantion.Models;  
using MVCPersatantion.ViewModel;  
  
namespace MVCPersatantion.Controllers  
{  
    public class CustomerController : Controller  
    {  
        // GET: Customer  
        public ActionResult Index()  
        {  
            CustomerClient CC = new CustomerClient();  
            ViewBag.listCustomers = CC.findAll();   
            return View();  
        }  
        [HttpGet]  
        public ActionResult Create()  
        {  
            return View("Create");  
        }  
        [HttpPost]  
        public ActionResult Create(CustomerViewModel cvm)  
        {  
            CustomerClient CC = new CustomerClient();  
            CC.Create(cvm.customer);  
            return RedirectToAction("Index");  
        }  
         
        public ActionResult Delete(int id)  
        {  
            CustomerClient CC = new CustomerClient();  
            CC.Delete(id);  
            return RedirectToAction("Index");  
        }  
        [HttpGet]  
        public ActionResult Edit(int id)  
        {  
            CustomerClient CC = new CustomerClient();  
            CustomerViewModel CVM = new CustomerViewModel();  
            CVM.customer = CC.find(id);  
            return View("Edit",CVM);  
        }  
        [HttpPost]  
        public ActionResult Edit(CustomerViewModel CVM)  
        {  
            CustomerClient CC = new CustomerClient();  
            CC.Edit(CVM.customer);  
            return RedirectToAction("Index");  
        }  
    }  
}  

第八步

  • 创建视图页面Index.cshtml。

  • 在Index页面中添加代码。
    Index.cshtml

@{
    ViewBag.Title = "Index";
}

h2>Indexh2>

div align="center">
    @Html.ActionLink("Create", "Create", "Customer", new { area = "" }, null)
    br />br />
    table cellpadding="2"
           class="table"
           cellspacing="2"
           border="1">
        tr class="btn-primary">

            th>
                CustomerId
            th>
            th> Nameth>
            th> Addressth>
            th> MobileNoth>
            th> Birthdateth>
            th> EmailIdth>
            th> Actionth>
        tr>
        @foreach (var Cust in ViewBag.listCustomers)
        {
            tr class="btn-success">
                td>
                    @Cust.CustomerId
                td>
                td>
                    @Cust.Name
                td>
                td>
                    @Cust.Address
                td>
                td>
                    @Cust.MobileNo
                td>
                td>
                    @Cust.Birthdate.ToString("dd/MM/yyyy")
                td>
                td>
                    @Cust.EmailId
                td>
                td>
                    a onclick="return confirm(‘确定要删除这条数据?‘)"
                       href="@Url.Action("Delete","Customer",new {id= Cust.CustomerId})">Deletea> ||
                    a href="@Url.Action("Edit","Customer",new {id= Cust.CustomerId})">Edita>
                   @*@Html.ActionLink("Edit", "Edit", "Customer", new { id = Cust.CustomerId })*@
                td>

            tr>
        }
    table>
div>
  • 添加新增数据模块Create。

  • 在Customer控制器中添加create方法,在view中增加Create.cshtml。

Create.cshtml

@model WebApiMVC.ViewModel.CustomerViewModel

@{
    ViewBag.Title = "Create";
}

h2>Createh2>

div align = "center" >
@using (Html.BeginForm("create", "Customer", FormMethod.Post))
{
    table class="table">
        tr>
            td>
                @Html.LabelFor(model => model.customer.Name)
            td>

            td>
                @Html.TextBoxFor(model => model.customer.Name)
            td>
        tr>
        tr>
            td>
                @Html.LabelFor(model => model.customer.Address)
            td>

            td>
                @Html.TextBoxFor(model => model.customer.Address)
            td>
        tr>
        tr>
            td>
                @Html.LabelFor(model => model.customer.MobileNo)
            td>

            td>
                @Html.TextBoxFor(model => model.customer.MobileNo)
            td>
        tr>
        tr>
            td>
                @Html.LabelFor(model => model.customer.Birthdate)
            td>

            td>
                @Html.TextBoxFor(model => model.customer.Birthdate)
            td>
        tr>
        tr>
            td>
                @Html.LabelFor(model => model.customer.EmailId)
            td>

            td>
                @Html.TextBoxFor(model => model.customer.EmailId)
            td>
        tr>
        tr>
            td>td>

            td>
                input type="submit"  value="保存" />
            td>
        tr>
    table>
}
    div>
  • 添加修改数据模块Edit。

  • 在Customer控制器中添加edit方法,在view中增加Edit.cshtml。

Edit.cshtml

@{
    ViewBag.Title = "Edit";
}

@model WebApiMVC.ViewModel.CustomerViewModel

h2> Edit h2>
div align="center" width="500px">
    @using (Html.BeginForm("Edit", "Customer", FormMethod.Post))
    {
        table class="table"
               width="400px"
               cellpadding="20">
            tr class="btn-default">
                td>
                    @Html.LabelFor(model => model.customer.Name)
                td>

                td>
                    @Html.TextBoxFor(model => model.customer.Name)
                td>
            tr>
            tr>
                td>
                    @Html.LabelFor(model => model.customer.Address)
                td>

                td>
                    @Html.TextBoxFor(model => model.customer.Address)
                td>
            tr>
            tr>
                td>
                    @Html.LabelFor(model => model.customer.MobileNo)
                td>

                td>
                    @Html.TextBoxFor(model => model.customer.MobileNo)
                td>
            tr>
            tr>
                td>
                    @Html.LabelFor(model => model.customer.Birthdate)
                td>

                td>
                    @Html.TextBoxFor(model => model.customer.Birthdate)
                td>
            tr>
            tr>
                td>
                    @Html.LabelFor(model => model.customer.EmailId)
                td>

                td>
                    @Html.TextBoxFor(model => model.customer.EmailId)
                td>
            tr>
            tr>
                td> td>

                td>
                    input type="submit" value="保存" />   a class="btn-primary" href="@Url.Action("Index ","Customer ")"> 返回 a>
                    @Html.HiddenFor(model => model.customer.CustomerId)
                td>
            tr>
        table>
    }
div>

最终项目代码已经完成了。这时候我们运行项目试试看了。但还有一点要注意的是,我们必须同时运行web api和mvc项目。怎么办呢?其实只要在项目属性里设置就可以了。

  • 右键解决方案,选择属性(Properties)。

技术分享图片

  • 接来下在启动项目选项中,选择多项目启动,在Action中设置两个项目同时启动。

  • 运行项目,看看CRUD操作的执行结果。

Select
技术分享图片

Insert
技术分享图片

Update
技术分享图片

Delete
技术分享图片

这是整个技术预研的过程,本文末尾位置提供代码下载。

 作者:阿子
 博客地址:http://www.cnblogs.com/yayazi/


评论


亲,登录后才可以留言!