Part 4:-Learn using Web API with Entity Framework(Adding an Admin View)

Rama Sagar
Posted by in ASP.NET Web API category on for Beginner level | Points: 250 | Views : 2595 red flag

A view requests information from the model that it needs for generating an output representation to the user

Introduction

This article shows how to add an admin view for the project which we have created previously


Objective

The Objective of this article is to allow users to create, edit, or delete Books,int he project by sending AJAX requests to the controller.

Lets start by adding the view

 Before we proceed please have a look at Part 3 article

  • Step 1 :In Solution Explorer, expand the Controllers folder and open the file named HomeController.cs. This file contains an MVC controller. Add a method named Admin.
using System;
using System.Web.Mvc;

namespace BooksStore.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();
        }

        //Admin Method
        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 right click on the return View() and click on Add View



In the Add View dialog, name the view "Admin". Select the check box labeled Create a strongly-typed view. Under Model Class, select "Book (BooksStore.Models)". Leave all the other options as their default values.



 





 Add the below Html to the view
@model BooksStore.Models.Book

@{
    ViewBag.Title = "Admin";
}

<div class="content">
    <div class="float-left">
        <ul id="update-products">
            <li>
                <div><div class="item">Book 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 lets add the link to the App.
 In Solution Explorer, expand the Views folder and then expand the Shared folder. Open the file named _Layout.cshtml. Locate the ul element with id = "menu", and an action link for the Admin view:
                       <ul id="menu">
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                            <li>@Html.ActionLink("Admin", "Admin", "Home")</li>
                        </ul>

 Debug the Application we can see the following ouput 

 

click on the Admin view and we will see the following output




Part 5:-Learn using Web API with Entity Framework(Adding Authorization and creation of Dynamic view)

Conclusion
In this article we have learned how to add an admin view..In Next part we will see How to provide authorization for admin and Dynamic view using Knockoutjs

Reference

http://msdn.microsoft.com/en-us/library/dd410123(v=vs.100).aspx

Page copy protected against web site content infringement by Copyscape

About the Author

Rama Sagar
Full Name: RamaSagar Pulidindi
Member Level: Silver
Member Status: Member,MVP
Member Since: 12/30/2012 1:51:40 AM
Country: India
ramasagar
http://www.ramasagar.com
A Software Profesional working in Microsoft .NET technologies since year 2008, and I work for Dake ACE. I am passionate about .NET technology and love to contribute to the .NET community at Dot Net Funda

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)