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.
  
  

Add the following code in this file;

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

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace EntityAPI.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
            return View();
        }
        public ActionResult About()
        {
            ViewBag.Message = "Your app description page.";
            return View();
        }
        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";
            return View();
        }
        public ActionResult Admin()
        {
            //Creates the URI to the web API, and we store this in the view bag for later.
            string apiUri = Url.HttpRouteUrl("DefaultApi", new { controller = "admin", });
           ViewBag.ApiUrl = new Uri(Request.Url, apiUri).AbsoluteUri.ToString();
            return View();
        }
    }
}

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".
• In the Open an Add View dialog box check the "Create a strong typed view" Checkbox.
  
  
  
  
• Now click on the "OK" button.
  
  
  

Add the following code in this view:

@model EntityAPI.Models.Novel
@{
    ViewBag.Title = "Admin";
}
<h2>Admin</h2>
<div class="content">
    <div class="float-left">
        <ul id="update-products">
            <li>
                <div><div class="item">Novel ID</div><span></span></div>
                <div><div class="item">Name</div> <input type="text" /></div>
                <div><div class="item">Deal Price ($)</div> <input type="text" /></div>
                <div><div class="item">SellingPrice ($)</div> <input type="text" /></div>
                <div>
                    <input type="button" value="Update" />
                    <input type="button" value="Delete Item" />
                </div>
            </li>
        </ul>
    </div>
    <div class="float-right">
        <h2>Add New Product</h2>
        <form id="product">
            @Html.ValidationSummary(true)
            <fieldset>
                <legend>Contact</legend>
                @Html.EditorForModel()
                <p>
                    <input type="submit" value="Save" />
                </p>
            </fieldset>
        </form>
    </div>
</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:
  

  <li>@Html.ActionLink("Admin", "Admin", "Home")</li>

Step 4

Now execute the application:

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