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";

}

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>

<title>@ViewBag.Title</title>

</head>

<body>

<h1>

ASP.NET MVC MUSIC STORE</h1>

<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;

}

{

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 ***************************/

{

margin-bottom: 15px;

margin-top: 0px;

}

{

color: #5e5b54;

}

h2, h3

{

margin-bottom: 10px;

font-size: 16px;

font-style: italic;

font-weight: bold;

}

{

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%;

}

{

border: 1px solid #000;

line-height: 25px;

}

{

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.

$C:\Z\TRG-ASPNET-4\TUTORIALS\101-MVC-MusicStore\MvcMusicStore-v3.0\MvcMusicStore-v3.0\MvcMusicStore-Assets\Content\Images\home-showcase.png$

home-showcase.png

$C:\Z\TRG-ASPNET-4\TUTORIALS\101-MVC-MusicStore\MvcMusicStore-v3.0\MvcMusicStore-v3.0\MvcMusicStore-Assets\Content\Images\logo.png$

logo.png

$C:\Z\TRG-ASPNET-4\TUTORIALS\101-MVC-MusicStore\MvcMusicStore-v3.0\MvcMusicStore-v3.0\MvcMusicStore-Assets\Content\Images\placeholder.gif$

placeholder.gif