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