MVC 4 Spindustry Training

Cont. MVC separates the user interface of an application into three main aspects: The Model The View The Controler

The Model A set of classes that describes the data you’re working with as well as the business rules for how the data can be changed and manipulated

The View Defines how the application’s UI will be displayed

The Controller A set of classes that handles communication from the user, overall application flow, and application-specific logic.

MVC as Applied to Web Frameworks Models: Represent domain objects that encapsulate: data stored in a database code to manipulate the data code to enforce domain-specific business logic Example: encapsulating Entity Framework

Cont. View: Controller: Template to dynamically generate HTML Class that manages the relationship between the View and the Model It responds to user input, talks to the model, and decides which view to render (if any).

A Pattern MVC is a pattern that can be applied to different frameworks ASP.NET MVC The MVC pattern has been applied to ASP.NET. This does not mean that it is the same as MVC running in other places.

ASP.NET MVC 3 10 months after MVC 2 The Razor view engine Support for .NET 4 Data Annotations Improved model validation Greater control and flexibility with support for dependency resolution and global action filters Better JavaScript support with unobtrusive JavaScript, jQuery Validation, and JSON binding Use of NuGet to deliver software and manage dependencies throughout the platform

Razor View Engine Code-focused templating for HTML generation Compact, expressive, and fluid Not a new language Easy to learn Works with any text editor IntelliSense No XML-like heavy syntax

ASP.NET MVC 4 Features include: ASP.NET Web API Enhancements to the default project templates Mobile project template using jQuery Mobile Display Modes Task Support for Asynchronous Controllers Bundling and Minification

ASP.NET Web API Referred to as Web API A framework that offers the ASP.NET MVC development style but is tailored to writing HTTP services. (service-oriented design) Several MVC features have been adopted for HTTP Service domain: Routing Model Binding and Validation Filters Scaffolding Easy Unit Testability

Cont. Web API also adds a few new concepts and features to the HTTP service development: HTTP programming model Action dispatching based on HTTP verbs Content negotiation Code-based configuration

ASP.NET MVC 5 http://www.asp.net/mvc/mvc5

Enhancements to the default project templates

Cont.

Display Modes A convention-based approach to allow selecting different views based on the browser making the request. Index.cshtml vs Index.Mobile.cshtml You can also register your own custom criteria. Index.WinPhone.cshtml

Bundling and Minification Same as ASP.NET 4.5 Works on scripts and CSS Minifies the request via several techniques Compresses the size of CSS via several techniques You can create custom bundles to contain specific scripts and reference them with a single URL

Cont.

Included Open Source Libraries Json.NET Included in MVC 4 as a part of the Web API to support serializing data to JSON format allowing for: Data contracts Anonoymous types Dynamic types Dates TimeSpans Object reference presevation Indenting Camel casing LINQ to JSON is also included along with automatic conversion from JSON to XML

Cont. DotNetOpenAuth: MVC 4 also provides an OAuthWebSecurity class Used to support OpenID and Oauth-based logins Facebook Microsoft Google Twitter MVC 4 also provides an OAuthWebSecurity class

App_Start

Cont. AuthConfig.cs BundleConfig.cs FilterConfig.cs: Used to configure security settings, including sites for OAuth login. BundleConfig.cs Used to register bundles used by the bundling and minification system. By default it inlcudes jQuery, jQueryUI, jQuery valiation, Modernizr, and default CSS references FilterConfig.cs: Used to register global MVC filters. By default the HandlerErrorAttribute is registered. You can put other filter registrations here.

Cont. Filters: An action filter is an attribute that you can apply to a controller action -- or an entire controller -- that modifies the way in which the action is executed. The ASP.NET MVC framework includes several action filters: OutputCache – This action filter caches the output of a controller action for a specified amount of time. HandleError – This action filter handles errors raised when a controller action executes. Authorize – This action filter enables you to restrict access to a particular user or role.

Cont. RouteConfig.cs WebApiConfig.cs Contains routing Used to register Web API routes, as well as set any additional Web API configuration settings

