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