Introduction to MVC 4 03. Adding a View Page NTPCUG Tom Perkins, Ph.D.

Slides:



Advertisements
Similar presentations
EIONET Training Zope Page Templates Miruna Bădescu Finsiel Romania Copenhagen, 28 October 2003.
Advertisements

PHP I.
HTML Basics Customizing your site using the basics of HTML.
JavaScript FaaDoOEngineers.com FaaDoOEngineers.com.
Sharpen Your MVC Views with Razor By Jon Marozick.
UNIT 12 LO4 BE ABLE TO CREATE WEBSITES Cambridge Technicals.
INTRODUCTION TO ASP.NET MVC AND EXAMPLE WALKTHROUGH RAJAT ARYA EFECS - OIM DAWG – 4/21/2009 ASP.NET MVC.
Introduction to PHP MIS 3501, Fall 2014 Jeremy Shafer
Introduction to MVC Action Methods, Edit View, and a Search Feature NTPCUG Dr. Tom Perkins.
Ruby on Rails Model of MVC. Model-View-Controller Paradigm A way of organizing a software system Benefits: Isolation of business logic from the user interface.
11 Getting Started with ASP.NET Beginning ASP.NET 4.0 in C# 2010 Chapters 5 and 6.
The Web Warrior Guide to Web Design Technologies
Part 03 – Sorting, Paging, and Grouping Entity Framework NTPCUG Tom Perkins.
Razor. Slide 2 Remember this? Browser Web Server HTTP Request HTTP Response (Web page / code) Client code (script) Interpret request Generate HTML and.
Web Page Development Identify elements of a Web Page Start Notepad
1 Introduction to OBIEE: Learning to Access, Navigate, and Find Data in the SWIFT Data Warehouse Lesson 8: Printing and Exporting an OBIEE Analysis This.
COMPUTERS AND INFORMATION SYSTEMS HTML. How the Web Works To access a web site  Enter its address (URL) in the address box of your browser 
DAT602 Database Application Development Lecture 15 Java Server Pages Part 1.
Tutorial: Introduction to ASP.NET Internet Technologies and Web Application 4 th February 2010.
8 Chapter Eight Server-side Scripts. 8 Chapter Objectives Create dynamic Web pages that retrieve and display database data using Active Server Pages Process.
Introduction to MVC Adding Model Classes NTPCUG Tom Perkins, Ph.D.
CIS 375—Web App Dev II ASP.NET 2 Introducing Web Forms.
Ch6:creating consistent looking web sites. Master pages Master page defines a combination of fixed content and content place holder to hold the web page(.aspx)
Server-side Scripting Powering the webs favourite services.
Linking Images to Other Areas within a Blackboard Course Darek Sady.
Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.
11 Web Services. 22 Objectives You will be able to Say what a web service is. Write and deploy a simple web service. Test a simple web service. Write.
Introduction to ASP.NET MVC Information for this presentation was taken from Pluralsight Building Applications with ASP.NET MVC 4.
CS 415 N-Tier Application Development By Umair Ashraf June 28,2013 National University of Computer and Emerging Sciences Lecture # 5 Microsoft MVC3 Architecture.
1 Data Bound Controls II Chapter Objectives You will be able to Use a Data Source control to get data from a SQL database and make it available.
Microsoft FrontPage 2003 Illustrated Complete Using a Dynamic Web Template.
HTML Hyper Text Markup Language. What is an HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup.
HTML INTRODUCTION. What is HTML?  HTML stands for Hypertext Markup Language  Developed in 1990  Hidden code that helps us communicate with others on.
Internet Technologies and Web Application Web Services With ASP.NET Tutorial: Introduction to.
Introduction to MVC Introduction NTPCUG Tom Perkins, Ph.D.
Introduction to MVC Controllers NTPCUG Tom Perkins, Ph.D.
HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place.
Getting started with ASP.NET MVC Dhananjay
8 Chapter Eight Server-side Scripts. 8 Chapter Objectives Create dynamic Web pages that retrieve and display database data using Active Server Pages Process.
HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.
Step One: Introduction. Welcome to Follow My Clients! Once you log in, on the home page is your dash board. Here you will find your quick access buttons.
CSC 2720 Building Web Applications Basic Frameworks for Building Dynamic Web Sites / Web Applications.
Creating and Editing a Web Page
HINDU STYLE PORTFOLIO TEMPLATE
11 Getting Started with ASP.NET Beginning ASP.NET in C# and VB Chapters 1 and 2.
Introduction  “M” “V” “C” stands for “MODEL” “VIEW” “CONTROLLER”. ASP.NET MVC is an architecture to develop ASP.NET web applications in a different manner.
11 User Controls Beginning ASP.NET in C# and VB Chapter 8.
Virtual techdays INDIA │ 9-11 February 2011 SESSION TITLE Kamala Rajan S │ Technical Manager, Marlabs.
Introduction to JavaScript LIS390W1A Web Technologies and Techniques 24 Oct M. Cameron Jones.
: Information Retrieval อาจารย์ ธีภากรณ์ นฤมาณนลิณี
Creating Web Pages with Links, Images, and Embedded Style Sheets
HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place Programming language.
Ruby on Rails. Web Framework for Ruby Designed to make it easier to develop, deploy, and maintain web applications Design with Model-View-Controller –almost.
Basic HTML Page 1. First Open Windows Notepad to type your HTML code 2.
HTML And the Internet. HTML and the Internet ► HTML: HyperText Markup Language  Language in which all pages on the web are written  Not Really a Programming.
BIT 286: Web Applications ASP.Net MVC. Objectives Applied MVC overview Controllers Intro to Routing Views ‘Convention over configuration’ Layout files.
Making the website. Get your folders sorted first Create a new folder in “N” called “My hockey website” Create folders inside called “Documents”, “images”
1 Adding a Model. We have created an MVC web app project Added a controller class. Added a view class. Next we will add some classes for managing movies.
1 Using MVC 6. MVC vs. ASP Web Forms Both run under ASP.NET Can coexist In Web Forms, browser requests page. xxx.aspx and xxx.aspx.cs on the server Page.
Jim Fawcett CSE686 – Internet Programming Spring 2014
Introduction to OBIEE:
Jim Fawcett CSE686 – Internet Programming Spring 2012
Social Media And Global Computing Introduction to The MVC Pattern
ASP MVP Web applications and Razor
MIS Professor Sandvig MIS 324 Professor Sandvig
Play Framework: Introduction
Views Views is where we store HTML and lots of contents, we are going to display our user. So, we have models that interact with database. We have controllers,
Integrating JavaScript and HTML
05 | Customizing Views Jon Galloway | Development Platform Evangelist
5.00 Apply procedures to organize content by using Dreamweaver. (22%)
Presentation transcript:

Introduction to MVC 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 View template file Razor HTML Response to user

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

Add a View Template Right click inside the Index method Click Add View

Click here

The Add View Dialog Box Leave defaults alone Click

New Folder/File Created … New Folder New File

The contents of the Index.cshtml file

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

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

Run the app, browse to: From our View Page

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

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.cshtml view is rendered inside the RenderBody method.

Change the site title Change “your logo here” to “MVC Movie", "Index", "Home") Replace the title - Movie App

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 ViewBag.Title = "Movie List"; } My Movie List Hello from our View Template! Open MvcMovie\Views\HelloWorld\Index.cshtml Change Page title Change Primary Heading Change Secondary Heading ViewBag is an object in the view template

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

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 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 View Data

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

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, int numTimes = 1) { ViewBag.Message = "Hello " + name; ViewBag.NumTimes = numTimes; return View(); } Automatic Binding to query string ViewBag can contain anything (dynamic)

Create a Welcome view 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 Modify Welcome.cshtml ViewBag.Title = "Welcome"; } (int i=0; i < ViewBag.NumTimes; i++) } Run the app: –

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