public JsonResult CreateProduct(Product product) { bool createSuccess = true; Uri address = new Uri(_baseAddress, "/api/products"); using(var httpClient=new HttpClient()) { var response = httpClient.PostAsJsonAsync(address, product).Result; if (!response.IsSuccessStatusCode) createSuccess = false; } return Json(createSuccess, JsonRequestBehavior.AllowGet); }
接着，来到Index View页面中添加4个textbox用来输入Product Name,Count,Price,Description的信息以及一个Create Product按钮。
<div> <div>Create Product</div> <div> <table> <tr><td> Product Name:</td><td><input type="text" /></td></tr> <tr><td>Count:</td><td><input type="text" /></td></tr> <tr><td> Price:</td><td><input type="text" /></td></tr> <tr><td> Description:</td><td><input type="text" /></td></tr> </table> </div> <div> <div></div> <input type="button" value="Create Product" /> </div> </div>
为按钮Create Produc按钮t添加Ajax方法
$('#btnCreateProduct').click(function () { if ($('#txtCreateProductName').val().trim() != "" && $('#txtCreateCount').val().trim() != "" && $('#txtCreatePrice').val().trim() != "" && $('#txtCreateDescription').val().trim() != "") { var product = { ProductID: 0, ProductName: $('#txtCreateProductName').val(), Count: $('#txtCreateCount').val(), Price: $('#txtCreatePrice').val(), Description: $('#txtCreateDescription').val() }; $.ajax({ url: '/Product/CreateProduct', type: 'GET', data: product, dataType: 'json' }).success(function (result) { if (result != null && result) { $('#createMessage').html('Product create success.'); $("#btnGetProductList").trigger('click'); } }).error(function (data) { alert(data); }) } });
运行程序，加载Product列表。
点击Create Product按钮之前：
输入新增数据，点击Create Product按钮之后：
我们看到新增数据成功并显示到了Product列表中。
4.修改Product信息
这里我们创建5个textbox，用来输入Product ID,Product Name,Count,Price,Description的信息以及一个Update Product按钮。
首先，我们先完成在ProductController中使用HttpClient调用Web API中修改一条Product数据的方法。
public JsonResult UpdateProduct(Product product) { bool updateSuccess = true; Uri address = new Uri(_baseAddress, "/api/products"); using (var httpClient = new HttpClient()) { var response = httpClient.PutAsync<Product>(address, product, new JsonMediaTypeFormatter()).Result; if (!response.IsSuccessStatusCode) updateSuccess = false; } return Json(updateSuccess, JsonRequestBehavior.AllowGet); }
接着，来到Index View页面中添加5个textbox用来输入Product ID,Product Name,Count,Price,Description的信息以及一个Update Product按钮。
<div> <div>Update Product</div> <div> <table> <tr><td>Product ID:</td><td><input type="text" /></td></tr> <tr><td> Product Name:</td><td><input type="text" /></td></tr> <tr><td>Count:</td><td><input type="text" /></td></tr> <tr><td> Price:</td><td><input type="text" /></td></tr> <tr><td> Description:</td><td><input type="text" /></td></tr> </table> </div> <div> <div></div> <input type="button" value="Update Product" /> </div> </div>
为按钮Update Product按钮添加Ajax方法
$('#btnUpdateProduct').click(function () { if ($('#txtUpdateProductID').val().trim() != "" && $('#txtUpdateProductName').val().trim() != "" && $('#txtUpdateCount').val().trim() != "" && $('#txtUpdatePrice').val().trim() != null && $('#txtUpdateDescription').val().trim() != "") { var product = { ProductID: $('#txtUpdateProductID').val(), ProductName: $('#txtUpdateProductName').val(), Count: $('#txtUpdateCount').val(), Price: $('#txtUpdatePrice').val(), Description: $('#txtUpdateDescription').val() }; $.ajax({ url: '/Product/UpdateProduct', type: 'GET', data: product, dataType: 'json' }).success(function (result) { if (result != null && result) { $('#updateMessage').html('Product update success.'); $('#btnGetProductList').trigger('click'); } }).error(function (data) { alert(data); }) } });
运行代码，加载Product列表。
点击Update Create按钮之前：
这里我们修改第一条数据，输入修改信息，点击Update Product按钮之后：
我们看到Product ID为1的信息成功修改并显示到了Product列表中。
5.删除Product
这里我们创建1个textbox，用来输入Product ID的信息以及一个Delete Product按钮。
首先，我们先完成在ProductController中使用HttpClient调用Web API中删除一条Product数据的方法。