---
ASP NET MVC 4: MvcMusicStore Tutorial Part 1
STEPS
1) Run Visual Web Developer 2010 Express
2) Create a new project
2-1) Go to Menu Bar. Select File/New Project…
2-2) Define Project Settings
2-3) Select Template options
2-4) Project Files and Folders creation is done
3) Creating a simple controller
3-1) Go to Solution Explorer. Right-click Controllers folder, select Add/Controller…
3-2) In Add Controller Dialog Window, set as follows:
3-3) HomeController.cs is displayed in Code Editor
3-4) Change Index method to return a string value
3-5) Run
4) Adding a Store Controller
4-1) Go to Solution Explorer. Right-click Controllers folder, select Add/Controller…
4-2) In Add Controller Dialog Window, set as follows:
4-3) StoreController.cs is displayed in Code Editor
4-4) Defining methods to respond to URL Request
4-5) Run and test URL Requests
4-6) Using URL Request with query parameter
4-7) Test Run
4-8) Using URL Request with index value
4-9) Test Run
5) Adding a View Template
5-1) Change Index method to return an ActionResult
5-2) Add a corresponding View to the Index method
5-3) Accept default settings for the view
5-4) An Index view file is created in Views/Home folder
5-5) Edit Index.cshtml
6) Defining Common Layout for site
6-1) Create a shared Layout for the site
6-2) Create the Starting View to load the shared layout
6-3) Edit _ViewStart and _LayoutPage
6-4) Test Run
6-5) Add a CSS file
6-6) Add Image Resources
6-7) Test Run
STEPS
1) Run Visual Web Developer 2010 Express
2) Create a new project
2-1) Go to Menu Bar. Select File/New Project…
2-2) Define Project Settings
2-3) Select Template options
2-4) Project Files and Folders creation is done
3) Creating a simple controller
3-1) Go to Solution Explorer. Right-click Controllers folder, select Add/Controller…
3-2) In Add Controller Dialog Window, set as follows:
Controller name: HomeController
Template: Empty MVC controller
3-3) HomeController.cs is displayed in Code Editor
Info:
At this point, if you run (Press F5 Key), you will get an error “The view 'Index' or its master was not found…”
|
3-4) Change Index method to return a string value
HomeController.cs
|
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcMusicStore.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public string Index()
{
return "Hello from Home";
}
}
}
|
3-5) Run
Press F5 Key.
Info:
Note: Visual Web Developer includes the ASP.NET Development Server, which will run your website on a random free “port” number. In the screenshot above, the site is running at http://localhost:1291/, so it’s using port 1291.
Your port number will be different.
|
4) Adding a Store Controller
4-1) Go to Solution Explorer. Right-click Controllers folder, select Add/Controller…
4-2) In Add Controller Dialog Window, set as follows:
Controller name: StoreController
Template: Empty MVC controller
4-3) StoreController.cs is displayed in Code Editor
4-4) Defining methods to respond to URL Request
StoreController.cs
|
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcMusicStore.Controllers
{
public class StoreController : Controller
{
//
// GET: /Store/
public string Index()
{
return "Hello from Store.Index()";
}
//
// GET: /Store/Browse
public string Browse()
{
return "Hello from Store.Browse()";
}
//
// GET: /Store/Details
public string Details()
{
return "Hello from Store.Details()";
}
}
}
|
4-5) Run and test URL Requests
a) localhost:xxxx/Store/Index
b) localhost:xxxx/Store/Browse
c) localhost:xxxx/Store/Details
4-6) Using URL Request with query parameter
Edit as follows
StoreController.cs
|
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcMusicStore.Controllers
{
public class StoreController : Controller
{
//
// GET: /Store/
public string Index()
{
return "Hello from Store.Index()";
}
//
// GET: /Store/Browse?genre=Disco
public string Browse(string genre)
{
string message = HttpUtility.HtmlEncode("Store.Browse, Genre = " + genre);
return message;
}
//
// GET: /Store/Details
public string Details()
{
return "Hello from Store.Details()";
}
}
}
|
4-7) Test Run
Add “/Store/Browse?Genre=Disco” to the start up URL.
4-8) Using URL Request with index value
Edit as follows
StoreController.cs
|
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcMusicStore.Controllers
{
public class StoreController : Controller
{
//
// GET: /Store/
public string Index()
{
return "Hello from Store.Index()";
}
//
// GET: /Store/Browse?genre=Disco
public string Browse(string genre)
{
string message = HttpUtility.HtmlEncode("Store.Browse, Genre = " + genre);
return message;
}
//
// GET: /Store/Details/5
public string Details(int id)
{
string message = "Store.Details, ID = " + id;
return message;
}
}
}
|
4-9) Test Run
Add “/Store/Details/5” to the start up URL.
Info:
The various ways of responding to URL Request is made possible through the use of routes.MapRoute() command.
|
5) Adding a View Template
5-1) Change Index method to return an ActionResult
HomeController.cs
|
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcMusicStore.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
}
}
|
5-2) Add a corresponding View to the Index method
Position the text cursor within the Index action method, then right-click and select “Add View”.
5-3) Accept default settings for the view
5-4) An Index view file is created in Views/Home folder
5-5) Edit Index.cshtml
Index.cshtml
|
@{
ViewBag.Title = "Index";
}
<h2>This is the Home Page</h2>
|
6) Defining Common Layout for site
6-1) Create a shared Layout for the site
Create a new folder “Shared” in “Views” folder.
Right-click Shared folder and select Add/New Item…
Select MVC 4 Layout Page (Razor) and type a name “_LayoutPage.cshtml”
6-2) Create the Starting View to load the shared layout
In Solution Explorer, right-click Views, select Add/New Item…
Type a name “_ViewStart” and select the “_LayoutPage.cshtml” as the layout.
6-3) Edit _ViewStart and _LayoutPage
Edit _ViewStart.cshtml so that it contains only the statement to define the shared layout for the site.
Replace the _LayoutPage codes with the following codes
_LayoutPage.cshtml
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div id="header">
<h1>
ASP.NET MVC MUSIC STORE</h1>
<ul id="navlist">
<li class="first"><a href="/" id="current">Home</a></li>
<li><a href="/Store/">Store</a></li>
</ul>
</div>
@RenderBody()
</body>
</html>
|
6-4) Test Run
6-5) Add a CSS file
In Solution Explorer, right-click project name and select Add/New Folder
Type a name “Content”
Right-click Content and select Add/New Item…
Select Style Sheet type and enter a name “Site.css”
Add the following codes to Site.css
Site.css
|
*
{
margin: 0px;
padding: 0px;
border: none;
}
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #FBF9EF;
padding: 0px 6%;
}
#container
{
float: left;
}
#header
{
float: left;
width: 100%;
border-bottom: 1px dotted #5D5A53;
margin-bottom: 10px;
}
#header h1
{
font-size: 18px;
float: left;
background: url(/content/Images/logo.png) no-repeat;
padding: 45px 0px 5px 0px;
}
#promotion
{
height: 300px;
width: 700px;
background: url(/content/Images/home-showcase.png) no-repeat;
}
ul li a
{
font-size: 16px;
}
#main
{
overflow: hidden;
padding: 0 0 15px 10px;
float: left;
}
ul
{
list-style-type: square;
margin-left: 25px;
font-size: 14px;
}
ul#album-list
{
list-style: none;
margin-left: 0px;
}
ul#album-list li
{
height: 130px;
width: 100px;
float: left;
margin: 10px;
text-align: center;
}
ul#album-list li a, ul#album-list li .button
{
font-size: 13px;
float: left;
}
ul#album-list li a span
{
color: #9b9993;
text-decoration: underline;
}
#cart
{
float: right;
}
#update-message
{
color: #F6855E;
font-weight: bold;
}
.button, input[type=submit]
{
clear: both;
display: inline-block;
padding: 5px;
margin-top: 10px;
border: 1px;
background: #5e5b54;
color: #fff;
font-weight: bold;
}
.button a
{
color: #fff !important;
}
#footer
{
clear: both;
padding: 10px;
text-align: right;
border-top: 1px dotted #8A8575;
border-bottom: 1px dotted #8A8575;
font-family: Constantia, Georgia, serif;
}
/******************** Top Navigation ************************/
ul#navlist
{
float: right;
}
ul#navlist li
{
display: inline;
}
ul#navlist li a
{
border-left: 1px dotted #8A8575;
padding: 10px;
margin-top: 10px;
color: #8A8575;
text-decoration: none;
float: left;
}
ul#navlist li:first-child a
{
border: none;
}
ul#navlist li a:hover
{
color: #F6855E;
}
/********************* End top navigation ***************************/
p
{
margin-bottom: 15px;
margin-top: 0px;
}
h2
{
color: #5e5b54;
}
h2, h3
{
margin-bottom: 10px;
font-size: 16px;
font-style: italic;
font-weight: bold;
}
h3
{
color: #9B9993;
}
#header h1 a, h3 em
{
color: #5E5B54;
}
a:link, a:visited
{
color: #F6855E;
text-decoration: none;
font-weight: bold;
}
a:hover
{
color: #333333;
text-decoration: none;
font-weight: bold;
}
a:active
{
color: #006633;
text-decoration: none;
font-weight: bold;
}
/***************************** sidebar navigation ****************************/
#categories
{
font-family: Constantia, Georgia, serif;
list-style-type: none;
border-right: #5d5a53 1px dotted;
padding-right: 10px;
margin: 0 25px 0 0;
float: left;
}
#categories a:link, #categories a:visited
{
color: #9B9993;
text-decoration: none;
}
#categories a:hover
{
color: #F46739;
}
div#album-details p
{
margin-bottom: 5px;
color: #5e5b54;
font-weight: bold;
}
p em
{
color: #9b9993;
}
/* Form styles */
legend
{
padding: 10px;
font-weight: bold;
}
fieldset
{
border: #9b9993 1px solid;
padding: 0 10px;
margin-bottom: 10px;
clear: left;
}
div.editor-field
{
margin-bottom: 10px;
}
input[type=text], input[type=password], select
{
border: 1px solid #8A8575;
width: 300px;
}
/* Styles for validation helpers */
.field-validation-error {
color: #ff0000;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
border: 1px solid #ff0000;
background-color: #ffeeee;
}
.validation-summary-errors {
font-weight: bold;
color: #ff0000;
}
.validation-summary-valid {
display: none;
}
/* Tables */
table
{
border: 1px solid #000;
border-collapse: collapse;
color: #666666;
min-width: 500px;
width: 100%;
}
tr
{
border: 1px solid #000;
line-height: 25px;
}
th
{
background-color: #9b9993;
color: #000;
font-size: 13px;
text-align: left;
}
th, td
{
padding-left: 5px;
}
tr:hover
{
background-color: #fff;
}
|
6-6) Add Image Resources
Create a folder Images and save the images below into this folder.
home-showcase.png
logo.png
placeholder.gif
No comments:
Post a Comment