Open Source Release May 2012 the ASP.NET Web Stack open source announcement marked the transition of ASP.NET MVC, ASP.NET Web Pages, and ASP.NET Web API from open source licensed code to fully open source projects. All code changes and issue tracking for these projects is done in public code repositories, and these projects are allowed to accept community code contributions if the team agrees that the changes make sense. http://aspnetwebstack.codeplex.com/SourceControl/list/changesets

Installing MVC 4 Visual Studio 2012 (included) Can be installed on: Visual Studio 2010 SP1 Visual Web Developer 2010 Express SP1 Can be installed side-by-side previous versions of MVC

Templates

Cont. Internet Application: Intranet Application: Basic Template: Contains the beginnings of an MVC web application, including basic account management functions that use ASP.NET Membership. Intranet Application: Added in ASP.NET MVC 3 tools update. Similar to the Internet Application template, but the account management functions use Windows accounts rather than ASP.NET Membership. Basic Template: Minimal. Has basic folders, CSS, and MVC application infrastructure in place, but no more. You need to do work in order to get the application to run. For experienced MVC developers that don’t want the predefined items in the project.

Cont. Empty: Mobile Application: Web API template: Only has the assemblies and the basic folder structure in place Mobile Application: Preconfigured with jQuery Mobile. Includes mobile visual themes, a touch-optimized UI, and support for Ajax navigation Web API template: Similar to the Internet Application template but is streamlined for Web API development

View Engines ASPX Razor

Testing Just check the box! You can add other Test Frameworks like NUnit, MbUnit, or xUnit if you want to. http://msdn.microsoft.com/en-us/library/dd381614.aspx

MVC Application Structure Controllers – Controller classes that handle URL request go here (MVC 4, controller classes can go anywhere) Models – Classes that represent and manipulate data and business objects go here Views – UI template files that are responsible for rendering output go here Scripts – JavaScript files and scripts go here Images – images used on your site go here

Cont. Content – CSS and other site content, other than images and scripts, goes here Filters – Filter code goes here App_Data – Store data files that you read and write to, here App_Start – Configuration code for features like Routing, Bundling and Web API goes here

ASP.NET MVC does not require this Directory Structure.

Conventions “Convention over configuration” ASP.NET MVC is heavily convention-based Uses Directory-naming structure when resolving view templates. Allows you to omit the location path when referencing views from within a Controller class.

Cont. Each controller’s class name ends with Controller LegalController, LegalServicesController, HomeController One Views directory for all the views of your application Views that controllers use live in a subdirectory of the Views main directory and are named according to the controller name(minus the Controller suffix) Views for the LegalController would live in /Views/Legal Reusable UI elements live in a similar structure, but in a Shared directory in the Views folder

2. Controllers

Controller Basics Model View Controller: 1st Controller basics, then the other stuff. Have a look at the HomeController Responsible for deciding what will happen when you browse to the homepage of the website.

The Controller’s Role Responsible for responding to user input, making changes to the model in response to user input if needed. Controllers are concerned with the flow of the application, working with data that comes in and providing data going out to the relevant view.

Cont. The URL tells the routing mechanism (later chapter) which controller class to instantiate and which action method to call, and supplies the required arguments to that method. The controller’s method then decides which view to use, and that view then renders the HTML. The controller’s method could return something other than a view.

Cont. There is a relationship between the URL and the METHOD on a controller class. Not a relationship between the URL and a FILE on the web server. MVC serves up the results of method calls, not dynamically generated pages. (More about routing in later chapter)

IController

ControllerBase

Controller Class

Controller Actions Add additional methods for additional scenarios. These methods are called Controller Actions or Action Methods They respond to URL request, perform the appropriate actions, and return a response back to the browser or user that invoked the URL

MVC Request processing pipeline

Modifying the LegalServicesController The Browse and Details methods to cover additional scenarios.

Observation Browsing to /LegalServices/Browse caused the browse method of the LegalServicesController to be executed. NO extra configuration was needed. This is routing in action. More later We created the controller class which was very simple. Inherits from System.Web.Mvc.Controller We returned text to the browser without a model or a view.

