Introduction to mvc 4 03 adding a view page
This presentation is the property of its rightful owner.
Sponsored Links
1 / 26

Introduction to MVC 4 03. Adding a View Page PowerPoint PPT Presentation


  • 60 Views
  • Uploaded on
  • Presentation posted in: General

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.

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Introduction to mvc 4 03 adding a view page

Introduction to MVC 403. Adding a View Page

NTPCUG

Tom Perkins, Ph.D.


This section

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


Change the index method

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

}


Add a view template

Add a View Template

  • Right click inside the Index method

  • Click Add View


Introduction to mvc 4 03 adding a view page

Click here


The add view dialog box

The Add View Dialog Box

Leave defaults alone

Click


New folder file created

New Folder/File Created …

New Folder

New File


The contents of the index cshtml file

The contents of the Index.cshtml file


Introduction to mvc 4 03 adding a view page

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


Vs 2012 only

VS 2012 only …

Right click on Index.cshtml

Click on View in Page Inspector


Run the app browse to http localhost xxxx helloworld

Run the app, browse to:http://localhost:xxxx/HelloWorld

From our View Page


Change the layout page master

Change the Layout page (master)

Shared Folder all pages use

Find the @RenderBody() line

Click on _Layout.cshtml


Renderbody

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.


Change the site title

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>


Run the app also check the about page

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


Change the title of the index view

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


The changed page

The changed page …

Changed Page title

Changed Primary Heading

Changed Secondary Heading


Passing data from the controller to the view

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


Best practices

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


Pass data from a controller to a view via the viewbag

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


Modify the welcome method in the helloworldcontroller

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)


Create a welcome v iew template

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


Add logic to display data in a loop

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


We ve built a controller and a view we ll build a model next

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


  • Login