前端 ASP.NET MVC4 作为一个项目，将 ASP.NET Web API 作为同一解决方案中的另一个项目 - 如

Question

我有一个 ASP.NET MVC4 前端作为解决方案中的一个项目，以及一个单独的 ASP.NET Web API 作为同一解决方案中的另一个项目。 Web API 将包含我的所有 CRUD 操作。

2 问题

1. 如何从前端调用 Web API 以执行 CRUD 操作？ 我在 Web API 项目中定义了实体数据模型，我需要将前端视图绑定到该模型，该怎么做？
将其部署到我的 Web 服务器后，前端将驻留在
2. 一台服务器上，Web API 将驻留在另一台服务器上（保存我们大多数 Web 服务的服务器）。 所以，我想按照同样的思路，一旦部署，我将如何从我的前端调用 Web API？ 我知道 Web API 只是用 HTTP 请求调用的，但是就将我的模型（在我的 Web API 项目中定义）传递到我的视图（在我的前端项目中）而言，我该怎么做？

Answer 1

虽然凯文是对的，但我是用非Ajax的方式这样做的。 请记住，我正在使用 JSON 数据，因此这以 JSON 为中心。

在控制器页面中，删除与 DbContext、实体框架等相关的任何内容。 原因是默认情况下，控制器希望通过调用 DbContext 来执行 CRUD 操作，而我们不希望这样做。 我们想调用 WebAPI 来执行此操作。

首先，在控制器中声明一些成员变量。 控制器的其余部分将利用这些：

    HttpClient client = new HttpClient();
    HttpResponseMessage response = new HttpResponseMessage();
    Uri contactUri = null;

1. 在控制器中，为控制器创建一个构造函数，如下所示：

   public ContactController()
   {
       // set base address of WebAPI depending on your current environment
       client.BaseAddress = new Uri("http://server/YourAPI/");
       // Add an Accept header for JSON format.
       client.DefaultRequestHeaders.Accept.Add(
           new MediaTypeWithQualityHeaderValue("application/json"));
   }
   

2. 将索引操作的代码替换为如下所示的内容。 请注意，唯一相关的部分是client.GetAsync()调用和var contacts分配。 对于此问题的上下文，其他所有内容都不是必需的。 client.GetAsync()中的值应该是控制器的名称，前面是您在 WebApiConfig 中设置的任何自定义路由.cs - 在我的例子中，我在路由中添加了api部分以区分 API 调用和普通调用：

   public ActionResult Index()
   {
       response = client.GetAsync("api/contact").Result;
       if (response.IsSuccessStatusCode)
       {
           var contacts = response.Content.ReadAsAsync<IEnumerable<Contact>>().Result;
           return View(contacts);
       }
       else
       {
           // add something here to tell the user hey, something went wrong
           return RedirectToAction("Index");
       }
   }
   

3. 将"创建"操作（"HttpPost 操作"）替换为如下所示的内容。 同样，唯一重要的部分是client.PostAsJsonAsync()部分 - 这就是所谓的 WebAPI 的 POST 操作，在我的情况下，它负责将新记录插入数据库：

   [HttpPost]
   [ValidateAntiForgeryToken]
   public ActionResult Create(Contact contact)
   {
       // Create a new product
       response = client.PostAsJsonAsync("api/contact", contact).Result;
       if (response.IsSuccessStatusCode)
       {
           return RedirectToAction("Index");
       }
       else
       {
           // add something here to tell the user hey, something went wrong
           return RedirectToAction("Index");
       }
   }
   

4. 将"编辑"操作（非 HttpPost 操作）替换为如下所示的内容。 这有点棘手，因为为了进行编辑，您必须先检索记录，因此基本上，HttpPost版本的Edit将包含一些类似的代码，以及执行编辑POST（PUT）的附加代码行。 下面，我们通过向 WebAPI 传递特定的记录 ID 来获取来自 WebAPI 的响应。 因此，就像索引 （GET） 一样，我们只传入 ID 做同样的事情，所以我们只返回一条记录。 然后，我们将响应转换为可以在视图中操作的实际对象：

   public ActionResult Edit(int id = 0)
   {
       response = client.GetAsync(string.Format("api/contact/{0}", id)).Result;
       Contact contact = response.Content.ReadAsAsync<Contact>().Result;
       if (contact == null)
       {
           return HttpNotFound();
       }
       return View(contact);
   }
   

5. 将"编辑"操作（"HttpPost "操作）替换为如下所示的内容。 下面，我们通过调用 client.GetAsync() 并将主键作为参数 （contact_id） 传入来编辑要编辑的记录。 然后，我们从该响应中获取 RequestUri 并保存它。 然后，我们调用client.PutAsJsonAsync()并传入 Uri.PathAndQuery（我们刚刚保存的内容）以及要编辑的对象。

   [HttpPost]
   [ValidateAntiForgeryToken]
   public ActionResult Edit(Contact contact)
   {
       response = client.GetAsync(string.Format("api/contact/{0}", contact.contact_id)).Result;
       contactUri = response.RequestMessage.RequestUri;
       response = client.PutAsJsonAsync(contactUri.PathAndQuery, contact).Result;
       if (response.IsSuccessStatusCode)
       {
           return RedirectToAction("Index");
       }
       else
       {
           // add something here to tell the user hey, something went wrong
           return RedirectToAction("Index");
       }
   }
   

6. 将"删除"操作（非 HttpPost 操作）替换为如下所示的内容。 因此，我们再次通过简单地调用client.GetAsync()并将其强制转换为我的应用程序知道的实际对象来从数据库中获取记录。

   public ActionResult Delete(int id = 0)
   {
       response = client.GetAsync(string.Format("api/contact/{0}", id)).Result;
       Contact contact = response.Content.ReadAsAsync<Contact>().Result;
       if (contact == null)
       {
           return HttpNotFound();
       }
       return View(contact);
   }
   

7. 最后，将"删除"操作（"HttpPost"操作）替换为如下所示的内容。 同样，我们正在执行类似于"编辑"操作的操作。 我们正在获取要删除的记录，将其强制转换为对象，然后将该对象传递到client.DeleteAsync()调用中，如下所示。

   [HttpPost, ActionName("Delete")]
   [ValidateAntiForgeryToken]
   public ActionResult DeleteConfirmed(int id)
   {
       response = client.GetAsync(string.Format("api/contact/{0}", id)).Result;
       contactUri = response.RequestMessage.RequestUri;
       response = client.DeleteAsync(contactUri).Result;
       return RedirectToAction("Index");
   }
   

Answer 2

您可以使用 jQuery ajax 方法从客户端调用 Web API。但是，由于您是从部署 Web API 的站点以外的站点调用的，因此您必须使用 JSONP，而不是 JSON。 查看此 QA，了解如何将 JSONP 与 Web API 结合使用。您的模型将作为 JSON 传递，您必须在客户端渲染，而不是使用 Razor 在服务器端渲染它。 我会使用类似 Knockout 的东西在客户端上创建一个视图模型，将您的模型绑定到客户端上的 HTML 元素。