Cont. /LegalServices/Details/5 vs. /LegalServices/Details?ID=5 The default routing convention in MVC will automatically pass the URL segment to you as a parameter. The default parameter is named “ID” If your parameter is not “ID” then use the “?” or configure routing.

Oversimplified The previous example was not common and was oversimplified. You will almost always use Views You will most often return ActionResult instead of strings And routing is more complex that shown.

Basic Controllers Summary Controllers orchestrate the interactions of the user, the model objects and the views. They are responsible for: responding to the user input Manipulating the appropriate model objects And then selecting the appropriate view to display back to the user in response to the initial input

ActionResult Before talking about Views, let’s look at ActionResults http://weblogs.asp.net/rajbk/archive/2010/05/03/actionresult-types-in-mvc2.aspx http://msdn.microsoft.com/en-us/library/system.web.mvc.actionresult(v=vs.100).aspx

ActionResult type

3. Views

The View The user’s first impression of your site starts with the View Responsible for providing the user interface to the user. The view transforms a model into a format ready to be presented to the user. The view examines the model object and transforms the contents to HTML

Cont. Note: Not all views render HTML, but HTML is the most common case More info on alternate types of content later.

Example

Convention The Views directory contains a folder for your controller, with the same name as the controller, but without the controller suffix. [Take a look] HomeController has views in the Home directory Within the view folder (also called controller folder) there’s a view file for each action method, named the same as the action method. This is how views are associated to an action method. An action method can return a ViewResult via the View() method.

View() Method When the view name isn’t specified, the ViewResult returned by the action method applies a convention to locate the view. It first looks for a view with the same name as the action within the /Views/ControllerName directory. “Ex: /views/home/Index.cshtml” The View() method is overloaded. You can supply a view name to render a different view. “ex: View(“MyView”)” It will still look in the same directory, but will look for the “MyView.cshtml” file. View(“~/Views/DifferentDirectory/Index.cshtml”) To get to a different directory, provide the full path to that directory. You must provide the file extension as well. This bypasses the internal lookup mechanism.

ViewData and ViewBag Passing information from the Controller to the View Data is passed from the controllers to the views via a ViewDataDictionary (a specialized dictionary class) called ViewData. You can use standard dictionary syntax: ViewData[“CurrentTime”] = DateTime.Now; ViewBag is a dynamic wrapper around ViewData The ViewBag leverages the C# 4 keyword “dynamic” The syntax is simplified: ViewBag.CurrentTime = DateTime.Now; Note: @Html.TextBox(“name”, ViewBag.Name) won’t compile because of the dynamic type. Try: @Html.TextBox(“name”, (string)ViewBag.Name) or use ViewData[“Name”] instead See page 51 Note

Exercise Create a simple View

Strongly Typed Views You can add a collection or list of items to the ViewBag:

Cont. Instead of adding a collection or list of items to the ViewBag and passing it to the view, and then iterating through it in the view, the ViewData object has a Model property that can be set by using the overload of the View() method.

Cont.

Namespaces To make it easier to deal with the class names you can add a namespace by using the @using MyApp.Models (foldername) Or if used frequently add the namespace to the web.config

View Models There can be only one model in the ViewData.Model object What happens if you need additional items that aren’t in the Model object? You could add that data to the ViewBag and be done, but not everyone likes this

Cont View Model A better name would be (View Specific Model) Not MVVM Used to display a variety of data that comes from different places. Aggregating data into a single Model that can be used by a view. Ex: Case Info, Lawyer Info, and User Info that needs to be displayed by a single View You could also just add the info to a ViewBag and skip creating a View Model It would work but it wouldn’t be strongly typed

Cont.

The Add View dialog View Name View Engine Create a strongly-typed view Model Class Scaffold Template Reference Script Libraries Create a partial view Use a layout or master page ViewStart.cshtml

Scaffold Template Empty Create Delete Details Edit List Creates an empty view. Only the model type is specified using the @model syntax Create Creates a view with a form for creating new instances of the model. Generates a label and input field for each property of the model type Delete Creates a view with a form for deleting existing instances of the model. Displays a label and the current value for each property of the model Details Creates a view that displays a label and the value for each property of the model type Edit Creates a view with a form for editing existing instances of the model. Generates a label and input field for each property of the model type. List Creates a view with a table of model instances. Generates a column for each property of the model type. Makes sure to pass an Ienumerable<yourModelType> to this view from your action method. The view also contains links to actions for performing the create / edit / delete operations

