Unit3.pdf

Web Programming using.NET #2305CS311 Unit-3 Helpers & Routing Prof. Naimish R. Vadodariya Computer Science & Engineering Department Darshan University, Rajkot [email protected] 8866215253  Outl...

Web Programming using.NET #2305CS311 Unit-3 Helpers & Routing Prof. Naimish R. Vadodariya Computer Science & Engineering Department Darshan University, Rajkot [email protected] 8866215253  Outline Looping Different Types of Razor Files Partial Views Helpers Overview Tag Helpers HTML Helpers Routing Overview of Routing Conventional Routing Attribute Routing Routing Parameters Different Types of Razor Files Section – 3.1 Different Types of Razor Files  All Razor files ends with.cshtml.  Most of Razor files are intended to be browsable and contains a mixture of client-side and server-side code, when it is processed, results in HTML being sent to the browser.  These pages are usually referred to as "content pages".  Also other Razor files have a leading underscore (_) in their file name like _Layout.cshtml , _ ViewStart.cshtml, _ViewImports.cshtml etc.  The leading underscore in the file name indicates that these files are not intended to be served directly by the browser. Prof. Naimish R. Vadodariya #2305CS311 (Web Programming using.NET)  Unit -3 Helpers & Routing 4 Different Types of Razor Files  Razor files are used in ASP.NET Core to create dynamic web pages with a mix of HTML and C# code. Here are the different types of Razor files:  Content Pages:  These are the most common Razor files, ending with.cshtml.  They contain a mix of client-side and server-side code, which results in HTML being sent to the browser.  Partial Pages:  These files also end with.cshtml but have a leading underscore (e.g., _Partial.cshtml).  They are not intended to be browsable directly and are used to include reusable components in other pages.  Layout Pages:  The _Layout.cshtml file acts as a template for other content pages.  It typically includes the site’s header, footer, and navigation, ensuring a consistent design across the site.  View Start Pages:  The _ViewStart.cshtml file contains code that runs before any content page in the same folder or subfolders.  It’s often used to specify the layout file for all affected content pages.  View Imports Pages:  The _ViewImports.cshtml file is used to include directives that should be available to all Razor pages in a folder hierarchy, such as namespaces and tag helpers. Prof. Naimish R. Vadodariya #2305CS311 (Web Programming using.NET)  Unit -3 Helpers & Routing 5 _Layout.cshtml  The _Layout.cshtml file acts a template for all content pages that reference it.  Consistent part of a site's design are declared in the _Layout.cshtml file.  These can include the header, footer, site navigation, main content area and so on.  Typically, the _Layout.cshtml file also includes the section of the page, so they also reference the common CSS style sheet files and JavaScript files. In ASP.NET Core MVC, creating multiple layout files for a single application is possible.  If you want to make changes to the overall For example, you may have one layout file for the design of the site, you often only need to make admin users and another layout file for non-admin adjustments to the content of the _ users of your application. Layout.cshtml. Prof. Naimish R. Vadodariya #2305CS311 (Web Programming using.NET)  Unit -3 Helpers & Routing 6 _Layout.cshtml  We can say that the common UI code, which can be used in many views, can go into a common view called _Layout in application.  As the layout views are not specific to any controller.  As the layout view will be used across multiple views of our application, we usually place the layout views in a Shared subfolder within the Views folder.  By default, in ASP.NET Core MVC App, the layout view file is named _Layout.cshtml. But you can change the name if you wish. Prof. Naimish R. Vadodariya #2305CS311 (Web Programming using.NET)  Unit -3 Helpers & Routing 7 _ViewStart.cshtml  The _ViewStart.cshtml file contains code that executes after the code in any content page in the same folder or any child folders.  It provides a convenient location to specify the layout file for all content pages that are affected by it, and that is typically what you see in the _ViewStart.cshtml file that comes with any Razor Pages (or MVC) template. Prof. Naimish R. Vadodariya #2305CS311 (Web Programming using.NET)  Unit -3 Helpers & Routing 8 _ViewImports.cshtml  It is a special Razor view file that allows us to specify the common namespaces, directives, and other elements, that will be automatically imported and applied to all views within a specific directory and its subdirectories.  It helps us to simplify the Razor syntax and reduce repetitive code by centralizing the import statements in one place. Prof. Naimish R. Vadodariya #2305CS311 (Web Programming using.NET)  Unit -3 Helpers & Routing 9 Partial Views Section – 3.2 Introduction : Partial View  Partial Views in ASP.NET Core MVC are used to render a portion of the view content.  They help in breaking down large views into smaller, reusable components, promoting maintainability and reducing code duplication.  A partial view is a regular view but it can be used multiple times in an application and it has the file extension similar to view as.cshtml.  We need to create a partial views when we need a common part of the user interface on multiple pages in our web application.  Sometimes we also use a partial view to divide a web page into small parts such as header, footer, and menu on Layout.  Partial Views are the views that are rendered within another view and do not run on their own.  Often start with an underscore (e.g., _PartialView.cshtml), though not mandatory. Prof. Naimish R. Vadodariya #2305CS311 (Web Programming using.NET)  Unit -3 Helpers & Routing 11 Partial View Example Prof. Naimish R. Vadodariya #2305CS311 (Web Programming using.NET)  Unit -3 Helpers & Routing 12 Views v/s Partial Views Views Partial Views View contains the layout page Partial View does not contain the layout page Before any view is rendered, viewstart page is rendered Partial view does not verify for a viewstart.cshtml page View might have markup tags like body, html, head, title, Meta Partial view is designed specially to render within the view etc. and just because of that it does not consist any mark up tag View is not lightweight as compare to Partial View Partial view is lightweight A "View" in the context of web development typically refers to Partial view is a reusable piece of a view that can be included the template or markup that defines the structure and in multiple views. presentation of the entire page. Views are typically rendered as complete pages. Partial Views are embedded within views and can be dynamically loaded or included where needed. Views are typically not as reusable as partial views because Partial Views are designed for reusability, you can include the they often encapsulate a specific page's structure and same partial view in multiple views to maintain consistent UI content. elements across different parts of your application. Prof. Naimish R. Vadodariya #2305CS311 (Web Programming using.NET)  Unit -3 Helpers & Routing 13 Tag Helpers Section 3.3 Tag Helpers  Tag Helpers are classes written in C# but are attached to HTML elements in order to run server- side code from Razor view.  It enable server-side code to participate in creating and rendering HTML elements in Razor files.  There are many built-in Tag Helpers for common tasks, such as creating forms, links, loading assets etc.  Tag Helpers are authored in C#, and they target HTML elements based on the element name, the attribute name, or the parent tag.  For example, the built-in LabelTagHelper can target the HTML element when the LabelTagHelper attributes are applied.  If you are familiar with HTML Helpers, Tag Helpers reduce the explicit transitions between HTML and C# in Razor views. Prof. Naimish R. Vadodariya #2305CS311 (Web Programming using.NET)  Unit -3 Helpers & Routing 15 Using a Tag Helpers  To use the inbuilt or custom Tag Helpers, one has to first reference Tag Helper library named Microsoft.AspNetCore.Mvc.TagHelpers.  It can also be taken from Nuget.  It using @AddTagHelper directive as shown below inside _ViewImports.cshtml,  In the above line, all the Tag helpers will be imported which are mentioned in 'Microsoft.AspNetCore.Mvc.TagHelpers' assembly.  Whatever it is referenced/imported inside _ViewImports.cshtml will be available for all the views. Prof. Naimish R. Vadodariya #2305CS311 (Web Programming using.NET)  Unit -3 Helpers & Routing 16 Common Built-in Tag Helpers  These Tag Helpers are provided by default as part of the ASP.NET Core framework.  They cover common scenarios and tasks, making generating HTML with dynamic behavior easier, such as generating links, creating forms, loading assets, showing validation messages, etc. Some examples of built-in Tag Helpers include:  Link: Generates a link with a URL that’s generated by routing based on the specified controller and action.  : Generates a tag with a cache-busting query string to ensure the latest version of the image is fetched.  …: Generates a form element with the appropriate action attribute for the specified controller and action.  : Generates an input field with attributes based on the model property specified by asp-for.  : Generates a username validation message with specified control. Prof. Naimish R. Vadodariya #2305CS311 (Web Programming using.NET)  Unit -3 Helpers & Routing 17 Built-in Tag Helpers Cont.. Attribute Asp Attribute Name Description area asp-area The name of the Area controller asp-controller The name of the MVC controller action asp-action The name of the action method on an MVC controller route asp-route The name of the route route- asp-route-* A single route parameter value Fragment asp-fragment This is particularly useful when you want to link to a specific section of a page. host asp-host Web Host or Generic Host | Configures a server and request processing pipeline page asp-page The Razor page to link to protocol asp-protocol The protocol (http, https, ftp etc) Prof. Naimish R. Vadodariya #2305CS311 (Web Programming using.NET)  Unit -3 Helpers & Routing 18 HTML Helpers Section 3.4 Introduction: HTML Helpers  HTML Helpers are classes that can generate html tags in Razor view pages.  An HTML Helper is just a method that returns a HTML string.  The string can represent any type of content that you want.  For example, you can use HTML Helpers to render standard HTML tags like HTML , and tags etc.  It also binds the model object to HTML controls to display the value of model properties into those controls and also assigns the value of the controls to the model properties while submitting a web form.  So, we can always use the HtmlHelper class in razor view instead of writing HTML tags manually.  Starts with @Html is an object of the HtmlHelper class. (@ symbol is used to access server- side object in razor syntax) Prof. Naimish R. Vadodariya #2305CS311 (Web Programming using.NET)  Unit -3 Helpers & Routing 20 Built-In HTML Helpers 1. Standard Html Helpers 2. Strongly Typed HTML Helpers (Model Binding) Prof. Naimish R. Vadodariya #2305CS311 (Web Programming using.NET)  Unit -3 Helpers & Routing 21 Standard HTML Helpers Section 3.5 1. Standard HTML Helpers HTML Element Example TextBox @Html.TextBox("txtLastName", “Last Name") TextArea @Html.TextArea("txtAddress", "Enter Address", 5, 15, null) Password @Html.Password("txtPassword", "123") Hidden Field @Html.Hidden("Hidden1", "val") CheckBox @Html.CheckBox("Checkbox1", false) RadioButton @Html.RadioButton("Radiobutton1", "val", true) Drop-down list @Html.DropDownList("DropDownList1", new SelectList(new [] {"Male", "Female"})) Multiple-select @Html.ListBox("ListBox1", new MultiSelectList(new [] {"Cricket", "Chess"})) ActionLink @Html.ActionLink("Click here", // m.IsDetained) RadioButtonFor @Html.RadioButtonFor(m=>m.IsDetained) DropDownListFor @Html.DropDownListFor(m => m.Gender, new SelectList(new [] {"Male", "Female"}), “Select Gender") ListBoxFor @Html.ListBoxFor(m => m.Hobbies, new MultiSelectList(new [] {"Cricket", "Chess“,”Music”})) Prof. Naimish R. Vadodariya #2305CS311 (Web Programming using.NET)  Unit -3 Helpers & Routing 25 Example: Strongly Typed HTML Helpers Prof. Naimish R. Vadodariya #2305CS311 (Web Programming using.NET)  Unit -3 Helpers & Routing 26 Summary Prof. Naimish R. Vadodariya #2305CS311 (Web Programming using.NET)  Unit -3 Helpers & Routing 27 Practice: Create a Form With Strongly Typed HTML Tag Helper Prof. Naimish R. Vadodariya #2305CS311 (Web Programming using.NET)  Unit -3 Helpers & Routing 28 Anchor Tag Helpers Section 3.7 Anchor Tag Helper  This tag helper is used generate href attributes to link to a particular controller action or MVC route.  This tag helper is an alternative to using @Html.ActionLinkor @Url.Action helper methods.  For example, the following code in a Razor view:  @Html.ActionLink("Register Yourself","RegisterMethod", "Account") Register Yourself  It will generate two identical anchor html tags.  Register Yourself Register Yourself  Using the anchor tag helper, we can generate the same HTML as above by adding the asp- controller and asp-action attributes to an anchor tag as follows: 