前端ASP.NET MVC4作爲一個項目，並將ASP.NET Web API作爲同一解決方案中的另一個項目 - 如何從前端調用WebAPI？

我有一個ASP.NET MVC4前端在我的解決方案一個項目，一個獨立的ASP.NET Web API在同一個解決方案的另一個項目。 Web API將包含我所有的CRUD操作。前端ASP.NET MVC4作爲一個項目，並將ASP.NET Web API作爲同一解決方案中的另一個項目 - 如何從前端調用WebAPI？

2個問題

我怎麼叫我的Web API從我的前端，以執行CRUD操作？我的Web API項目中定義了我的實體數據模型，我需要將我的前端視圖綁定到它，我該怎麼做？
一旦部署到我的網絡服務器，前端將駐留在一臺服務器上，並且Web API將駐留在另一臺服務器（持有大部分的Web服務的服務器）上。所以，我想大致相同的是，一旦部署完成，我將如何從前端調用Web API？我知道Web API只是簡單地用HTTP請求調用，但在將我的模型（在我的Web API項目中定義的）傳遞給我的Views（在我的前端項目中）方面，我該怎麼做？

來源

2013-09-16 Mike Marks

雖然凱文是正確的，我這樣做的非Ajax方法。請記住，我正在處理JSON數據，所以這是以JSON爲中心的。

在您的控制器頁面中，刪除與DbContext，Entity Framework等有關的所有內容。原因在於，默認情況下，控制器將通過調用DbContext來執行CRUD操作，而我們不希望這樣做。我們想調用WebAPI來做到這一點。

首先，在您的控制器聲明一些成員變量。控制器的其餘部分將利用這些：

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

在您的控制器，爲您的控制器構造函數，因爲這樣的：

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")); 
}

的東西，如替換索引操作的代碼以下。請注意，唯一相關的部分是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"); 
    } 
} 
```

替換類似下面的創建操作（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"); 
    } 
}

更換編輯操作（非HttpPost動作），如下所示。這有點棘手，因爲爲了編輯，你必須首先檢索記錄，所以基本上，編輯的HttpPost版本將包含一些類似的代碼，並附加一行代碼來執行編輯POST（PUT）。下面，我們通過傳遞一個特定的記錄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); 
} 
```

替換類似下面的編輯操作（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"); 
    } 
}

更換刪除操作（非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); 
}

最後，替代刪除操作（HttpPost動作）像下面這樣。再次，我們正在做一些類似於Edit動作的東西。我們正在獲取要刪除的記錄，將其轉換爲對象，然後將該對象傳遞給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"); 
}

來源

2013-09-17 15:28:39

您可以使用jQuery ajax method從客戶端調用Web API。但是，由於您是從Web API部署位置以外的站點調用的，您將不得不使用JSONP而不是JSON。看看這個QA to see how you use JSONP with Web API。您的模型將作爲JSON傳遞，您必須在客戶端渲染，而不是使用Razor在服務器端渲染它。我會使用類似Knockout的東西來在客戶端上創建一個View Model，它將把您的模型綁定到客戶端上的HTML元素。

來源

2013-09-16 13:55:05

前端ASP.NET MVC4作爲一個項目，並將ASP.NET Web API作爲同一解決方案中的另一個項目 - 如何從前端調用WebAPI？

回答

相關問題