Reference Script Libraries This option is used to indicate whether the view your are creating should include references to a set of JavaScript files if it makes sense for the view. By default, the _Layout.cshtml file references the main jQuery library, but doesn’t reference the jQuery Validation library or the Unobtrusive jQuery Validation library. Check the box to reference these libraries when doing Edit view, or Create view.

Create as a Partial View A partial view is not a full view. The layout option will be disabled if you select this option No <html> tag or <head> tag at the top of the view

Use a Layout or MasterPage Determines whether or not the view you are creating will reference a layout (or master page) or will be self-contained. For Razor view engines, specifiying a layout is not necessary if you choose to use the default layout because the layout is already specified in the _ViewStart.cshtml file. This option can be used to override the default Layout file.

Razor View Engine What is Razor? Introduced in ASP.NET MVC 3 and is the default view engine moving forward Provides a clean, lightweight, simple view engine. Provides a streamlined syntax for expressing views Minimizes the amount of syntax and extra characters.

Cont.

Cont. C# syntax has the .cshtml file extention VB - .vbhtml File Extension signals that the Razer parser should be used

@ Just type the @ symbol in the HTML and insert some code The @ symbol is used to transition from markup to code and sometimes to transition back to markup @{} @(item).Models @@ to escape Use parenthesis whenever there is ambiguity

HTML Encoding Razor expressions are automatically HTML encoded. This is great for mitigating XSS @{ string message = “<script>alert(‘hi there’);</script>”; } <span>@message</span> This statement will not create an alert box

HTML.Raw() You can use the HTML.Raw() method to return a string that Razor will not encode. You can also create an instance of HTMLString

Cont.

@Ajax.JavaScriptStringEncode Razor’s automatic HTML encoding is not sufficient for displaying user input within JavaScript When setting variables in JavaScript to values supplied by the user, it’s important to use JavaScript string encoding and not just HTML encoding. http://localhost:49693/home/escript?name=Jon\x3cscript\x3e%20alert(\x27pwnd\x27)%20\x3c/script\x3e http://localhost:49693/home/escript?name=<script>alert('bob')</script>

Code blocks Ref: page 63 @{}

Implicit Code Expression <Span>@Model.Message</span> Code expressions are evaluated and written to the response. Code expressions are always HTML encoded

Explicit Code Expression <span>Product ID: @(PID)<span>

Unencoded Code Expression <span>@Html.Raw(model.Message)</span>

Code Block @{ int x = 900; string y = “bob is cool”; } Blocks of code are simply sections of code that are executed. Useful for declaring variables that you may need in your code later

Combining Text and Markup @foreach(var item in items){ <span>Item: @item.Name.</span> }

