Web API CRUD Operations And Consume Service In ASP.NET MVC Application

Kindly don't forget to unzip package_content_1.zip and package_content_2.zip and keep their contents in the 'WebApiServiceProvider\packages' folder. Also, make changes to connection strings accordingly in both the solution.

Step 4. Consuming Web API Service In MVC Application.

• Create an Empty MVC project as below.
  
• Create a Product model class as created in the WebApiService project.
• Create ServiceRepository.cs in the Repository folder to consume the web API service and create ServiceUrl as a key and as a value in the web. config (port number changes according to the server).

  <add key="ServiceUrl" value="http://localhost:52956/"></add>
  

• Add the below DLL in the references.
  • Net
  • Net.HTTP
  • Net.Http.Formatting

ServiceRepository.cs

Service Repository is created to act as a reusable module for requesting, posting, updating, and deleting data in WebAPI. This is used by any action method in the Controller which is created in the next step and avoids duplication of this code.

public class ServiceRepository  
{  
    public HttpClient Client { get; set; }  

    public ServiceRepository()  
    {  
        Client = new HttpClient();  
        Client.BaseAddress = new Uri(ConfigurationManager.AppSettings["ServiceUrl"].ToString());  
    }  
    public HttpResponseMessage GetResponse(string url)  
    {  
        return Client.GetAsync(url).Result;  
    }  
    public HttpResponseMessage PutResponse(string url, object model)  
    {  
        return Client.PutAsJsonAsync(url, model).Result;  
    }  
    public HttpResponseMessage PostResponse(string url, object model)  
    {  
        return Client.PostAsJsonAsync(url, model).Result;  
    }  
    public HttpResponseMessage DeleteResponse(string url)  
    {  
        return Client.DeleteAsync(url).Result;  
    }  
}  

Create a Controller to handle a request for different action methods and navigate to the corresponding view.

ProductController.cs

The product Controller in the MVC application is created to handle the request received from the user action and to serve the response accordingly. The code for the product controller is given below.

public class ProductController : Controller  
{  
    // GET: Product  
    public ActionResult GetAllProducts()  
    {  
        try  
        {  
            ServiceRepository serviceObj = new ServiceRepository();  
            HttpResponseMessage response = serviceObj.GetResponse("api/showroom/getallproducts");  
            response.EnsureSuccessStatusCode();  
            List<Models.Product> products = response.Content.ReadAsAsync<List<Models.Product>>().Result;  
            ViewBag.Title = "All Products";  
            return View(products);  
        }  
        catch (Exception)  
        {  
            throw;  
        }  
    }  

    public ActionResult EditProduct(int id)  
    {  
        ServiceRepository serviceObj = new ServiceRepository();  
        HttpResponseMessage response = serviceObj.GetResponse("api/showroom/GetProduct?id=" + id.ToString());  
        response.EnsureSuccessStatusCode();  
        Models.Product products = response.Content.ReadAsAsync<Models.Product>().Result;  
        ViewBag.Title = "All Products";  
        return View(products);  
    }  

    public ActionResult Update(Models.Product product)  
    {  
        ServiceRepository serviceObj = new ServiceRepository();  
        HttpResponseMessage response = serviceObj.PutResponse("api/showroom/UpdateProduct", product);  
        response.EnsureSuccessStatusCode();  
        return RedirectToAction("GetAllProducts");  
    }  

    public ActionResult Details(int id)  
    {  
        ServiceRepository serviceObj = new ServiceRepository();  
        HttpResponseMessage response = serviceObj.GetResponse("api/showroom/GetProduct?id=" + id.ToString());  
        response.EnsureSuccessStatusCode();  
        Models.Product products = response.Content.ReadAsAsync<Models.Product>().Result;  
        ViewBag.Title = "All Products";  
        return View(products);  
    }  

    [HttpGet]  
    public ActionResult Create()  
    {  
        return View();  
    }  

    [HttpPost]  
    public ActionResult Create(Models.Product product)  
    {  
        ServiceRepository serviceObj = new ServiceRepository();  
        HttpResponseMessage response = serviceObj.PostResponse("api/showroom/InsertProduct", product);  
        response.EnsureSuccessStatusCode();  
        return RedirectToAction("GetAllProducts");  
    }  

    public ActionResult Delete(int id)  
    {  
        ServiceRepository serviceObj = new ServiceRepository();  
        HttpResponseMessage response = serviceObj.DeleteResponse("api/showroom/DeleteProduct?id=" + id.ToString());  
        response.EnsureSuccessStatusCode();  
        return RedirectToAction("GetAllProducts");  
    }  
}  

Views are created in the ConsumeWebApi MVC application to consume the service.

