Getting Started With ASP NET MVC 4 Part 3 (Adding A View)
STEPS
1) Open your MvcMovie solution
2) Using ActionResult in Index Method
2-1) Edit Index Method in HelloWorldController Class.
2-2) If you run, you would get a default Index page.
3) Adding View Template
3-1) Right-click inside the Index Method
3-2) View Template settings.
3-3) Outcome
3-4) Add the following HTML under the <h2> tag.
3-5) Using View Inspector
3-6) Outcome.
4) Changing Views and Layout Pages
4-1) Find the default page ie Shared/_Layout.cshtml
4-2) Replace the text “your logo here ” with “MVC Movie”
4-3) Replace the contents of the title element with the following markup:
4-4) Test Run
5) Further edits on Index Hello World View
5-1) Open MvcMovie\Views\HelloWorld\Index.cshtml
5-2) Replace the existing codes with the following:
5-3) Test Run
6) Passing data from the Controller to the View
6-1) Edit HelloWorldController.cs
6-2) Build the solution
6-3) Add A View To The HelloWorldController
6-4) Edit the codes as follows:
6-5) Test Run.
This tutorial is based on http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-view
Continue from the previous tutorial, http://visualstudio-steps.blogspot.com/2014/09/getting-started-with-asp-net-mvc-4-part_19.html .
STEPS
1) Open your MvcMovie solution
2) Using ActionResult in Index Method
2-1) Edit Index Method in HelloWorldController Class.
Replace Index Method with the followings:
public ActionResult Index()
{
return View();
}
|
2-2) If you run, you would get a default Index page.
3) Adding View Template
3-1) Right-click inside the Index Method
3-2) View Template settings.
3-3) Outcome
The MvcMovie\Views\HelloWorld folder and the MvcMovie\Views\HelloWorld\Index.cshtml file are created.
3-4) Add the following HTML under the <h2> tag.
<p>Hello from our View Template!</p>
|
3-5) Using View Inspector
Note: This is optional only. You can use the usual Debug Mode here.
3-6) Outcome.
4) Changing Views and Layout Pages
4-1) Find the default page ie Shared/_Layout.cshtml
4-2) Replace the text “your logo here ” with “MVC Movie”
4-3) Replace the contents of the title element with the following markup:
<title>@ViewBag.Title - Movie App</title>
|
4-4) Test Run
Press F5 Key.
Add “/Home/About” to the default URL
5) Further edits on Index Hello World View
5-1) Open MvcMovie\Views\HelloWorld\Index.cshtml
5-2) Replace the existing codes with the following:
@{
ViewBag.Title = "Movie List";
}
<h2>My Movie List</h2>
<p>Hello from our View Template!</p>
|
5-3) Test Run
Press F5 Key.
Add “/HelloWorld” to the default URL
6) Passing data from the Controller to the View
Info:
A view template should never perform business logic or interact with a database directly
|
6-1) Edit HelloWorldController.cs
using System.Web;
using System.Web.Mvc;
namespace MvcMovie.Controllers
{
public class HelloWorldController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Welcome(string name, int numTimes = 1)
{
ViewBag.Message = "Hello " + name;
ViewBag.NumTimes = numTimes;
return View();
}
}
}
|
Info:
At this point, if you run the project, you will instead get the standard template view. You need to create specific view to output Messages and NumTimes value.
|
6-2) Build the solution
Go to Menu Bar. Select Build/Build Solution.
6-3) Add A View To The HelloWorldController
Right-click inside the Welcome Method and select Add View…
You get the following auto-generated codes.
6-4) Edit the codes as follows:
@{
ViewBag.Title = "Welcome";
}
<h2>Welcome</h2>
<ul>
@for (int i=0; i < ViewBag.NumTimes; i++) {
<li>@ViewBag.Message</li>
}
</ul>
|
6-5) Test Run.
Append “HelloWorld/Welcome?name=Scott&numtimes=4” after the default URL.
---
No comments:
Post a Comment