1 / 26

Introduction to MVC 4 03. Adding a View Page

Introduction to MVC 4 03. Adding a View Page. NTPCUG Tom Perkins, Ph.D. This section:. View template files are used to generate HTML responses back to the user We’ll create a view template file using the Razor View engine. Razor files have a . cshtml extension. Razor.

dexter
Download Presentation

Introduction to MVC 4 03. Adding a View Page

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Introduction to MVC 403. Adding a View Page NTPCUG Tom Perkins, Ph.D.

  2. This section: • View template files are used to generate HTML responses back to the user • We’ll create a view template file using the Razor View engine. • Razor files have a .cshtmlextension Razor View template file HTML Response to user

  3. Change the Index method • Current Index method returns a string. • Change it to return a View object. Controller method or Action Method public ActionResult Index() { return View(); }

  4. Add a View Template • Right click inside the Index method • Click Add View

  5. Click here

  6. The Add View Dialog Box Leave defaults alone Click

  7. New Folder/File Created … New Folder New File

  8. The contents of the Index.cshtml file

  9. Add the following HTML under the <h2> tag. • <p>Hello from our View Template!</p> • The complete MvcMovie\Views\HelloWorld\Index.cshtml file is shown below. • @{ • ViewBag.Title = "Index"; • } • <h2>Index</h2> • <p>Hello from our View Template!</p>

  10. VS 2012 only … Right click on Index.cshtml Click on View in Page Inspector

  11. Run the app, browse to:http://localhost:xxxx/HelloWorld From our View Page

  12. Change the Layout page (master) Shared Folder all pages use Find the @RenderBody() line Click on _Layout.cshtml

  13. RenderBody • Placeholder • All view-specific pages show up here • View pages are “wrapped” in layout page • When you select the About link • The Views\Home\About.cshtmlview is rendered inside the RenderBody method.

  14. Change the site title • Change “your logo here” to “MVC Movie”: <div class="float-left"> <p class="site-title">@Html.ActionLink("MVC Movie", "Index", "Home")</p> </div> Replace the title element: <title>@ViewBag.Title - Movie App</title>

  15. Run the app; also check the “About” page Note the changed title Changes in the Layout template to the title will be reflected in all the web pages

  16. Change the title of the Index View Open MvcMovie\Views\HelloWorld\Index.cshtml Change Page title ViewBag is an object in the view template @{ ViewBag.Title = "Movie List"; } <h2>My Movie List</h2> <p>Hello from our View Template!</p> Change Primary Heading Change Secondary Heading

  17. The changed page … Changed Page title Changed Primary Heading Changed Secondary Heading

  18. Passing data from the Controller to the View • Controller classes • Invoked for an incoming URL request • Where you write code to: • Handle incoming browser requests • Retrieve data from a database • Decide what type of response to send back to the browser • Call a View class to generate and format an HTML response back to the browser

  19. Best Practices • Controllers provide data to views. • A view template should never perform business logic or interact with a database directly. • View should work only with data provided by controller (Separation of Concerns) Controller Data View

  20. Pass data from a Controller to a View via the ViewBag … URL containing Message, NumTimes Parameters: Message, NumTimes HelloWorldController, Welcome Action ViewBag Object Welcome View Browser HTML

  21. Modify the Welcome method in the HelloWorldController using System.Web; using System.Web.Mvc; namespace MvcMovie.Controllers { public class HelloWorldController : Controller { public ActionResult Index() { return View(); } public ActionResult Welcome(string name, intnumTimes = 1) { ViewBag.Message = "Hello " + name; ViewBag.NumTimes = numTimes; return View(); } } } Automatic Binding to query string ViewBag can contain anything (dynamic)

  22. Create a Welcomeview template • F6- compile the project • Inside the Welcome method: • Right-Click • Select Add View • Click Add on the Add View dialog box • The Welcome.cshtml will be added to the project

  23. Add logic to display data in a loop • Modify Welcome.cshtml … @{ ViewBag.Title = "Welcome"; } <h2>Welcome</h2> <ul> @for (inti=0; i < ViewBag.NumTimes; i++) { <li>@ViewBag.Message</li> } </ul> • Run the app: • http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4

  24. We’ve built a Controller and a View …We’ll build a Model next …

More Related