GetAllProducts.cshtml

.cshtml represents Views (UI) and this View displays all the products available which are received from API calls in the corresponding method.

@model IEnumerable<ConsumeWebApi.Models.Product>

@{
    ViewBag.Title = "GetAllProducts";
}

<h2>GetAllProducts</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.ProductName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Quantity)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Price)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.ProductName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Quantity)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
            @Html.ActionLink("Edit", "EditProduct", new { id = item.ProductId, name = item.ProductName, quantity = item.Quantity, prod = item }) |
            @Html.ActionLink("Details", "Details", new { id = item.ProductId }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.ProductId })
        </td>
    </tr>
}
</table>

Create. cshtml

This View allows the user to create a product and insert it into the database through a WebAPI call which is done in the corresponding action method.

@model ConsumeWebApi.Models.Product   

@{   
    ViewBag.Title = "Create";   
}   

<h2>Create</h2>   

@using (Html.BeginForm())   
{   
    @Html.AntiForgeryToken()   
       
    <div class="form-horizontal">   
        <h4>Product</h4>   
        <hr />   
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })   
        <div class="form-group">   
            @Html.LabelFor(model => model.ProductName, htmlAttributes: new { @class = "control-label col-md-2" })   
            <div class="col-md-10">   
                @Html.EditorFor(model => model.ProductName, new { htmlAttributes = new { @class = "form-control" } })   
                @Html.ValidationMessageFor(model => model.ProductName, "", new { @class = "text-danger" })   
            </div>   
        </div>   

        <div class="form-group">   
            @Html.LabelFor(model => model.Quantity, htmlAttributes: new { @class = "control-label col-md-2" })   
            <div class="col-md-10">   
                @Html.EditorFor(model => model.Quantity, new { htmlAttributes = new { @class = "form-control" } })   
                @Html.ValidationMessageFor(model => model.Quantity, "", new { @class = "text-danger" })   
            </div>   
        </div>   

        <div class="form-group">   
            @Html.LabelFor(model => model.Price, htmlAttributes: new { @class = "control-label col-md-2" })   
            <div class="col-md-10">   
                @Html.EditorFor(model => model.Price, new { htmlAttributes = new { @class = "form-control" } })   
                @Html.ValidationMessageFor(model => model.Price, "", new { @class = "text-danger" })   
            </div>   
        </div>   

        <div class="form-group">   
            <div class="col-md-offset-2 col-md-10">   
                <input type="submit" value="Create" class="btn btn-default" />   
            </div>   
        </div>   
    </div>   
}   

<div>   
    @Html.ActionLink("Back to List", "GetAllProducts")   
</div>

Details. cshtml

This View allows the user to see the particular product through a WebAPI call which is done in the corresponding action method.

@model ConsumeWebApi.Models.Product

@{
    ViewBag.Title = "Detail";
}

<h2>Detail</h2>

<div>
    <h4>Product</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.ProductName)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.ProductName)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Quantity)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Quantity)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Price)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Price)
        </dd>
    </dl>
</div>
<p>
    @Html.ActionLink("Edit", "EditProduct", new { id = Model.ProductId }) |
    @Html.ActionLink("Back to List", "GetAllProducts")
</p>

EditProduct.cshtml

This View allows the user to edit products and update the database through a WebAPI call which is done in the corresponding action method.

@model ConsumeWebApi.Models.Product

@{
    ViewBag.Title = "EditProduct";
}

<h2>EditProduct</h2>

@using (Html.BeginForm("Update", "Product", FormMethod.Post))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Product</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.ProductId)

        <div class="form-group">
            @Html.LabelFor(model => model.ProductName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ProductName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ProductName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Quantity, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Quantity, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Quantity, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Price, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Price, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Price, "", new { @class = "text-danger" })
            </div>
        </div>


        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>

}

<div>
    @Html.ActionLink("Back to List", "GetAllProducts")
</div>

Step 5. Set Project Startup Order

• This step is necessary and has to be set up because this solution needs the WebApiService application to keep running and serve the request. The ConsumeWebAPI application will create a request to WebApiService and receive a response back.
• So, in order to make two projects to keep up and running, this step is performed.
• Whereas if WebApiService is hosted in IIS, then only one project that consumes the service can be started, i.e., MVC or Postman.
  

Output Screens

1. Get All Products View.
   
2. Create Product View.
   
3. Edit Product View.
   
4. Detailed View of a product.
   
5. Product table data in Product table of SQL Database.
   

Conclusion

Web API can be self-hosted (service and consuming application in the same solution) as discussed in this example or it can be deployed on an IIS server. JSON is the widely used request type in services as it is supported by a wide range of client devices. Enjoy creating your own service.