Mixing Code and Plain Text @if(showMessage){ <text>This is plain text</text> } @if (showMessage){ this is plain text.

Server-side comments @* *@

Calling a Generic Method @(Html.Amethod<TheType>()) Use parenthesis just like with explicit code expressions.

Layouts Same purpose as MasterPages Maintain a consistent look and feel across multiple views within your application Simpler syntax that MasterPages and greater flexability Contains one or more placeholders that the other views can provide content for.

Cont.

Cont. Looks like a standard Razor view, but has specific place holders. @RenderBody Placeholder where views using this layout will have their main content rendered.

Cont. @RenderSection(“Footer”) @RenderSection(“Footer”, required:false) @section Footer{ This is <i>footer</i> content! } @if(IsSectionDefined(“Footer”)){ RenderSection(“Footer”); Else{ <span>Some default content</span> Or use Templated Razor Delagates (Page 392 (Later))

ViewStart _ViewStart.cshtml Specifies the default layout Any view can override this layout and choose a different one.

Partial View Return a Partial View in the form of a PartialViewResult via the PartialView() method. A Partial View does not specify a layout Useful in partial update scenarios using AJAX.

4. Models

The Model An object that represents the data in the application. Often corresponds to tables in the database, but they don’t have to. Controller action methods which return an ActionResult can pass a model object to the view.

Cont. You may need to figure out what the model should represent or how it should be implemented. This may be based on business requirements or conversations with business owners or customers. What problem are you trying to solve? List? Edit? Create? Delete?

Scaffolding Generates the boilerplate code you need for create, read, update, and delete (CRUD) functionality in an application. Scaffolding templates can examine the type definition for a model, then generate a controller and the controller’s views. It knows how to name the controllers, how to name the views, what code needs to go in each component, and where to place all the pieces within the project. It takes care of the boring work

Scaffolding templates Empty Controller Controller with Empty Read/Write actions API Controller with Empty Read/Write Actions Controller with Read/Write actions and Views, using Entity Framework

Empty Controller Class that derives from Controller Index is the only action in the controller, with not code inside

Controller with Empty Read/Write actions Adds a controller with Index, Details, Create, Edit, and Delete You still need to add code to make it work

API Controller with Empty Read/Write Actions Derived from ApiController base class. You can use this class to build a Web API for your application

Controller with Read/Write actions and Views, Using Entity Framework Generates the controller with Index, Details, Create, Edit and Delete actions Also Generates all the required views and code to persist and retrieve information from a database. When you select the model class, the scaffolding examines all the properties of your model and uses the info to build controllers, views, and data access code. To generate the Data Access Code, the scaffolding also needs the name of the DataContext object, if it exist. If not the scaffolding can create one for you.

Scaffolding and EF Entity Framework (EF) is and object-relational mapping framework. It understands how to store .NET objects in a relational database and retrieve those same objects given a LINQ query.

Code First EF supports a Code-First style of development Start storing and retrieving information in SQL server without creating a database schema or opening a Visual Studio designer Write .NET classes and EF figures out how, and where, to store instances of those classes. This is why your properties in your model object are virtual. Marking them as virtual, gives EF a hook into your classes and enables features like an efficient change tracking mechanism. EF needs to know when a property value on a model changes, in case it needs to update the datasource.

Database first or Code first Model-first Schema-first Both supported along with code-first

Code First Conventions If you have a class named Laywer, EF will create a table named Laywers If you have a property named LawyerId, EF will assume that it’s the Key value This too is by convention

DbContext Class Derive from the DbContext class One or more properties of type DbSet<t> t is the type of object you want to persist Public class LegalDB : DbContext { public DbSet<Laywer> Lawyers { get; set;} public DbSet<Case> Cases { get; set;} }

Cont. The DbContext can be created manually or automatically via the create controller dialog

Cont. Change to Virtual Methods for EF

LINQ Overview of LINQ Overview of Lamda

Eager vs. Lazy Loading Eager loading: Lazy Loading Note: page 80 var jails = db.Jails.Include(j => j.Cells); Brings all of the related objects on the first call Lazy Loading Brings all of the related objects when touched But this can cause a query for every item touched 20 Jails with could cause 21 extra queries to the database Note: page 80

The Views The Scaffolding created views in the appropriate folder Index, edit, delete, details, create

Examine the views Examine the views that were created by the scaffolding Make changes

EF and the Database In Code-first, EF attempts to use convention over configuration as much as possible. If you don’t configure specific mappings from your models to database tables and columns, EF uses conventions to create a database schema. If you don’t configure a specific db connection to use at runtime, EF creates on using a convention.

Database Initializer To allow the EF to re-create an existing database: DropCreateDatabaseAlways DropCreateDatabaseIfModelChanges System.Data.Entity.Database.SetInitializer(new System.Data.Entity.DropCreateDatabaseIfModelChanges<JLegal.Models.JailDB3Context>());

Migrations EF 4.3 includes the ability to discover the changes you’ve made to the model objects and generate schema change instructions for SQL Server. Migration allows you to preserve existing data in your database as you build and refine your model definitions http://blogs.msdn.com/b/adonet/archive/2012/02/09/ef-4-3-code-based-migrations-walkthrough.aspx http://msdn.microsoft.com/en-US/data/jj591621

Seeding a Database Derive from the DropCreateDatabaseAlways class and override the Seed method. Use the new class in the SetInitializer Note: 84 -85

Cont.

Changing the Edit View

Get and Post

ModelState In previous code: ModelState: EntityState db.SaveChanges The model knows if it is valid or not EntityState Next page db.SaveChanges RedirectToAction(“Index”)

EntityState

Model Binding No more reading from the Request.Form Collection unless you want to. Naming convention takes care of it all DefaultModelBinder Automatically converts the Form info to the Model object based on naming convention. It uses the Request not just the Form Collection. It looks at route data, the querystring, and the Form Collection and custom value providers if needed. Page 91

Using the DefaultModelBinder

Cont. You can have multiple model binders registered in the MVC runtime for different types of models, but the defaultModelBinder may work for you. The default uses naming conventions to find the matches. If it sees a FirstName property it looks for a FirstName value in the request. It uses “value providers” to search for the values in different parts of the request.

Explicit Model Binding

Cont

5. Forms and HTML Helpers

Form Tag: Action and Method Action tells the web browser where to send the information Method Get Send info in the header Viewable in the Querystring Post Send info in the Body Not Viewable in the Querystring

HTML Helpers Html Helpers are methods you can invoke on the Html property of a view. Url Helpers Also available from the controller Ajax Helpers Make views easy to author. @using (Html.BeginForm(“Search”, “Home”, FormMethod.Get))

Html.BeginForm

Automatic Encoding All helpers that output model values will automatically HTML encode the values before rendering.

Cont.

Extension methods System.Web.Mvc.HtmlHelper<t> Several items implemented as extension methods by the framework System.Web.Mvc.Html Namespace Note: Views/web.config has the namespace entry

Html.ValidationSummary Displays an unordered list of all validation errors in the ModelState dictionary

ModelState.AddModelError ModelState.AddModelError(“”, “wrong”); Model-level error (no key) ModelState.AddModelError(“Title”, “Bad Name); Property-Level (key provided)

Cont.

List of HTML Helpers http://msdn.microsoft.com/en-us/library/dd410596(v=VS.98).aspx

Html.ActionLink

Html.Checkbox

Html.Label

Cont. Difference between Html.Label Html.LabelFor Works with a model Not to be confused with the “for” attribute

Html.DropDownList and Html.ListBox

Html.TextBox and Html.TextArea

Html.ValidationMessage

Set the value via the ViewBag

Cont.

Cont.

Strongly typed Helpers

Helpers and Model Metadata

Templated Helpers Templated helpers provide a way to automatically build UI based on a data model that is marked with attributes defined in the System.ComponentModel.DataAnnotations namespace. Templated Helpers Html.Display Html.Editor Strongly Typed Templated Helpers Html.DisplayFor Html.EditorFor Whole-Model Templated Helpers Html.DisplayForModel Html.EditorForModel

Cont. Use Html.EditorFor to render the same HTML as TextBoxFor, however, you can change the HTML using data annotations.

ModelState and Helpers ModelState is a byproduct of model binding and holds all validation errors detected during model building. Also holds the raw values the user submits to update a model. Helpers used to render form fields automatically look up their current value in the ModelState dictionary. If the value exists in the ModelState, the helper uses the value from the ModelState instead of a value in the view data. User enters “Bob” into the Price fields and submits, when the view is returned to the user because the model binding failed, the user will still see “Bob” When ModelState contains an error for a given property, the form helper associated with the error renders a CSS class of input-validation-error (red)

Html.Hidden

Html.Password

Html.RadioButton

Html.CheckBox

Rendering Helpers Html.ActionLink Html.RouteLink

Url Helpers Action Content RouteUrl Exactly like ActionLink but does not return an anchor Content Can convert a relative application path to an absolute application path RouteUrl Same pattern as Action, but accepts a route name like RouteLink

Html.Partial and Html.RenderPartial Renders partial view to a string. Html.RenderPartial Renders partial view to the response output stream instead of returning a string.

Html.Action and Html.RenderAction Executes a separate controller action and displays the result RenderAction Writes directly to the response [ChildActionOnly]

Cont.

Custom Helpers http://www.asp.net/mvc/tutorials/older-versions/views/creating-custom-html-helpers-cs

TagBuilder http://www.asp.net/mvc/tutorials/older-versions/views/using-the-tagbuilder-class-to-build-html-helpers-cs

Cont.

6. Data Annotations and Validation

Data Annotation an unobtrusive validation library built on top of jquery.validation MVC comes with support for Data Annotations (that is, System.ComponentModel.DataAnnotations) and can be extended becoming more popular and is being baked in to many other Microsoft offerings, including Entity Framework MVC only contains four validators: Range, Required, StringLength and Regular Expression The Data Annotations Extensions project can be found at http://dataannotationsextensions.org/, and currently provides 11 additional validation attributes (ex: Email, EqualTo, Min/Max) on top of Data Annotations’ original 4. .NET 4.5 http://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations(v=vs.110).aspx

NuGet packages

Using Validation Annotations System.ComponentModel.DataAnnotations namespace (some in other namespaces) Provide Server-side validation The framework also supports client-side validation when you use one of the attributes on a model property There are 4 attributes in this namespace

[Required] Creates a required value Raises a validation error if the property value is null or empty Client and server-side logic (although client-side validation is actually through a validation adapter design) If the client does not have JavaScript enabled in the browser, the validation logic will catch the it on the server, too. The user will still see the error.

[StringLength]

[RegularExpression] [Phone] [EmailAddress] [CreditCard]

[Range]

[Remote] System.Web.Mvc namespace

[Compare]

Custom Error Messages

Validation and Model Binding By default, the MVC framework executes validation logic during model binding. Part of a system of model binders, model metadata, model validators and model state. The model binder runs implicitly when you have parameters to an action method

UpdateModel / TryUpdateModel

Cont. Once the model binder is finished updating the model properties with new values, the model binder uses the current model metadata and ultimately obtains all the validators for the model. DataAnnotationsModelValidator A model validator that can find all the validation attributes and execute the validation logic inside. The model binder catches all the failed validation rules and places them into the Model State

Validation and Model State Model binding produces model state. Model state is accessible in a Controller-derived object using the ModelState property Model state contains all the values the user attempted to put into model properties Model state also contains all the errors associated with each property, and errors associated with the model itself. If there is an error in model state Model.IsValid returns false

Cont.

Valid or not?

TryUpdateModel

Custom Validation Logic Many possibilities: Package validation logic into a custom data annotation Package validation logic into the model itself (self-validating model)

Custom Annotations Derive from ValidationAttribute base class System.ComponentModel.DataAnnotations namespace

Cont. Override the IsValid method Add a constructor

Cont. Pass the error message to the base class.

Cont. Allow for custom error message

Cont.

IValiatableObject

Cont.

[Display] Display a friendly name to the UI

Cont. The default order is 10000 Fields appear in ascending order

ScaffoldColumn

[DisplayFormat]

ReadOnly

[DataType]

[UIHint]

[HiddenInput]

[DatabaseGenerate] http://msdn.microsoft.com/en-us/library/hh390735.aspx [ForeignKeyAttribute] [TabletAttrubute]

7. Security

Security Vectors in a web app Threats: Cross-Site Scripting XSS Cross-Site Request Forgery Over-Posting Open Redirection

8. Ajax Asynchronous JavaScript and XML The core of the support for Ajax in the ASP.NET MVC 4 framework comes from the jQuery JavaScript library

jQuery jQuery is added to your project by the Template you selected. Scripts folder Added by NuGet Can easily upgrade scripts when a new version of jQuery arrives

jQuery Features jQuery function (aliased as the $ sign) Less typing

jQuery Selectors

jQuery Events You can subscribe to events

jQuery Method Chaining

Shortcuts

jQuery and Ajax jQuery includes what you need to send asynchronous request back to your server. You can generate Post or Get request and jQuery will notify you when the request is complete (error or not) Consume XML, HTML, Text or JSON

Unobtrusive JavaScript Keeping the JavaScript code separate from markup

Using jQuery

Cont. Create a .js file in the scripts folder Add a <script> tag to the view Must come later than the jQuery script tag

Modernizr Modernizes old browsers. Enables HTML 5 elements on browsers that don’t support HTML 5 Also detects other features like geolocation and the drawing canvas if available.

Ajax Helpers Add a reference to :

Ajax ActionLinks A Razor view has an Ajax property available

HTML 5 Attributes Data “dash” attributes

Ajax Forms

Client side validation

Cont.

Cont.

IClientValidatable

Cont.

Cont.

jQuery UI

jQuery UI examples

9. Routing

Defining Routes Your MVC application needs at lease one route to define how the app should handle request. You can have many routes in your application.

Cont. Global.asax.cs App_Start folder: RouteConfig.RegisterRoutes(RouteTable.Routes); App_Start folder:

Cont. url segments Url Parameters This is a pattern matching rule A segment is everything between slashes but not including the slashes Url Parameters Each contains a parameter in curly braces This is a pattern matching rule

Cont. “{controller}/{action}/{id}” {controller} is used to instantiate a controller class to handle the request. MVC appends the suffix “Controller” to the value of the {controller} URL parameter and attempts to find a type of that name. {action} is used to indicate which method of the controller to call in order to handle the current request. {id} looks for a parameter named id

Cont.

Optional values

Cont. @Html.RouteLink("blog", new {controller="Blog", action="Index“ , year=2341, month=23, day=34}) http://[domain name]/2012/02/24

MVC Areas Allow you to divide your models, views, and controllers into separate functional sections. Separate larger or complex sites into sections Each Area will have its own set of folders for controllers, views, models Each area will have its own routing registration Derive a class from the AreaRegistration class Override AreaName and RegisterArea

Cont. Demo: Create two Areas

Cont. Each area has its own routing registration

Area route conflicts

Catch-all parameter

cont

URL Generation

Overflow parameters

Cont. Routing is not looking for an exact match. Just a sufficient match. Extra parameters will be placed in the querystring prameters (after the ?)

HTML 5

CSS and CSS 3 LESS: http://designshack.net/articles/css/10-less-css-examples-you-should-steal-for-your-projects/ http://lesscss.org/

NuGet and Packages

Web API HTTP services on top of the .NET framework Ships with MVC 4 Why? Reach more clients Xml, json, Scale with the cloud Embrace HTTP Simplify communication with clients

Dependency Injection

What is Dependency Injection? A software design pattern Types of Patterns in use today Inversion of Control Service Locator Weakly Typed Service Locator Strongly Typed Service Locator Dependency Injection Constructor Injection Property Injection

Coupling Coupling / Tightly Coupling When a component has a dependency. Ex: creating an instance of class “A” within the constructor class “B” Class “B” can’t work if class “A” (the dependency) isn’t available. Your class knows exactly what kind of class it needs to use. Makes it hard or impossible to use a different type of the same class. Changes to the class “A” may break class “B” What if you wanted to use class “C” instead of class “A”?

Inversion of Control Moving the responsibility for creating the instance of the class (Class A) outside of the class (Class B) that consumes the dependency 2 steps: Create a layer of abstraction Interface Move the responsibility for creating the instance outside of the consuming class Pass the class via the constructor or a property Or use a Service locator

Strongly Typed Service Locator An external component that finds the service (class) that you are looking for. Your class relies on the locator to always give it back the correct type. Your class doesn’t care what type it is because it expects a type that has implemented the correct interface. Good for unit testing

Weakly Typed Service Locator Similar to the Strongly typed service locator but returns object instead of a specific interface Your class must cast to the correct type of interface You could create a Generic Type as well

Dependency Injection This pattern is a type of Inversion of Control No service locator Good for testing Constructor Injection: Pass the dependency into the constructor Property Injection: Pass the dependency into a property

Dependency Injection Container Acts as a factory for components, inspecting and fulfilling their dependency requirements A little different than a service locator Service locator: If anyone asks for this type, give them this object DIC: If anyone asks for this type, you create an object of this concrete type and give them that