Using Entity Framework in Web API Part-3

Introduction

My previous article in this series explained how to create an API Controller with the Entity Framework. This article explains how to add a view for adding the HTML code.

Step 1

Add the "Admin" action method in the HomeController.cs file.

  • In the "Solution Explorer".
  • Expand the "Controller" folder.
  • Select the "HomeController.cs" file.
    Show Home Controller

Add the following code in this file;

  1. public ActionResult Admin()    
  2. {    
  3.     //Creates the URI to the web API, and we store this in the view bag for later.    
  4.     string apiUri = Url.HttpRouteUrl("DefaultApi"new { controller = "admin", });    
  5.     ViewBag.ApiUrl = new Uri(Request.Url, apiUri).AbsoluteUri.ToString();    
  6.     return View();    
  7. } 

The entire code of the "HomeController" looks like this:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. namespace EntityAPI.Controllers  
  7. {  
  8.     public class HomeController : Controller  
  9.     {  
  10.         public ActionResult Index()  
  11.         {  
  12.             ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";  
  13.             return View();  
  14.         }  
  15.         public ActionResult About()  
  16.         {  
  17.             ViewBag.Message = "Your app description page.";  
  18.             return View();  
  19.         }  
  20.         public ActionResult Contact()  
  21.         {  
  22.             ViewBag.Message = "Your contact page.";  
  23.             return View();  
  24.         }  
  25.         public ActionResult Admin()  
  26.         {  
  27.             //Creates the URI to the web API, and we store this in the view bag for later.  
  28.             string apiUri = Url.HttpRouteUrl("DefaultApi"new { controller = "admin", });  
  29.            ViewBag.ApiUrl = new Uri(Request.Url, apiUri).AbsoluteUri.ToString();  
  30.             return View();  
  31.         }  
  32.     }  
  33. }   
Step 2

Now add the View file as in the following:

  • In the "HomeController.cs" file.
  • Right-click on the "Admin" action method.

    Select Add View

  • Select "Add View".
  • In the Open an Add View dialog box check the "Create a strong typed view" Checkbox.

    Add a View

  • Now click on the "OK" button.

    Admin View in Solution Explorer

Add the following code in this view:

  1. @model EntityAPI.Models.Novel  
  2. @{  
  3.     ViewBag.Title = "Admin";  
  4. }  
  5. <h2>Admin</h2>  
  6. <div class="content">  
  7.     <div class="float-left">  
  8.         <ul id="update-products">  
  9.             <li>  
  10.                 <div><div class="item">Novel ID</div><span></span></div>  
  11.                 <div><div class="item">Name</div> <input type="text" /></div>  
  12.                 <div><div class="item">Deal Price ($)</div> <input type="text" /></div>  
  13.                 <div><div class="item">SellingPrice ($)</div> <input type="text" /></div>  
  14.                 <div>  
  15.                     <input type="button" value="Update" />  
  16.                     <input type="button" value="Delete Item" />  
  17.                 </div>  
  18.             </li>  
  19.         </ul>  
  20.     </div>  
  21.     <div class="float-right">  
  22.         <h2>Add New Product</h2>  
  23.         <form id="product">  
  24.             @Html.ValidationSummary(true)  
  25.             <fieldset>  
  26.                 <legend>Contact</legend>  
  27.                 @Html.EditorForModel()  
  28.                 <p>  
  29.                     <input type="submit" value="Save" />  
  30.                 </p>  
  31.             </fieldset>  
  32.         </form>  
  33.     </div>  
  34. </div>   

Step 3

Now add a link in the "_Layout.cshtml" file as in the following:

  • In the "Solution Explorer".
  • Expand the "Views" folder and select the Shared folder.
  • Open the "_Layout.cshtml" file and add this single line of code:
    1. <li>@Html.ActionLink("Admin""Admin""Home")</li>

Step 4

Now execute the application:

Display ahmin Link

Here the "Admin" link is visible, we click on the Admin link. It is looks llike this:

Display Admin form