Murach: An introduction to web programming with ASP.NET Core MVC
- 1. Chapter 1 An introduction to web programming with ASP.NET Core MVC..
- 2. Objectives: web apps. ASP.NET Core MVC. Tools for working with ASP.NET Core MVC apps . How an ASP.NET Core MVC app works .
- 3. The components of a web app: The web apps consist of clients and a web server.. The clients are the computers and mobile devices that use the web apps. The web server holds the files that generate the pages of a web app.
- 4. The components of an HTTP URL A URL consists of the protocol (usually, HTTPS), domain name, path, and filename. If you omit the protocol, HTTPS is assumed. If you omit the filename, the web server typically looks for a file named index.html, index.htm, default.html, or default.htm…
- 5. How static web pages are processed: How a web server processes a dynamic web page:
- 6. An introduction to the MVC pattern: The MVC (Model-View-Controller) pattern is commonly used to structure web apps that have significant processing requirements. Most modern web development frameworks today use some form of the MVC pattern. As you’ll learn in this book, ASP.NET Core provides extensive support for the MVC pattern. The MVC pattern:
- 7. Components of the MVC pattern The model consists of the code that provides the data access and business logic. The view consists of the code that generates the user interface and presents it to the user. The controller consists of the code that receives requests from users, gets the appropriate data and stores it in the model Benefits of the MVC pattern: Makes it easier to have different members of a team work on different components. Makes it possible to automate testing of individual components. Makes it possible to swap out one component for another component.
- 8. An introduction to ASP.NET Core MVC.. Now that you understand some concepts that apply to most web apps, you’re ready to learn some concepts that are more specific to ASP.NET Core MVC apps. ASP.NET Web Forms: Released in 2002, Provides for RAD (Rapid Application Development) by letting developers build web pages by working with a design surface in a way that’s similar to Windows Forms. Uses the ASP.NET Framework, which is proprietary and only runs on Windows ASP.NET MVC: Released in 2007, Uses the MVC pattern that’s used by many other web development platforms. Uses the same proprietary, Windows-only ASP.NET Framework as Web Forms. ASP.NET Core MVC: Released in 2015, Uses a service to implement the MVC pattern. Is built on the open-source ASP.NET Core platform that can run on multiple platforms including Windows, macOS, and Linux.
- 9. Some web components of .NET and .NET Core: There are several important differences between .NET and .NET Core. Specifically, the .NET Core platform is open source and supports multiple operating systems including Windows, macOS, and Linux. By contrast, the .NET Framework is proprietary and only supports the Windows operating system. On the other hand, the .NET Framework supports all three programming models described in the previous figure. However, of these three programming models, the .NET Core platform only supports ASP.NET Core MVC. Some web components of .NET and .NET Core:
- 10. An introduction to ASP.NET Core middleware: An ASP.NET Core app allows you to configure the middleware components that are in the HTTP request and response pipeline. This gives developers a lot of flexibility in how an app works. Each middleware component can modify the HTTP request before passing it on to the next component in the pipeline. Similarly, each middleware component can modify the HTTP response before passing it to the next component in the pipeline. If the authorization middleware determines that the client is not authorized to make the request, it short circuits the request by passing a response back to the web server. Along the way, the authentication middleware can edit the content of the response.
- 11. A request that makes it through all middleware in the pipeline: A request that’s short circuited by a middleware component in the pipeline:
- 12. Concepts •State refers to the current status of the properties, variables, and other data maintained by an app for a single user. • HTTP is a stateless protocol. That means that it doesn’t keep track of state between round trips. Once a browser makes a request and receives a response, the app terminates and its state is lost Why state is difficult to track in a web app
- 13. Description • ASP.NET Web Forms attempted to hide the stateless nature of a web app from developers by automatically maintaining state. This led to poor performance. • ASP.NET Core MVC does not attempt to hide the stateless nature of a web app from developers. Instead, it provides features to handle state in a way that gives developers control over each HTTP request and response.
- 14. Tools for working with ASP.NET Core MVC apps: Now that you know some of the concepts behind ASP.NET Core MVC, you’re ready to learn more about the tools that you can use to develop ASP.NET Core MVC apps. Some developers prefer to use an integrated development environment (IDE), which is a tool that provides all of the functionality that you need for developing an app in one place. Other developers prefer to use a code editor to enter and edit code and a command line to compile and run it. There are pros and cons to each approach. Fortunately, an excellent IDE and code editor are both available for free to ASP.NET Core MVC developers.
- 15. An introduction to Visual Studio : Visual Studio, also known just as VS, is the most popular IDE for developing ASP.NET Core apps. Microsoft provides a Community Edition that’s available for free and runs on Windows, as well as a free version that runs on macOS. Figure 1-9 shows Visual Studio after it has opened an ASP.NET Core MVC app and displayed the code for one of its controllers. In addition, this figure lists some of the features provided by Visual Studio. For example, you can compile and run an app with a single keystroke. Visual Studio is an established product that has been around for decades, and it’s a great tool for learning. That’s why we present it throughout this book, starting in the next chapter. 04/07/2020 - tp- 9df69004-78a4-11ea-a123-024 (temp temp) - Murach's ASP.NET Core MV
- 16. Visual Studio with an ASP.NET Core MVC app :
- 17. Features IntelliSense code completion makes it easy to enter code. • Automatic compilation allows you to compile and run an app with a single keystroke. Integrated debugger makes it easy to find and fix bugs. Runs on Windows and macOS
- 18. Description An Integrated Development Environment (IDE) is a tool that provides all of the functionality that you need for developing web apps. Visual Studio, also known as VS, is the most popular IDE for ASP.NET Core web development. Starting in the next chapter, this book shows how to use Visual Studio to develop ASP.NET Core MVC apps.
- 19. An introduction to Visual Studio Code Visual Studio Code, also known as VS Code, is a code editor that’s becoming popular with Microsoft developers. Like Visual Studio, VS Code can be used to develop all types of .NET apps, including ASP.NET Core apps. Since it doesn’t provide as many features as an IDE like Visual Studio, some developers find VS Code easier to use. In addition, VS Code typically starts and runs faster than Visual Studio, especially on slower computers. Figure 1-10 shows VS Code after it has opened the same app as the previous figure. If you compare these two figures, you’ll see that they look very similar. In short, both provide an Explorer window that lets you navigate through the files for an app, and both provide a code editor for editing the code for an app. The main difference is that Visual Studio provides more features than VS Code. That’s either good or bad, depending on how you look at it. This figure also lists some of the features provided by VS Code. If you compare this list of features with the list of features in the previous figure, you’ll see that they’re mostly the same. The main difference is that VS Code runs on Linux, and Visual Studio does not. So, even though Visual Studio provides more features, VS Code provides all of the most essential features that make it easy to develop ASP.NET Core apps.
- 20. Visual Studio Code with an ASP.NET Core MVC app :
- 21. Features : IntelliSense code completion makes it easy to enter code. Automatic compilation allows you to compile and run an app with a single keystroke. Integrated debugger makes it easy to find and fix bugs. Runs everywhere (Windows, macOS, and Linux). Description: Visual Studio Code, also known as VS Code, is a code editor that you can use to work with ASP.NET Core apps. When you use VS Code, you can use its Terminal window to use a command line to enter and execute the commands that build and run an app. VS Code has a less restrictive license than the Community Edition of Visual Studio and adheres to a truly open-source, open-use model. Chapter 17 shows how to use VS Code to develop ASP.NET Core MVC apps..
- 22. How an ASP.NET Core MVC app works: Now that you’ve been introduced to some general concepts and tools for working with ASP.NET Core MVC, you’re ready to learn more about how an ASP.NET Core MVC app works. To do that, the next few figures present the overall structure of an ASP.NET Core MVC app as well as some key snippets of code. This should give you a general idea of how an ASP.NET Core MVC app works. Then, in the next chapter, you’ll learn all of the details for coding such an app.
- 23. How coding by convention work ASP.NET Core MVC uses a software design paradigm known as convention over configuration, or coding by convention. This reduces the amount of configuration that developers need to do if they follow certain conventions. That’s why figure 1-11 shows some of the folders and files for an MVC web app that follows the standard MVC conventions. And that’s why this figure lists some of these conventions. To start, the top-level folder for a web app is known as its root folder, also known as the root directory. In this figure, the Guitar Shop folder is the root folder. Within the root folder, you typically use .cs files to store the C# classes that define controllers and models. All controller classes should be stored in a folder named Controllers or one of its subfolders. In this figure, the Controllers folder contains the files for two classes named Home Controller and Product Controller. Both of these classes have a suffix of “Controller”. This isn’t required for controllers to work, but it’s a standard convention that makes it easy for other programmers to quickly identify these classes as controller classes. All model classes should be stored in a folder named Models or one of its subfolders. In this figure, the Models folder contains a single file for a model class named Product
- 24. Some of the folders and files for a web app: GuitarShop /Controllers /HomeController.cs /ProductController.cs /Product.cs /Views /Home /About.cshthml /Index.cshthml /Product /Detail.cshthml /List.cshthm /wwwroot
- 25. Some naming conventions for an ASP.NET Core MVC app : All controller classes should be stored in a folder named Controllers or one of its subfolders. All model classes should be stored in a folder named Models or one of its subfolders . All view files should be stored in a folder named Views or one of its subfolders. All static files such as image files, CSS files, and JavaScript files should be stored in a folder named www nroot or one of its subfolders. All controller classes should have a suffix of “Controller”
- 26. Description: ASP.NET Core MVC uses a software design paradigm known as convention over configuration, or coding by convention. This reduces the amount of configuration that developers need to do if they follow certain conventions. The top-level folder for a web app is known as its root folder or root directory. You typically use C# classes (.cs files) to define controllers and models. You typically use Razor views (.cshtml files) to define views. The static files for an app can include CSS libraries such as Bootstrap or JavaScript libraries such as jQuery. In addition, they can include custom CSS or JavaScript files that override the code in these libraries
- 27. How a controller passes a model to a view: In ASP.NET Core MVC, a model is a C# class that defines the data objects and business rules for the app. Figure 1-12 begins by showing the code for a model named Product. This class is stored in the GuitarShop.Models namespace, and it defines a simple Product object. In the Product class, you shouldn’t have any trouble understanding the ID, Name, and Price properties. However, the Slug property is a read-only property that’s created by replacing all spaces in the product’s name with dashes. This property can be used in the URL that’s used to display the product. You’ll learn more about using slugs in chapter 4.
- 28. The code for a model class named Produc:
- 29. The code for a controller class named ProductController:
- 30. Description : A model is a C# class that defines the data objects and business rules for the app. With ASP.NET Core MVC, a controller is a C# class that typically inherits the Microsoft.AspNetCore.Mvc.Controller class. With ASP.NET Core MVC, an action is a method of a controller that returns an action result. An action method can use the View() method to return a type of action result known as a view result that’s created by merging the model (if there is one) into the corresponding view file
- 31. How a view uses Razor code, tag helpers, and Bootstrap CSS classes: Most of a typical view file consists of HTML elements. In figure 1-13, for example, the code uses an element to display a level-1 heading. It uses the <table>, <tr>,and <td> elements to display a table that has three rows with two columns. And it uses an element to display a link that’s formatted to look like a button..
- 32. The code for a view file named Product/Detail.cshtml :
- 33. The view displayed in a browser : Description : Most of a typical view file consists of standard HTML elements. The @model directive specifies the class for the model, and the @Model property allows you to access the model object that’s passed to the view from the controller. The @ sign followed by braces ({}) identifies a block of C# statements. Within the block, you can code one or more C# statements. All HTML attributes that start with “asp-” are tag helpers. Tag helpers are defined by C# classes and make it easier to work with HTML elements. Many tag helpers are built into ASP.NET Core MVC. The class attribute of an HTML element can specify CSS classes from Bootstrap, a popular open-source CSS library that’s often used with ASP.NET Core MVC.
- 34. The Startup.cs file How request URLs map to controllers and actions by default
- 35. Description : The Startup.cs file contains the code that configures the middleware that’s used by the app. In other words, it builds the middleware pipeline for the app. The ConfigureServices() method contains the code that adds services to the app. The Configure() method contains the code that identifies which services to use and provides additional configuration if necessary. By convention, the routing system identifies the Home controller as the default controller and the Index() action method as the default action
- 36. Perspective: Now that you’ve read this chapter, you should have a general understanding of how ASP.NET Core MVC apps work and what software you need for developing these apps. With that as background, you’re ready to gain valuable hands-on experience by learning how to develop an ASP.NET Core MVC app as shown in the next chapter..
- 38. Summary: A web app, also known as a web application, consists of a set of web pages that are run by clients, a web server, and a network. Clients often use web browsers to request web pages from the web server. The web server returns the requested pages. A local area network (LAN), or intranet, connects computers that are near each other. By contrast, the Internet consists of many wide area networks (WANs). One way to access a web page is to type a URL (Uniform Resource Locator) into the address area of a browser and press Enter. A URL consists of the protocol (usually, HTTPS), domain name, path, and filename. To request a web page, the web browser sends an HTTP request to the web server. Then, the web server gets the HTML/CSS/JavaScript for the requested page and sends it back to the browser in an HTTP response. Last, the browser renders the HTML/CSS/JavaScript into a web page
- 39. Exercise 1-1 Use Visual Studio to run the Guitar Shop app In this exercise, you’ll run the Guitar Shop app. This will test whether you’ve successfully installed the software and source code for this book. Start Visual Studio and open the Guitar Shop app 1.Start Visual Studio. 2. From the menu system, select the File Open Project/Solution item. Or, if you are in the Start window for Visual Studio, you can click the “Open a project or solution” button. In the dialog box that’s displayed, navigate to this folder: /aspnet_core_mvc/book_apps/Ch01GuitarShop Then, select the Ch01GuitarShop.sln file and click the Open button. 3. If you get any error messages, click on the appropriate buttons to fix them. VS Code should be able to do this for you.
- 40. Run the Guitar Shop app: 4. Press Ctrl+F5 to run the app. That should display the Home page for the Guitar Shop app in Visual Studio’s default web browser. If you get messages about trusting and installing an SSL certificate, you can click Yes. And if a web page is displayed indicating that the connection is not private, you can click the link to proceed. 5. Click the “View Fender Stratocaster” link. This should display the Product Detail page for that product. 6. Click the Home button to return to the Home page. 7. Click the “View Products” link. This should display a list of products. 8. Click the View link for the product named Gibson Les Paul. This should display the Product Detail page for that product. 9. Close the browser tab or window for the app, and then switch back to Visual Studio.
- 41. 10. In the Solution Explorer, expand the Controllers, Models, and Views folders and review some of the code Close the Guitar Shop app and exit Visual Studio: 11. Use the File Close Solution command to close the solution. 12. Exit Visual Studio
- 42. Finish…