Your SlideShare is downloading. ×
Mvc3   part1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Mvc3 part1

2,963
views

Published on

Slides to explain asp.net mvc 3 from the beginning of introduction to mvc3 to real project

Slides to explain asp.net mvc 3 from the beginning of introduction to mvc3 to real project

Published in: Education, Technology

4 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,963
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
4
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Agenda• Part 1: Introducing ASP.NET MVC 3 – What’s the Big Idea? – Getting Ready. – Your First MVC Application. – The MVC Pattern – Essential Language Features – Essential Tools for MVC – SportsStore: A Real Application – SportsStore: Navigation and Cart – SportsStore: Administration
  • 2. What’s the Big Idea?• Traditional ASP.NET Web FormsThe idea was to make web development feel just the same as Windows Formsdevelopment.
  • 3. What’s Wrong with ASP.NET Web Forms?• Traditional ASP.NET Web Forms development was a great idea, but reality proved more complicated. Over time, the use of Web Forms in real-world projects highlighted some shortcomings: 1- View State weight The actual mechanism for maintaining state across requests (known as View State) results in large blocks of data being transferred between the client and server. This data can reach hundreds of kilobytes in even modest web applications, and it goes back and forth with every request, frustrating site visitors with slower response times and increasing the bandwidth demands of the server.
  • 4. What’s Wrong with ASP.NET Web Forms?• Traditional ASP.NET Web Forms development was a great idea, but reality proved more complicated. Over time, the use of Web Forms in real-world projects highlighted some shortcomings: 2- Page life cycle The mechanism for connecting client-side events with server- side event handler code, part of the page life cycle, can be extraordinarily complicated and delicate. Few developers have success manipulating the control hierarchy at runtime without getting View State errors or finding that some event handlers mysteriously fail to execute.
  • 5. What’s Wrong with ASP.NET Web Forms?• Traditional ASP.NET Web Forms development was a great idea, but reality proved more complicated. Over time, the use of Web Forms in real-world projects highlighted some shortcomings: 3- False sense of separation of concerns ASP.NET’s code-behind model provides a means to take application code out of its HTML markup and into a separate codebehind class. This has been widely applauded for separating logic and presentation, but in reality, developers are encouraged to mix presentation code (manipulating the server-side control tree) with their application logic (manipulating database data) in these same monstrous codebehind classes. The end result can be fragile and unintelligible.
  • 6. What’s Wrong with ASP.NET Web Forms?• Traditional ASP.NET Web Forms development was a great idea, but reality proved more complicated. Over time, the use of Web Forms in real-world projects highlighted some shortcomings: 4- Limited control over HTML Server controls render themselves as HTML, but not necessarily the HTML you want. Prior to ASP.NET 4, the HTML output usually failed to comply with web standards or make good use of Cascading Style Sheets (CSS), and server controls generated unpredictable and complex ID values that are hard to access using JavaScript. These problems are reduced in ASP.NET 4, but it can still be tricky to get the HTML you expect.
  • 7. What’s Wrong with ASP.NET Web Forms?• Traditional ASP.NET Web Forms development was a great idea, but reality proved more complicated. Over time, the use of Web Forms in real-world projects highlighted some shortcomings: 5- Leaky abstraction : Web Forms tries to hide away HTML and HTTP wherever possible. As you try to implement custom behaviors, you frequently fall out of the abstraction, which forces you to reverse-engineer the postback event mechanism or perform obtuse acts to make it generate the desired HTML. Plus, all this abstraction can act as a frustrating barrier for competent web developers.
  • 8. What’s Wrong with ASP.NET Web Forms?• Traditional ASP.NET Web Forms development was a great idea, but reality proved more complicated. Over time, the use of Web Forms in real-world projects highlighted some shortcomings: 6- Low testability The designers of ASP.NET could not have anticipated that automated testing would become an essential component of software development. Not surprisingly, the tightly coupled architecture they designed is unsuitable for unit testing. Integration testing can be a challenge, too.
  • 9. Web Development Today• Outside Microsoft, web development technology has been progressing rapidly and in several different directions since Web Forms was first released. At the same time, Representational State Transfer (REST) has become the dominant architecture for application interoperability over HTTP, completely overshadowing Simple Object Access Protocol SOAP (the technology behind ASP.NET’s original approach to web services). REST describes an application in terms of resources (URIs) representing real-world entities and standard operations (HTTP methods) representing available operations on those resources. Another significant trend is the movement toward using JavaScript as a primary programming language. AJAX first showed us that JavaScript is important; jQuery showed us that it could be powerful and elegant; and Google’s open source V8 JavaScript engine showed us that it could be incredibly fast. Today, JavaScript is becoming a serious server-side programming language.
  • 10. Key Benefits of ASP.NET MVCMVC Architecture It’s important to distinguish between the MVC architectural pattern and the ASP.NET MVC Framework. The MVC pattern isn’t new—it dates back to 1978 and the Smalltalk project at Xerox PARC—but it has gained enormous popularity today as an architecture for web applications, for the following reasons:1. User interaction with an MVC application follows a natural cycle: the user takes an action, and in response the application changes its data model and delivers an updated view to the user. And then the cycle repeats. This is a very convenient fit for web applications delivered as a series of HTTP requests and responses.2. Web applications necessitate combining several technologies (databases, HTML, and executable code, for example), usually split into a set of tiers or layers. The patterns that arise from these combinations map naturally onto the concepts in MVC.
  • 11. Key Benefits of ASP.NET MVCTight Control over HTML and HTTP ASP.NET MVC meshes so well with the popular jQuery library that Microsoft ships jQuery as a built-in part of the default ASP.NET MVC project template ASP.NET MVC–generated pages don’t contain any View State data ASP.NET MVC works in tune with HTTP. You have total control over the requests passing between the browser and server, so you can fine-tune your user experience as much as you like. AJAX is made easy, and there aren’t any automatic postbacks to interfere with client-side state. Any developer who primarily focuses on the Web will almost certainly find this to be hugely freeing and the workday more satisfying.
  • 12. Key Benefits of ASP.NET MVCTestability The MVC architecture gives you a great start in making your application maintainable and testable, because you naturally separate different application concerns into different, independent software pieces. Testability is not only a matter of unit testing. ASP.NET MVC applications work well with UI automation testing tools, too. You can write test scripts that simulate user interactions without needing to guess which HTML element structures, CSS classes, or IDs the framework will generate, and you don’t have to worry about the structure changing unexpectedly.
  • 13. Powerful Routing System• The style of URLs has evolved as web application technology has improved. URLs like this one: /App_v2/User/Page.aspx?action=show%20prop&prop_id=82742• are increasingly rare, replaced with a simpler, cleaner format such as this: /to-rent/chicago/2303-silver-street
  • 14. Powerful Routing System• There are some good reasons for caring about the structure of URL. – First, search engines give considerable weight to keywords found in a URL. A search for “rent in Chicago” is much more likely to turn up the simpler URL. – Second, many web users are now savvy enough to understand a URL, and appreciate the option of navigating by typing it into their browser’s address bar. – Third, when someone understands the structure of a URL, they’re more likely to link to it, share it with a friend, or even read it aloud over the phone. – Fourth, it doesn’t expose the technical details, folder, and file name structure of your application to the whole public Internet, so you’re free to change the underlying implementation without breaking all your incoming links.
  • 15. Key Benefits of ASP.NET MVC• Built on the Best Parts of the ASP.NET Platform – First and most obviously, since ASP.NET MVC is based on the .NET platform, you have the flexibility to write code in any .NET language and access the same API features – ready-made ASP.NET platform features—such as master pages, forms authentication, membership, roles, profiles, and internationalization—can reduce the amount of code you need to develop and maintain any web application.
  • 16. Key Benefits of ASP.NET MVCModern API – ASP.NET MVC 3 is built for .NET 4, so its API can take full advantage of recent language and runtime innovations, including extension methods, lambda expressions, anonymous and dynamic types, and Language Integrated Query (LINQ). Many of the MVC Framework’s API methods and coding patterns follow a cleaner, more expressive composition than was possible with earlier platforms.ASP.NET MVC Is Open Source This is invaluable when your debugging trail leads into a system component, and you want to step into its code (and even read the original programmers’ comments). It’s also useful if you’re building an advanced component and want to see what development possibilities exist, or how the built-in components actually work.
  • 17. Who Should Use ASP.NET MVC?Comparisons with ASP.NET Web Forms – your choice between the two is a matter of development philosophy. Consider these points:• Web Forms takes the view that UIs should be stateful, and to that end, adds a sophisticated abstraction layer on top of HTTP and HTML, using View State and postbacks to create the effect of statefulness. This makes it suitable for drag-anddrop Windows Forms–style development, in which you pull UI widgets onto a canvas and fill in code for their event handlers.• MVC embraces HTTP’s true stateless nature, working with it rather than fighting against it. The MVC Framework requires you to understand how web applications actually work. Given that understanding, it provides a simple, powerful, modern approach to writing web applications, with tidy code that’s easier to extend and maintain over time, and that’s free of bizarre complications and painful limitations.
  • 18. What’s New in ASP.NET MVC 3• The headline feature in MVC version 3 is the introduction of the Razor View Engine. Previous versions of MVC have relied on the standard ASP.NET view engine, which depends on the ASP.NET <% and %> blocks (if you have done any kind of ASP.NET development, you are certain to have seen these in use). The Razor View Engine replaces the traditional blocks with the @ character. The new notation is quicker to write and faster to compile than the old view engine. It also has more flexible features and allows for better unit testing. You can still use the previous approach, but the Microsoft team has made it clear that Razor is the future for MVC.• Razor isn’t the only enhancement in MVC 3. The Visual Studio project tooling has been streamlined and there is better support for dependency injection. It also provides improved support for the JSON data format and JavaScript, including tighter integration with jQuery.
  • 19. 2- Getting ReadyInstalling the required Visual Studio features
  • 20. Installing the Essential SoftwareDownloading the Web Platform Installer
  • 21. Installing the Essential SoftwareThe Web Platform Installer • Visual Studio 2010 SP1 • SQL Server Express 2008 R2 • ASP.NET MVC 3 Tools Update
  • 22. Your First MVC Application• Creating a New ASP.NET MVC Project The Visual Studio MVC 3 project template
  • 23. Your First MVC Application • Creating a New ASP.NET MVC ProjectThe Empty option creates a project withonly the minimum files and foldersrequired for an MVC 3 application. The Selecting a type of MVC 3 projectInternet Application option creates asmall example application that you canmodify and build on. It includes userregistration and authentication,navigation, and a consistent visual style.The Intranet Application option issimilar to Internet Application, but isdesigned for use in environments thatauthenticate users through adomain/Active Directory infrastructure.For this chapter, we are going to keepthings simple. Select the Empty option,leave the Use HTML5 semanticmarkup option unchecked, and click OKto create the new project.
  • 24. Your First MVC Application Trying to run an empty project
  • 25. Adding the First Controller • In MVC architecture, incoming requests are handled by controllers. In ASP.NET MVC, controllers are just simple C# classes (usually inheriting from System.Web.Mvc.Controller, the framework’s built-in controller base class). Each public method in a controller is known as an action method, meaning you can invoke it from the Web via some URL to perform an action. The MVC convention is to put controllers in a folder called Controllers.To add a controller toour project, right-clickthe Controllers folderin the Visual StudioSolution Explorerwindow and chooseAdd and thenController
  • 26. Adding the First Controller Setting the name for the controller
  • 27. Adding the First Controller The output form of our controller action methodModifying the HomeController Class
  • 28. Understanding Routes When Visual Studio creates the MVC project, it adds some default routes to get us started. You can request any of the following URLs, and they will be directed to the Index action on the HomeController: /Home /Home/IndexYou can see and edit your routing configuration by opening the Global.asax.cs file
  • 29. Creating and Rendering a ViewWhen we return aViewResult object froman action method, we areinstructing MVC to rendera view. We create theViewResult by calling theView method with noparameters. This tellsMVC to render the defaultview for the action.This error message is more helpful than most. It explains not only that MVC couldn’t finda view for our action method, but it shows where it looked. This is another nice exampleof an MVC convention: views are associated with action methods by a namingconvention.
  • 30. Add ViewTo create a view, right-click the action method in the HomeController.cscode file (either on the method name or inside the method body) andselect Add View from the pop-up menu.This opens the Add View dialog.Uncheck Use a layout or master page.We are not using layouts in this example,Click the Add button, and Visual Studio willcreate a new view file for you calledIndex.cshtml, in the Views/Home folder.The .cshtml file extension denotes a C#view that will be processed by Razor.Previous versions of MVC relied on theASPX view engine, for which view fileshave the .aspx extension. The Add View dialog
  • 31. Add ViewWe can return other results fromaction methods besides stringsand ViewResult objects. Forexample, if we return aRedirectResult, we cause thebrowser to be redirected toanother URL. If wereturn anHttpUnauthorizedResultwe force the user to log in. Theseobjects are collectively known asaction results, and they are allderived from the ActionResultclass.
  • 32. Adding Dynamic OutputIn MVC, it’s the controller’s job to construct some data, and it’s the view’s job torender it as HTML.One way to pass data from the controller to the view is by using the ViewBagobject. This is a member of the Controller base class. ViewBag is a dynamic objectto which you can assign arbitrary properties, making those values available inwhatever view is subsequently rendered.
  • 33. Adding Dynamic Output
  • 34. Adding Dynamic OutputNotice that we don’t need to terminate a Razor code block.We just start with the @ character, and then add our C# code. This is one of thenice features of Razor. It is more readable, and we don’t need to worry aboutbalancing <% and %> tags.
  • 35. Creating a Simple Data-Entry ApplicationSetting the Scene We are going to imagine that a friend has decided to host a New Year’s Eve party and that she has asked us to create a web site that allows her invitees to electronically RSVP. She has asked for four key features: • A home page that shows information about the party • A form that can be used to RSVP • Validation for the RSVP form, which will display a thank-you page • RSVPs e-mailed to the party host when complete
  • 36. Designing a Data Model In MVC, the M stands for model, and it is the most important part of the application. The model is the representation of the real-world objects, processes, and rules that define the subject, known as the domain, of our application. The model, often referred to as a domain model. Adding a Model Class We don’t need a complex model for the PartyInvites application, but there is one domain class that we’ll use. We’ll call it GuestResponse. This object will be responsible for storing, validating, and confirming an RSVP.You may have noticed that the WillAttend property is a nullable bool, which means that it can betrue, false, or null
  • 37. Linking Action MethodsHtml.ActionLink is an HTMLhelper method. The MVCFramework comes with acollection of builtin helpermethods that are convenient forrendering HTML links, textinputs, checkboxes, selections,and even custom controls. TheActionLink method takes twoparameters: the first is the textto display in the link, and thesecond is the action to performwhen the user clicks the link.
  • 38. Creating the Action Method
  • 39. Adding a Strongly Typed View A strongly typed view is intended to render a specific domain typeAdding a strongly typed view
  • 40. Building the Form
  • 41. Building the Form Visual Studio IntelliSense for lambda expressions in HTML helper methodsASP.NET Web Forms supports only one server-side form in a web page, usually expressed as<form runat=“server”>, which is a container for the View State data and postback logic. MVCdoesn’t use server-side forms. All forms are expressed using regular HTML, and you can have asmany of them as you like in a single view. There are no View State or other hidden form elements,and the ID values you assign to IDs don’t get mangled.
  • 42. The RspvForm view Handling FormsA method that responds to HTTP GET requests: A GETrequest is what a browser issues normally each timesomeone clicks a link. This version of the action will beresponsible for displaying the initial blank form whensomeone first visits /Home/RsvpForm.A method that responds to HTTP POST requests: Bydefault, forms rendered using Html.BeginForm() aresubmitted by the browser as a POST request. This versionof the action will be responsible for receiving submitteddata and deciding what to do with it.
  • 43. Adding an Action Method to Support POST Requests
  • 44. Rendering Other Views return View("Thanks", guestResponse);This call to the View method tells MVCto find and render a view calledThanks and to pass ourGuestResponse object to the view. Tocreate the view we’ve specified, right-click inside one of the HomeControllermethods and select Add View from thepop-up menu. Set the name of the viewto Thanks
  • 45. Rendering Other Views
  • 46. Adding ValidationIn an MVC application, validation is typically applied in the domain model, rather thanin the user interface. This means that we define our validation criteria in one place,and it takes effect in any place the model class is used
  • 47. Adding Validation
  • 48. Adding Validation
  • 49. Highlighting Invalid Fields<link rel="Stylesheet" href="@Href("~/Content/Site.css")" type="text/css"/>If you’ve used the ASPX view engine, you may be used to specifying paths directly using thetilde (~) (like this: href="~/Content/Site.css") and relying on the view engine to convert thisinto a URL that the browser can follow (such as ../Content/Site.css). The Razor View Enginetakes a different approach. It requires the Href operator to convert URLs (like this:href="@Href("~/Content/Site.css")").here is the HTML that a call to Html.TextBoxFor(x => x.Name)generates when there is no validation error:<input data-val="true" data-val-required="Please enter yourname" id="Name" name="Name― type="text" value="" />And here is the HTML the same call generates when the userdoesn’t provide a value<input class="input-validation-error" data-val="true" data-val-required="Please enter your name" id="Name" name="Name"type="text" value="" />
  • 50. Completing the Example
  • 51. Understanding the MVC Pattern• Models,which contain or represent the data that users work with. These can besimple view models, which just represent data being transferredbetween views and controllers; or they can be domain models, whichcontain the data in a business domain as well as the operations,transformations, and rules for manipulating that data.• Views,which are used to render some part of the model as a UI.• Controllers,which process incoming requests, perform operations on the model,and select views to render to the user.
  • 52. Understanding the Domain Model• The most important part of an MVC application is the domain model. We create the model by identifying the real-world entities, operations, and rules that exist in the industry or activity that our application must support, known as the domain.
  • 53. The ASP.NET Implementation of MVC• In MVC, controllers are C# classes, usually derived from the System.Web.Mvc.Controller class. Each public method in a class derived from Controller is called an action method, which is associated with a configurable URL through the ASP.NET routing system
  • 54. Comparing MVC to Other PatternsThe smart UI pattern Model-View ArchitectureClassic Three-Tier Architectures
  • 55. Modeling an Example DomainThe auction domain model with aggregates The C# Auction Domain Model
  • 56. Defining Repositories• Persistence is not part of our domain model. It is an independent or orthogonal concern in our separation of concerns pattern. This means that we don’t want to mix the code that handles persistence with the code that defines the domain model. The usual way to enforce separation between the domain model and the persistence system is to define repositories. The domain model calls the methods defined by the repository, which in turn makes calls to the database to store and retrieve the model data. This allows us to isolate the model from the implementation of the persistence.
  • 57. Defining RepositoriesThe convention is to define separate data models for each aggregate, becauseaggregates are the natural unit for persistence. C# Repository Classes for the Member and Item Domain Classes
  • 58. Building Loosely Coupled ComponentsOne of most important features of the MVC pattern is that it enables separationof concerns. We want the components in our application to be as independentas possible and to have as few interdependencies as we can manage.In our ideal situation, each component knows nothing about any other componentand deals with other areas of the application only through abstract interfaces.This is known as loose coupling, and it makes testing and modifying ourapplication easier. Using interfaces to decouple componentsBy introducing IEmailSender, we ensure that there is no direct dependencybetween PasswordResetHelp and MyEmailSender. We could replaceMyEmailSender with another e-mail provider
  • 59. Using Dependency Injection• Interfaces help us decouple components, but we still face a problem—C# doesn’t provide a built-in way to easily create objects that implement interfaces, except to create an instance of the concrete component. Instantiating Concrete Classes to Get an Interface Implementation
  • 60. Using Dependency InjectionWe have made things worse. Now PasswordResetHelper depends onIEmailSender and MyEmailSender Components are tightly coupled after allWhat we need is a way to obtain objects that implement a given interface withoutneeding to create the implementing object directly. The solution to this problem iscalled dependency injection (DI), also known as inversion of control (IoC).
  • 61. Using Dependency InjectionDI is a design pattern that completes the loose coupling we started byadding the IEmailSender interface to our simple example.There are two parts to the DI pattern. The first is that we remove any dependencieson concrete classes from our component—in this case PasswordResetHelper. We dothis by passing implementations of the required interfaces to the class constructor Removing Dependencies from the PasswordResetHelper Class
  • 62. Using Dependency InjectionThe dependencies are injected into the PasswordResetHelperat runtime; that is, an instance of some class that implementsthe IEmailSender interface will be created and passed to thePasswordResetHelper constructor during instantiation. There isno compile-time dependency between PasswordResetHelperand any class that implements the interfaces it depends on.
  • 63. An MVC-Specific Dependency Injection ExampleThe goal is to create a controller class, which we’ll call AdminController,that uses the repository MembersRepository for persistence withoutdirectly coupling AdminController and MembersRepository together.
  • 64. An MVC-Specific Dependency Injection ExampleThe goal is to create a controller class, which we’ll call AdminController,that uses the repository MembersRepository for persistence withoutdirectly coupling AdminController and MembersRepository together.
  • 65. Using a Dependency Injection Container• We still have one more issue to resolve: how do we instantiate the concrete implementation of interfaces without creating dependencies somewhere else in our application? – The answer is a DI container, also known as an IoC container. We don’t need to create the DI container ourselves. There are some great open source and freely licensed implementations available. The one we like is called Ninject. Microsoft created its own DI container, called Unity. We are going to use Ninject, though, because we like it and it demonstrates the ability to mix and match tools when using MVC.
  • 66. Getting Started with Automated Testing• Unit testing, which is a way to specify and verify the behavior of individual classes (or other small units of code) in isolation from the rest of the application.• Integration testing, which is a way to specify and verify the behavior of multiple components working together, up to and including the entire web application.
  • 67. [TestClass] Understanding Unit Testingpublic class AdminControllerTest { [TestMethod] public void CanChangeLoginName() { Member bob = new Member() { LoginName = "Bob" }; // Arrange (set up a scenario) FakeMembersRepository repositoryParam = new FakeMembersRepository(); repositoryParam.Members.Add(bob); AdminController target = new AdminController(repositoryParam); string oldLoginParam = bob.LoginName; string newLoginParam = "Anastasia"; target.ChangeLoginName(oldLoginParam, newLoginParam); // Act (attempt the operation) Assert.AreEqual(newLoginParam, bob.LoginName); // Assert (verify the result) Assert.IsTrue(repositoryParam.DidSubmitChanges);} private class FakeMembersRepository : IMembersRepository { The CanChangeLoginName method public List<Member> Members = new List<Member>(); follows a pattern known as public bool DidSubmitChanges = false; arrange/act/assert (A/A/A).Arrange public void AddMember(Member member) { refers to setting up the conditions for throw new NotImplementedException(); the test, act refers to performing the } test, and assert refers to verifying public Member FetchByLoginName(string loginName) { that the result was the one that was return Members.First(m => m.LoginName == loginName); } required. public void SubmitChanges() { DidSubmitChanges = true; }}}
  • 68. Understanding Unit Testing Visual feedback on the progress of unit testsYou can see how our use of DI has helped us with unit testing. We were ableto create a fake implementation of the repository and inject it into thecontroller to create a very specific scenario. We are big fans of DI and this isone of the reasons.
  • 69. Understanding Integration TestingFor web applications, the most common approach to integration testing is UIautomation. This term refers to simulating or automating a web browser to exercisethe application’s entire technology stack by reproducing the actions that a userwould perform, such as clicking buttons, following links, and submitting forms.• The following are the two best-known open source browser automation options for .NET developers: – Selenium RC (http://seleniumhq.org/), which consists of a Java “server” application that can send automation commands to Internet Explorer, Firefox, Safari, or Opera, plus clients for .NET, Python, Ruby, and multiple others so that you can write test scripts in the language of your choice. Selenium is powerful and mature; its only drawback is that you have to run its Java server. – WatiN (http://watin.sourceforge.net/), a .NET library that can send automation commands to Internet Explorer or Firefox. Its API isn’t as powerful as Selenium, but it comfortably handles most common scenarios and is easy to set up (you need to reference only a single dynamic-link library).
  • 70. Essential Language Features • Essential C# Features – Using Automatically Implemented Properties public class Product { private string name; public string Name { get { return name; } set { name = value; } } }Notice that we must implement both the getter and setter to return to a regularproperty. C# doesn’t support mixing automatic- and regular-style getters and setters.
  • 71. Essential Language Features• Essential C# Features – Using Object and Collection Initializers
  • 72. Essential Language Features• Essential C# Features – Using Extension Methods Extension methods are a convenient way of adding methods to classes that you don’t own and so can’t modify directly.
  • 73. Essential Language Features • Essential C# Features – Creating Filtering Extension MethodsThis extension method, called FilterByCategory, takes an additional parameter thatallows us to inject a filter condition when we call the method. Those Product objectswhose Category property matches the parameter are returned in the resultIEnumerable<Product> and those that don’t match are discarded.
  • 74. Essential Language Features• Essential C# Features – Using Lambda Expressions Using a Delegate in an Extension MethodWe’ve used a Func as the filteringparameter, which means that we don’tneed to define the delegate as a type.The delegate takes a Productparameter and returns a bool, whichwill be true if that Product should beincluded in the results.Using a Lambda Expression to Replace a Delegate Definition
  • 75. Essential Language Features• Essential C# Features – Using Anonymous Types Creating an Anonymous Type Creating an Array of Anonymously Typed Objects
  • 76. Essential Language Features• Essential C# Features – Performing Language Integrated Queries Using LINQ to Query Data Using LINQ Dot Notation
  • 77. Understanding Razor SyntaxCreating the Project 1- Defining the Model
  • 78. Understanding Razor SyntaxCreating the Project2- Defining the Controller
  • 79. Understanding Razor SyntaxCreating the Project3- Creating the View If you don’t see the Product class in the drop-down list, compile your project and try creating the view again. Visual Studio won’t recognize model classes until they are compiled.
  • 80. Understanding Razor SyntaxCreating the Project4- Setting the Default Route Setting the Controller for the Default Route
  • 81. Understanding Razor SyntaxExamining a Basic Razor ViewReferring to the Model ObjectA More Complex Code Block
  • 82. Understanding Razor SyntaxContent Inside a Code Block That Doesn’t Start with an HTML Element When you prefix a line with @: it tells Razor to treat the line as though it begins with an HTML element. If you need to include a number of lines, none of which start with HTML elements, you can use the text element, This is equivalent to prefixing each of the lines contained within the element with @:
  • 83. Understanding Razor SyntaxIncluding Multiple Functions in a Code Block
  • 84. Understanding Razor SyntaxPassing Data Using the View Bag Feature
  • 85. Working with Layouts The dialog tells us to leave the layout reference blank if it is already set in a _viewstart file. If you look in the Views folder in your MVC project, you will see a file called _ViewStart.cshtmlSpecifying a Razor layout when creating a view The _ViewStart.cshtml FileNote : View files that start with an underscore (_) are not returned to the user, even if theyare requested directly.
  • 86. Working with Layouts The _Layout.cshtml FileA layout is the equivalent of the ASPX master page. The ViewBag.Title property that we set inthe Index view is read and used as the content of the HTML title element. Instead of an ASPX-style content placeholder, Razor includes the body of the view using the @RenderBody() call.Much like a master page, a Razor layout contains the HTML, script, and other elements thatyou want to avoid duplicating in your views. In this case, it included the basic structure of theHTML document, and the contents of the Index view will be rendered and inserted as thecontent for the HTML body element.
  • 87. Essential Tools for MVC• Using Ninject The Class, The Interface, Its Implementation
  • 88. Essential Tools for MVC• Using NinjectConsuming the IValueCalculator Interface Use interface
  • 89. Essential Tools for MVC • Using Ninject The relationships among four simple typesOur objective is to be able to create instances of ShoppingCart and inject animplementation of the IValueCalculator class as a constructor parameter. This isthe role that Ninject, our preferred DI container, plays for us. But before we candemonstrate Ninject, we need to get set up in Visual Studio.
  • 90. Essential Tools for MVC• Creating the Project – Adding Ninject • Right-click the project in the Solution Explorer window and select Add Package Library Reference from the pop-up menu to open the Add Library Package Reference dialog.
  • 91. Essential Tools for MVC• Getting Started with Ninject – To prepare Ninject for use, we need to create an instance of a Ninject kernel, which is the object we will use to communicate with Ninject. Preparing a Ninject Kernel 1 Binding a Type to Ninject 2
  • 92. Essential Tools for MVC• Getting Started with Ninject Instantiating an Interface Implementation via Ninject 3 Output
  • 93. Essential Tools for MVC• Specifying Property and Parameter Values Adding a Property to an Implementation Class Using the Ninject WithPropertyValue Method Output
  • 94. Essential Tools for MVC• Specifying Property and Parameter Values Using a Constructor Property in an Implementation Class Binding to a Class that Requires a Constructor Parameter
  • 95. Essential Tools for MVC• Using Conditional Binding – We can bind multiple implementations of the same interface or multiple derivations of the same class with Ninject and provide instructions about which one should be used under different conditions. A New Implementation of the IValueCalculatorThe new binding specifies that theIterativeValueCalculator class shouldbe instantiated to service requests forthe IValueCalculator interface when theobject into which the dependency isbeing injected is an instance of theLimitShoppingCart class. We have leftthe original binding for ValueCalculatorin place. Ninject tries to find the best A Conditional Ninject Bindingmatch for a binding, and if the criteriafor a conditional can’t be satisfied, ithelps to have a default binding for thesame class or interface, so that Ninjecthas a fallback value.
  • 96. Essential Tools for MVC• Using Conditional Binding – We can bind multiple implementations of the same interface or multiple derivations of the same class with Ninject and provide instructions about which one should be used under different conditions. Ninject Conditional Binding Methods
  • 97. Applying Ninject to ASP.NET MVCThe first step is to create a class that’s derived from System.Web.Mvc.DefaultControllerFactory.This is the class that MVC relies on by default to create instances of controller classes. The NinjectControllerFactory creates a Ninject kernel and uses it to service requests for controller classes that are made through the GetControllerInstance method, which is called by the MVC Framework when it wants a controller object. Bindings Interface and its implementation
  • 98. Applying Ninject to ASP.NET MVCOnce we create this class, we must register it with the MVC Framework, which wedo in the Application_Start method of the Global.asax class Registering the NinjectControllerFactory Class with the MVC FrameworkNow the MVC Framework will use our NinjectControllerFactory to obtaininstances of controller classes, and Ninject will handle DI into the controllerobjects automatically. Unit Testing using Visual studio and Using Moq Skipped
  • 99. SportsStore: A Real Application• Getting Started – Creating the Visual Studio Solution and Projects • One project will contain our domain model, one will be our MVC application, and the third will contain our unit tests.
  • 100. SportsStore: A Real Application• Getting Started – Creating the Visual Studio Solution and Projects • The Three SportsStore Projects
  • 101. SportsStore: A Real Application• Getting Started – Creating the Visual Studio Solution and Projects • Visual Studio will create a couple of files that we won’t use and that you can delete: the Class1.cs file in the SportsStore.Domain project and the UnitTest1.cs class in the SportsStore.UnitTests project. When you are finished The projects shown in the Solution Explorer window
  • 102. SportsStore: A Real Application• Getting Started – Creating the Visual Studio Solution and Projects • Adding References – The quickest way to obtain and reference these is by opening the Visual Studio Package Manager Console (View ➤ Other Windows ➤ Package Manager Console), Install-Package Ninject -Project SportsStore.WebUI Install-Package Ninject -Project SportsStore.Domain Install-Package Moq -Project SportsStore.WebUI Install-Package Moq -Project SportsStore.Domain
  • 103. SportsStore: A Real Application• Getting Started – Creating the Visual Studio Solution and Projects • set up dependencies between our projects, as listed in the table. Required Project Dependencies
  • 104. SportsStore: A Real Application• Getting Started – Setting Up the DI Container • Create a new folder within the SportsStore.WebUI project called Infrastructure, then create a class called NinjectControllerFactory
  • 105. SportsStore: A Real Application• Getting Started – Setting Up the DI Container • Registering the NinjectControllerFactory with the MVC Framework Global.asax.cs Starting the Application
  • 106. SportsStore: A Real Application• Starting the Domain Model – Since this is an e-commerce application, the most obvious domain entity we’ll need is a product. Create a new folder called Entities inside the SportsStore.Domain project and then a new C# class called Product within it. Creating the Product class
  • 107. SportsStore: A Real Application• Creating an Abstract Repository – Create a new top-level folder inside the SportsStore.Domain project called Abstract and a new interface called IProductsRepository The IProductRepository Interface File
  • 108. SportsStore: A Real Application• Making a Mock Repository – We are going to do that later in this chapter. In order to be able to start writing other parts of the application, we are going to create a mock implementation of the IProductRepository interface. We are going to do this in the AddBindings method of our NinjectControllerFactory class Adding the Mock IProductRepository Implementation
  • 109. SportsStore: A Real Application• Displaying a List of Products – Adding a Controller • Right-click the Controllers folder in the SportsStore.WebUI project and select Add ➤ Controller from the pop-up menus. Change the name of the controller to ProductController and ensure that the Template option is set to Empty controller.
  • 110. SportsStore: A Real Application• Displaying a List of Products – Adding the View • Right-click the List method and select Add View from the pop-up menu. Name the view List and check the option that creates a strongly typed view.For the model class, enterIEnumerable<SportsStore.Domain.Entities.Product>. You will need to type this in;it won’t be available from the drop-downlist, which doesn’t include enumerations ofdomain objects.
  • 111. SportsStore: A Real Application• Displaying a List of Products – Adding the View • Right-click the List method and select Add View from the pop-up menu. Name the view List and check the option that creates a strongly typed view. The List.cshtml View
  • 112. SportsStore: A Real Application• Displaying a List of Products – Setting the Default Route • All we need to do now is tell the MVC Framework that requests that arrive for the root of our site (http://mysite/) should be mapped to the List action method in the ProductController class. We do this by editing the statement in the RegisterRoutes method of Global.asax.cs Adding the Default Route Global.asax.cs
  • 113. SportsStore: A Real Application• Displaying a List of Products – Running the Application Viewing the basic application functionality
  • 114. SportsStore: A Real Application• Preparing a Database – We are going to use SQL Server as the database, and we will access the database using the EntityFramework (EF), which is the .NET ORM framework. • Creating the Database
  • 115. SportsStore: A Real Application• Preparing a Database – We are going to use SQL Server as the database, and we will access the database using the EntityFramework (EF), which is the .NET ORM framework. • Adding Data to the Database
  • 116. SportsStore: A Real Application• Preparing a Database – Creating the Entity Framework Context • The first step is to add Entity Framework version 4.1 to our SportsStore.Domain project.Right-click References and select Add Library Package Reference from the pop-up menu. Search or scroll down the list until you find the EntityFramework package and then click the Install button. Visual Studio will download and install the latest Entity Framework version.
  • 117. SportsStore: A Real Application• Preparing a Database – Creating the Entity Framework Context • The next step is to create a context class that will associate our simple model with the database. Add a new class called EFDbContext in the Concrete folder To take advantage of the code-first feature, we need to create a class that is derived from System.Data.Entity.DbContext. This class then defines a property for each table that we want to work with. The name of the property specifies the table, and the type parameter of the DbSet result specifies the model that the Entity Framework should use to represent rows in that table. In our case, the property name is Products and the type parameter is Product. We want the Product model type to be used to represent rows in the Products table.
  • 118. SportsStore: A Real Application• Preparing a Database – Creating the Entity Framework Context • We need to tell the Entity Framework how to connect to the database, and we do that by adding a database connection string to the Web.config file in the SportsStore.WebUI project with the same name as the context class
  • 119. SportsStore: A Real Application• Creating the Product Repository – We now have everything we need to implement the IProductRepository class for real. Add a class to the Concrete folder of the SportsStore.Domain project called EFProductRepository. EFProductRepository.cs Adding the Real Repository Binding
  • 120. SportsStore: A Real Application• The result of implementing the real repository
  • 121. SportsStore: A Real Application• Adding Pagination – Adding Pagination Support to the Product Controller List Method The effect of this is that we get the first page when we don’t specify a page value. LINQ makes pagination very simple. In the List method, we get the Product objects from the repository, order them by the primary key, skip over the products that occur before the start of our page, and then take the number of products specified by the PageSize field.
  • 122. SportsStore: A Real Application• Adding Pagination – Displaying Page Links • Adding the View Model – To support the HTML helper, we are going to pass information to the view about the number of pages available, the current page, and the total number of products in the repository. The easiest way to do this is to create a view model, Add the class called PagingInfo, to the Models folder in the SportsStore.WebUI project. The PagingInfo View Model Class
  • 123. SportsStore: A Real Application• Adding Pagination – Displaying Page Links • Adding the HTML Helper Method – Create a new folder in the SportsStore.WebUI project called HtmlHelpers and add a new static class called PagingHelpers. The PageLinks extension method generates the HTML for a set of page links using the information provided in a PagingInfo object. The Func parameters provides the ability to pass in a delegate that will be used to generate the links to view other pages.
  • 124. SportsStore: A Real Application• Adding Pagination – Displaying Page Links • Adding the HTML Helper Method Namespace to the Views/Web.config File – Remember that an extension method is available for use only when the namespace that contains it is in scope. In a code file, this is done with a using statement, but for a Razor view, we must add a configuration entry to the Web.config file, or add an @using statement to the view itself. – The change we need to make is to the Views/Web.config file Every namespace that we need to refer to in a Razor view needs to be declared either in this way or in the view itself with an @using statement.
  • 125. SportsStore: A Real Application• Adding Pagination – Displaying Page Links • Adding the View Model Data – We would rather wrap all of the data we are going to send from the controller to the view in a single view model class. To do this, add a new class called ProductsListViewModel to the Models folder of the SportsStore.WebUI The ProductsListViewModel View Model
  • 126. SportsStore: A Real Application• Adding Pagination – Displaying Page Links • Adding the View Model Data – We can now update the List method in the ProductController class to use the ProductsListViewModel class to provide the view with details of the products to display on the page and details of the pagination Updating the List Method
  • 127. SportsStore: A Real Application• Adding Pagination – Displaying Page Links • Updating the List.cshtml View – The view is expecting a sequence of Product objects, so we need to List.cshtml update List.cshtml to deal with the new view model type. the new view model The page links
  • 128. SportsStore: A Real Application• Adding Pagination – Displaying Page Links
  • 129. SportsStore: A Real Application
  • 130. SportsStore: A Real ApplicationImproving the URLs We have the page links working, but they still use the query string to pass page information to the server, like this: http://localhost/?page=2 We can do better, specifically by creating a scheme that follows the pattern of composable URLs. A composable URL is one that makes sense to the user, like this one: http://localhost/Page2 Fortunately, MVC makes it very easy to change the URL scheme because it uses the ASP.NET routing feature. All we need to do is add a new route to the RegisterRoutes method in Global.asax.cs
  • 131. SportsStore: A Real ApplicationImproving the URLs Fortunately, MVC makes it very easy to change the URL scheme because it uses the ASP.NET routing feature. All we need to do is add a new route to the RegisterRoutes method in Global.asax.cs
  • 132. SportsStore: A Real ApplicationImproving the URLs The new URL scheme displayed in the browser
  • 133. SportsStore: A Real ApplicationStyling the Content The design goal for the SportsStore application
  • 134. SportsStore: A Real Application Styling the Content  Defining Common Content in the Layout - The Razor layout system is the equivalent of the ASPX master page system.
  • 135. SportsStore: A Real Application Styling the Content  Adding CSS Rules - Defining CSS Site.css
  • 136. SportsStore: A Real Application Styling the Content  Run
  • 137. SportsStore: A Real Application• Creating a Partial View – which is a fragment of content that is embedded in another view. Partial views are contained within their own files and are reusable across views, which can help reduce duplication, especially if you need to render the same kind of data in several places in your application.To add the partial view, right-click the/Views/Shared folder in theSportsStore.WebUI project and selectAdd ➤ View from the pop-up menu.
  • 138. SportsStore: A Real Application• Creating a Partial View Adding Markup to the ProductSummary Partial View Using a Partial View from List.cshtml
  • 139. SportsStore: A Real Application• Creating a Partial View Using a Partial View from List.cshtmlThe RenderPartial method doesn’t return HTML markup like most other helper methods.Instead, it writes content directly to the response stream, which is why we must call it likea complete line of C#, using a semicolon. This is slightly more efficient than buffering therendered HTML from the partial view, since it will be written to the response stream anyway. Ifyou prefer a more consistent syntax, you can use the Html.Partial method, which doesexactly the same as the RenderPartial method, but returns an HTML fragment and can beused as @Html.Partial("ProductSummary", p).
  • 140. SportsStore: A Real Application• Applying a partial view
  • 141. SportsStore: Navigation and Cart• Adding Navigation Controls – Filtering the Product List • We are going to start by enhancing our view model class, ProductsListViewModel. We need to communicate the current category to the view in order to render our sidebar Enhancing the ProductsListViewModel Class
  • 142. SportsStore: Navigation and Cart• Adding Navigation Controls – Filtering the Product List • Adding Category Support to the List Action Method
  • 143. SportsStore: Navigation and Cart• Adding Navigation Controls – Filtering the Product List • Even with these small changes, we can start to see the effect of the filtering. If you start the application and select a category using the query string, like this: http://localhost:23081/?category=SoccerUsing the query string to filter by category
  • 144. SportsStore: Navigation and CartAdding Navigation Controls Refining the URL Scheme Empty and Paging Category and Paging
  • 145. SportsStore: Navigation and Cart• Adding Navigation Controls – Adding Category Information to the Pagination Links Prior to this change, the links we were generating for the pagination links were like this: http://<myserver>:<port>/Page2 By adding the current category,we generate URLs like this instead http://<myserver>:<port>/Chess/Page2
  • 146. SportsStore: Navigation and Cart• Building a Category Navigation Menu – Creating the Navigation Controller Right-click the Controllers folder in the SportsStore.WebUI project Add ➤ Controller from the pop-up menu. Set the name of the new controller to NavControllerThe Menu Action Method Adding the RenderAction Call to the Razor Layout The RenderAction method writes its content directly to the response stream, just like the RenderPartial method. This means that the method returns void, and therefore can’t be used with a regular Razor @ tag. Instead, we must enclose the call to the method inside a Razor code block (and remember to terminate the statement with a semicolon).
  • 147. SportsStore: Navigation and Cart• Building a Category Navigation Menu – Creating the Navigation Controller Displaying the output from the Menu action method
  • 148. SportsStore: Navigation and CartBuilding a Category Navigation Menu Implementing the Menu Method Generating Category Lists
  • 149. SportsStore: Navigation and Cart• Building a Category Navigation Menu – Creating the Partial View • Leave the view name as Menu, check the option to create a strongly typed view, and enter IEnumerable<string> as the model class type the RouteLink method. This is similar to ActionLink, but it lets us supply a set of name/value pairs that are taken into account when generating the URL from the routing configuration The Menu Partial View
  • 150. SportsStore: Navigation and Cart• Building a Category Navigation Menu – CSS for the Category Links
  • 151. SportsStore: Navigation and Cart• Building a Category Navigation Menu
  • 152. SportsStore: Navigation and Cart• Highlighting the Current Category Using the View Bag Feature Notice that we used @class in the anonymous object we passed as the new parameter to the RouteLink helper method. This is not a Razor tag. We are using a C# feature to avoid a conflict between the HTML keyword class (used to assign a CSS style to an element) and the C# use of the same word (used to create a class). The @ character allows us to use reserved keywords without confusing the compiler. If we just called the parameter class (without the @), the compiler would assume we are defining a new C# type.
  • 153. SportsStore: Navigation and Cart• Highlighting the Current Category
  • 154. SportsStore: Navigation and Cart• Correcting the Page Count Displaying the wrong page links when a category is selected
  • 155. SportsStore: Navigation and Cart• Correcting the Page Count Creating Category-Aware Pagination Data
  • 156. SportsStore: Navigation and Cart• Correcting the Page Count Displaying category-specific page counts
  • 157. SportsStore: Navigation and Cart• Building the Shopping Cart The basic shopping cart flow
  • 158. Defining the CartEntity
  • 159. SportsStore: Navigation and Cart• Building the Shopping Cart – Adding the Add to Cart Buttons • We need to edit the Views/Shared/ProductSummary.cshtml partial view to add the buttons to the product listings.
  • 160. SportsStore: Navigation and CartBuilding the Shopping CartImplementing the Cart ControllerWe need to create a controller tohandle the Add to cart buttonpresses. Create a new controllercalled CartController
  • 161. SportsStore: Navigation and Cart• Building the Shopping Cart – Displaying the Contents of the Cart • The final point to note about the Cart controller is that both the AddToCart and RemoveFromCart methods call the RedirectToAction method. This has the effect of sending an HTTP redirect instruction to the client browser, asking the browser to request a new URL. In this case, we have asked the browser to request a URL that will call the Index action method of the Cart controller. We need to pass two pieces of information to the view that will display the contents of the cart: the Cart object and the URL to display if the user clicks the Continue shopping button. The CartIndexViewModel Class
  • 162. SportsStore: Navigation and Cart• Building the Shopping Cart – implement the Index action method in the Cart controller class The last step is to display the contents of the cart is to create the new view. Right-click the Index method and select Add View from the pop-up menu.
  • 163. SportsStore: Navigation and CartThe Index View
  • 164. SportsStore: Navigation and CartCSS for Displaying the Contents of the Cart
  • 165. SportsStore: Navigation and Cart• Using Model Binding • called model binding to create C# objects from HTTP requests in order to pass them as parameter values to action methods. – Creating a Custom Model Binder • We create a custom model binder by implementing the IModelBinder interface. Create a new folder in the SportsStore.WebUI project called Binders and create the CartModelBinder class inside that folder. The ControllerContext provides access to all of the information that the controller class has, which includes details of the request from the client. ModelBindingContext gives you information about the model object you are being asked to build and tools for making it easier.
  • 166. SportsStore: Navigation and Cart• Creating a Custom Model Binder • We need to tell the MVC Framework that it can use our CartModelBinder class to create instances of Cart. We do this in the Application_Start method of Global.asax
  • 167. SportsStore: Navigation and CartWe can now update theCartController class to remove theGetCart method and rely on ourmodel binder.
  • 168. SportsStore: Navigation and Cart• Completing the Cart – Removing Items from the Cart • we are going to do by adding a Remove button in each row of the cart summary. The changes to Views/Cart/Index.cshtmlWe can use the strongly typed Html.HiddenFor helper method to create a hidden field for theReturnUrl model property, but we need to use the string-based Html.Hidden helper to do thesame for the Product ID field. If we had written Html.HiddenFor(x => line.Product.ProductID),the helper would render a hidden field with the name line.Product.ProductID. The name of thefield would not match the names of the parameters for the CartController.RemoveFromCartaction method, which would prevent the default model binders from working, so the MVCFramework would not be able to call the method.
  • 169. SportsStore: Navigation and Cart• Completing the Cart – Removing Items from the Cart Removing an item from the shopping cart
  • 170. SportsStore: Navigation and Cart• Completing the Cart – Adding the Cart Summary – we are going to add a widget that summarizes the contents of the cart and can be clicked to display the cart contents. Adding the Summary Method to the Cart Controller
  • 171. SportsStore: Navigation and Cart• Completing the Cart – Adding the Cart Summary We need to create a partial view that will be rendered in response to the Summary method being called. Right-click the Summary method and select Add View from the pop-up menu. The Summary Partial View
  • 172. SportsStore: Navigation and Cart• Completing the Cart – Adding the Cart Summary Partial View to the Layout Adding Styles to Site.css The cart summary widget
  • 173. SportsStore: Navigation and Cart• Submitting Orders Extending the Domain Model Add a class called ShippingDetails to the Entities folder of the SportsStore.Domain project. This is the class we will use to represent the shipping details for a customer.
  • 174. SportsStore: Navigation and Cart• Submitting Orders – Adding the Checkout Process • Our goal is to reach the point where users are able to enter their shipping details and submit their order.To start this off, we need to add a Checkout now button to the cart summary view. shows the change we need to apply to the Views/Cart/Index.cshtml The Checkout now button
  • 175. SportsStore: Navigation and Cart• Submitting Orders – Adding the Checkout Process • As you might expect, we now need to define the Checkout method in the CartController class. Adding the Checkout view
  • 176. SportsStore: Navigation and Cart The shipping details form
  • 177. SportsStore: Navigation and Cart• Submitting Orders – Implementing the Order Processor • Defining the Interface – Add a new interface called IOrderProcessor to the Abstract folder of the SportsStore.Domain project The IOrderProcessor Interface
  • 178. SportsStore: Navigation and Cart• Submitting Orders – Implementing the Order Processor • Implementing the Interface – Create a new class called EmailOrderProcessor in the Concrete folder of the SportsStore.Domain project
  • 179. SportsStore: Navigation and Cart EmailOrderProcessor
  • 180. SportsStore: Navigation and Cart• Submitting Orders – Registering the Implementation – Edit the NinjectControllerFactory class in the SportsStore.WebUI project Adding Ninject Bindings for IOrderProcessor Application Settings in the Web.config File
  • 181. SportsStore: Navigation and Cart• Submitting Orders – Completing the Cart Controller add a new action method that will handle the HTTP form POST when the user clicks the Complete order button.
  • 182. SportsStore: Navigation and Cart• Submitting Orders – Displaying Validation Errors • Adding a Validation Summary
  • 183. SportsStore: Navigation and Cart• Submitting Orders – Displaying a Summary Page • Right-click either of the Checkout methods in the CartController class and select Add View from the pop-up menu. Set the name of the view to Completed The Completed.cshtml View The thank-you page
  • 184. SportsStore: Administration• Adding Catalog Management – The convention for managing collections of items is to present the user with two types of pages: a list page and an edit page Sketch of a CRUD UI for the product catalogThese pages allow a user to create, read, update, and delete items in the collection. As notedin Chapter 7, collectively, these actions are known as CRUD. Developers need to implementCRUD so often that Visual Studio tries to help by offering to generate MVC controllers that haveaction methods for CRUD operations and view templates that support them.
  • 185. SportsStore: Administration• Creating a CRUD Controller – Right-click the Controllers folder of the SportsStore.WebUI project and select Add > Controller from the pop-up menu. Set the name of the controller to AdminController and select Controller with empty read/write actions from the Template drop-down list,
  • 186. SportsStore: Administration• Creating a CRUD Controller – We want to demonstrate how to build up the controller and explain each step as we go. So, remove all of the methods in the controller Rendering a Grid of Products in the Repository The Index Action Method
  • 187. SportsStore: Administration• Creating a CRUD View – Creating a New Layout • Right-click the Views/Shared folder in the SportsStore.WebUI project and select Add > New Item. Select the MVC 3 Layout Page (Razor) template and set the name to _AdminLayout.cshtml Creating a new Razor layout
  • 188. SportsStore: Administration• Creating a CRUD View – Creating a New Layout • create the Admin.css file, right-click the Content folder, select Add > New Item, select the Style Sheet template. The CSS Styles for the Admin Views
  • 189. SportsStore: Administration• Creating a CRUD View – Implementing the List View • we can add a view to the project for the Index action method of the Admin controller. Right-click inside the Index method and select Add View When using the List scaffold, Visual Studio assumes you are working with an IEnumerable sequence of the model view type, so you can just select the singular form of the class from the list.
  • 190. SportsStore: Administration• Creating a CRUD Controller – Modifying the Index.cshtml
  • 191. SportsStore: Administration• Creating a CRUD Controller – Editing Products • Creating the Edit Action Method – Add the Edit method to the AdminController class. This is the action method we specified in the calls to the Html.ActionLink helper method in the Index view. The Edit Method
  • 192. SportsStore: Administration• Creating a CRUD Controller – Creating the Edit View • Right-click in the Edit action method and select Add View. Leave the view name as Edit, check the option for a strongly typed view, and ensure that the Product class is selected as the model class Instead of writing out markup for each of the labels and inputs by hand, we have called the Html.EditorForModel helper method. This create the editing interface for us, which it does by inspecting the model type
  • 193. SportsStore: Administration• Creating a CRUD Controller – Creating the Edit View • We can give the MVC Framework directions about how to create editors for properties by using model metadata,. This allows us to apply attributes to the properties of the new model class to influence the output of the Html.EditorForModel method. Using Model Metadata The HiddenInput attribute tells the MVC Framework to render the property as a hidden form element, and the DataType attribute allows us to specify how a value is presented and edited. In this case, we have selected the MultilineText option.
  • 194. SportsStore: Administration• Creating a CRUD Controller – CSS Styles for the Editor Elements
  • 195. SportsStore: Administration• Creating a CRUD Controller – Updating the Product Repository • we need to enhance the product repository so that we can save changes. First, we will add a new method to the IProductRepository interface Implementing the SaveProduct Method
  • 196. SportsStore: Administration• Creating a CRUD Controller – Handling Edit POST Requests • we are ready to implement an overload of the Edit action method that will handle POST requests when the administrator clicks the Save button After we have saved the changes in the repository, we store a message using the TempData feature. This is a key/value dictionary, similar to the session data and ViewBag features we have used previously. The key difference is that TempData is deleted at the end of the HTTP request. Notice that we return the ActionResult type from the Edit method. We’ve been using the ViewResult type until now. ViewResult is derived from ActionResult, and it is used when you want the framework to render a view. However, other types of ActionResults are available, and one of them is returned by the RedirectToAction method. We use that in the Edit action method to invoke the Index action method.
  • 197. SportsStore: Administration• Creating a CRUD Controller – Displaying a Confirmation Message • We are going to deal with the message we stored using TempData in the _AdminLayout.cshtml layout file. By handling the message in the template, we can create messages in any view that uses the template, without needing to create additional Razor blocks.
  • 198. SportsStore: Administration• Creating a CRUD Controller – Adding Model Validation Applying Validation Attributes to the Product Class
  • 199. SportsStore: Administration• Creating a CRUD Controller – Enabling Client-Side Validation • This feature is enabled by default, but it hasn’t been working because we have not added links to the required JavaScript libraries. The simplest place to add these links is in the _AdminLayout.cshtml, so that client validation can work on any page that uses the layout.
  • 200. SportsStore: Administration• Creating a CRUD Controller – Creating New Products • First, add the Create method to the AdminController class. This leads us to the modification. We would usually expect a form to postback to the action that rendered it, and this is what the Html.BeginForm assumes by default when it generates an HTML form. Now the form will always be posted to the Edit action, regardless of which action rendered it.
  • 201. SportsStore: Administration• Creating a CRUD Controller – Creating New Products
  • 202. SportsStore: Administration• Creating a CRUD Controller – Deleting Products • First, we add a new method to the IProductRepository interface Adding a Method to Delete Products Implementing Deletion Support in the Entity Framework Repository Class The Delete Action Method
  • 203. SportsStore: Administration• Securing the Administration Features – Setting Up Forms Authentication • If you open the Web.config file, you will be able to find a section entitled authentication, like this As you can see, forms authentication is enabled automatically in an MVC application created with the Empty or Internet Application template. The loginUrl attribute tells ASP.NET which URL users should be directed to when they need to authenticate themselves—in this case, the /Account/Logon page. The timeout attribute specifies how long a user is authenticated after logging in. By default, this is 48 hours (2,880 minutes). we will create a username and password that will grant access to the administration features.
  • 204. SportsStore: Administration• Securing the Administration Features – Setting Up Forms Authentication • Applying Authorization with Filters Adding the Authorize Attribute to the Controller Class You can apply filters to an individual action method or to a controller. When you apply a filter to a controller, it works as though you had applied it to every action method in the controller class. We applied the Authorize filter to the class, so all of the action methods in the Admin controller are available only to authenticated users.
  • 205. SportsStore: Administration• Securing the Administration Features – Setting Up Forms Authentication • Applying Authorization with Filters The effect of the Authorize filter We have not created the Account controller yet, but you can still see that the authentication is working, although it doesn’t prompt us to authenticate ourselves.
  • 206. SportsStore: Administration• Securing the Administration Features – Setting Up Forms Authentication • Creating the Authentication Provider – We start by defining the authentication provider interface. Create a new folder called Abstract in the Infrastructure folder of the SportsStore.WebUI project and add a new interface called IAuthProvider. We can now create an implementation of this interface that acts as a wrapper around the static methods of the FormsAuthentication class. Create another new folder in Infrastructure this time called Concrete and create a new class called FormsAuthProvider.
  • 207. SportsStore: Administration• Securing the Administration Features – Setting Up Forms Authentication • Creating the Authentication Provider – The final step is to register the FormsAuthProvider in the AddBindings method of the NinjectControllerFactory class
  • 208. SportsStore: Administration• Securing the Administration Features – Setting Up Forms Authentication • Creating the Account Controller Create a view model class that we will pass between the controller and the view Add a new class to the Models folder of the SportsStore.WebUI project called LogOnViewModelThe LogOnViewModel Class The AccountController Class
  • 209. SportsStore: Administration• Securing the Administration Features – Setting Up Forms Authentication • Creating the View Right-click in one of the action methods in the Account controller class and select Add View from the popup menu. Create a strongly typed view called LogOn that uses LogOnViewModel as the view model type The LogOn View
  • 210. SportsStore: Administration• Image Uploads – Extending the Database
  • 211. SportsStore: Administration• Image Uploads – Enhancing the Domain Model
  • 212. SportsStore: Administration• Image Uploads – Updating the Entity Framework Conceptual Model
  • 213. SportsStore: Administration• Image Uploads – Creating the Upload User Interface Elements • creating a UI that the administrator can use to upload an image. Modify the Views/Admin/Edit.cshtml You may not be aware that web browsers will upload files properly only when the HTML form element defines an enctype value of multipart/form-data.
  • 214. SportsStore: Administration• Image Uploads – Saving Images to the Database We need to enhance the POST version of the Edit action method in the AdminController class so that we take the image data that has been uploaded to us and save it in the database.
  • 215. SportsStore: Administration• Image Uploads – Implementing the GetImage Action Method we added an img element whose content was obtained through a GetImage action method. We are going to implement this so that we can display images contained in the database. ProductController- The GetImage Action Method
  • 216. SportsStore: Administration• Image Uploads
  • 217. SportsStore: Administration• Image Uploads – Displaying Product Images All that remains is to display the images alongside the product description in the product catalog. Edit the Views/Shared/ProductSummary.cshtml
  • 218. SportsStore: Administration• Image Uploads
  • 219. Thanks