In this Lecture we will

• Learn how the Web Server handles requests for Web Pages (Internet Information Server IIS)
• Learn about the Application Server (usually built into the Web Server)
  • this is the part that understands the code/types: ASP.NET/PHP
• Learn about the Database Server
  • SQL/MySQL/Access (only supports a few simultaneous users)
• Learn about how the application server processes the code and sends a complete HTML page back to the Web Server which in turn sends that on to the page

In this Lecture we will

• We acquaint ourselves with the Visual Studio IDE by creating a simple  ASP.NET Web Application IntroToVSandASPNETwebapps

  • choose empty website ... add folders and core references for Web Forms

  • this creates a nearly empty site with a stripped down web.config

  • you fill in pieces as needed... manually adding a web form (default.aspx)

  • best starting point because you won't have any extra unnecessary generated files

  • add an image folder (in solution explorer pane)... then copy image files directly there.

  • design and source view

• Learn to add text to the web page and format using Headings (H1...H6)

  • note: if you center text all objects center, put in <p> to center only that specific text

• Learn to add images to a web page using a number of methods

  • drag and drop

  • HTML <IMG> control

• Learn to edit in source view with Intellisense 

  •  add <br /> 

  • uses XHTML rules 

• Learn to title pages

  • in properties

  • choose <DOCUMENT> then modify title

• Learn to view page in browser

In this Lecture we will

• Discuss the differences between HTML and ASP.NET controls

  • HTML loads faster ... better for static pages

  • ASP.NET controls must constantly interact with server

  • HTML button control is coded in Javascript

    • when you double click on it, you are put into HTML source onClick event

    • you then must provide the code for the corresponding function eg. alert("Welcome");

  • ASP.NET button control is coded in C# ... when you double click on it creates Event Handler

    • code behind file ... aspx.cs

• Create a simple ASP.NET Web application that uses ASP.NET and HTML controls and incorporates C# coding  (enter a name and display a greeting) MyFirstWebApp

  • using labels,text boxes and button controls

  • add HTML elements .... <HR> from the HTML controls in toolbox

  • format text eg. font, color (CSS based) SimpleFormatting

    • uses classes (internal style sheet)

    • converts text to hyperlink (Format menu)

    • adds an ASP.NET image control

  • Visual Studio has a built-in viewer for ASP.NET pages you create... BUT

    • You can't just open a dynamic page on your own computer (without VS) before it is posted online as you can a regular HTML page.

    • You must view a dynamic page through a Web Server that has an appropriate application server running.

    • ASP.NET is the server model we use. It runs in conjunction with Microsoft IIS Web Server .. http://localhost

  • Discuss the difference between server side code and client side code (view source in browser)

    • Default.aspx (server-side) ... runat="server" tells Webserver that ASP.NET tags should be processed before sending page to the browser

    • Default.aspx(client-side) ... browser gets HTML generated by ASP.NET

In this Lecture we will

• Create a 2 page web site using web forms MultiPage
  • add a hyperlink that goes to the 2nd page using a number of techniques
    • highlight text then click the link button on the toolbar
    • drag the page to link right onto the 1st page then change the <a> tag
  • change the start page of the site
  • add code to the Page_Load event to indicate "morning" or "night" using the DateTime.Now.Hour command ... makes the site a little dynamic
• Offer you an exercise to practice the skills you learned in this lecture

In this Lecture we will

• Reinforce the idea that a Web Application can contain HTML and ASP.NET server controls

• Learn to use a number of new controls including

  • radiobuttons

    • use the property group name for related radiobuttons

  • checkboxes

  • dropdownlists

    • set autopostback to true

  • image control 

    • ImageUrl property ... /images/name.jpg

• Create several programs to illustrate the concepts above

  • MoreControls

  • TeamMemberBios

• Challenge you to create your "own" TeamMemberBios site

In this Lecture we will

• Recap the use of RadioButtons  and C# If Statements Conditionals

• Learn how to use the checkboxList ... note the use of <br /> html tag 

  • Simple example picking pizza toppings (pre-cursor to Practice Problem)

  • foreach(ListItem x in CheckboxList1.Items)

    • if (x.Selected==true)

      • Label1.Text+="You picked " + x.Value + "<br />";

  • ConditionalsUpdated

• Practice what we have learned by creating the "Pizza Store" Web Application

  • PizzaStore

  • PizzaStoreUpdated (complex if statement)

In this Lecture we will

• Look at the concept of field validation

  • required field validator

  • range validator

  • regular expression validator

  • need to add lines below to web.config for validation controls to work in newest VS Editions

    • <appSettings>

      <add key="ValidationSettings:UnobtrusiveValidationMode" value="None"/>

      </appSettings>

• Create a program to illustrate the concepts above

  • ValidatedCustomerForm

In this Lecture we will

• Acquaint or reacquaint ourselves with the concept of methods and why they are used

  • A method is a code block that contains a series of statements. A program causes the statements to be executed by calling the method and specifying any required method arguments

  • Methods can make programs/web applications more efficient by centralizing similar code blocks in one block and can be re-used wherever necessary

• Look at the two types of methods 
  

  • void type

  • types that return values

• Introduce the use of the C# TryParse built-in methods

• Create several programs to illustrate the use of methods in web applications

  • HelpMethod

  • PostalCalculator

In this Lecture we will

• Take a close look at the calendar control and how to implement it in a web application

  • get dates

  • set dates

  • determine number of days between dates

  • restrict dates

• Create several programs to illustrate these calendar concepts
  

  • Calendar (get and set dates)

  • DaysBetweenDates

  • TheCalendar (restricts dates ... no weekends/allows multiple date selections)

In this Lecture we will

• Discuss the Post Back problem ... Demo with ThePostBackProblem

  • PostBack is the name given to the process of submitting an ASP.NET page to the server for processing.

  • every post back reloads web page .... re-executes Page_Load (this is where we could run into problems)

  • to check for post back use the command IsPostBack

  • in Page_Load ... add

    • if (Page.IsPostBack==false) ... checks to see if page loaded for first time or not

• Create a program to illustrate the use of PostBack

  • CheckBoxTest

• Offer you the challenge to create a ASP.NET Web Application highlighting your favorite musical band/sports team 

  • which displays a message on opening

  • on subsequent requests band/team member info is displayed

  • TeamMemberBiosPostBack

In this Lecture we will

• Review and extend our techniques to move between web pages (NavBetweenPages/QueryStringExample)

  • Hyperlink Text  via HTML

  • Hyperlink an Image via HTML

  • Use the ASP.NET server control Hyperlink (Text and Images)

  • Use a  LinkButton  and regular Button to navigate to another page via code in the button event handler

    • Response.Redirect("page.aspx");

• Learn how to pass data to another page

  • introduce the concept of a query string ... observe a Google search query

  • look at the query string format : ?h1=en & q=web & btnG=Google

  • use Response.Redirect("file.aspx" + QueryString)

  • use Request.QueryString["passingvariable" ]

• Look at the concept of Session Variables

  • here values are not passed via Response.Redirect in query string  ... variables are private

    • Session["pw"] = TxtPass.Text  (on login page)

    • TxtDisplay.Text=Session["pw"].ToString()  on new page

    • Can send user back to login screen for invalid entry

    • Remember to set TextMode to Password for Password TextBox

• Offer you the challenge of creating a multi-page site with

  • a main login page

  • a second page highlighting your favorite team/musical group

In this Lecture we will

• Offer you the challenge of creating a simple slots game having 3 windows

• Provide a fully detailed solution after you give it a try ... CasinoSlots

  • illustrates use of arrays

  • illustrates use of TryParse

  • illustrates use of Methods

  • illustrates use of Image.ImageUrl

In this Lecture we will

• Offer you the challenge of creating a Currency Converting web page

• Provide a fully detailed solution after you give it a try

  • illustrates use of IsPostBack

  • illustrates use of DropDownList

  • illustrates use of Decimal.TryParse

    • The most important factor is that double, being implemented as a binary fraction, cannot accurately represent many decimal fractions(like 0.1) at all ... leading to rounding errors and its overall number of digits is smaller since it is 64 - bit wide vs. 128 - bit for decimal.
      Use double for non - integer math where the most precise answer isn't necessary.
      Use decimal for non - integer math where precision is needed (e.g.money and currency).

  • illustrates use of accessing CSS attributes through a style collection

    • controlName.Style["AttributeName"]="AttributeValue"

In this Lecture we will

• Offer you the challenge of creating a simple birthday card maker
• Provide a fully detailed solution after you give it a try
  • illustrates the use of a panel containing a label and an image control
  • illustrates the use of FontUnit.Point
  • illustrates the use of Font.Name

In this Lecture we will

• Learn about the advantages of using Styles

  • If you want your Web site to have a unique character and be easy for visitors to get around in, it’s important to maintain a consistent look and feel throughout all pages in your site. This involves thinking about what kinds of design elements you might use in your site. Examples of design elements include things like main headings, subheadings, body text, tables, picture borders, lines, and other items that might appear on pages throughout your site.

  • To maintain a consistent look and feel, it’s best to predefine the exact appearance of all these items in style sheets. Doing so up front saves you a lot of time because you don’t have to style every single heading, table, and picture as you add it to your page. Instead, you just format things normally and they automatically take on the appropriate appearance as you create them.

  • The real beauty of style sheets goes beyond consistency and ease of use to, well, preserving your sanity. If you ever decide to change the style of some element in your Web site, you don’t have to go through every single page and make the change. You just change the style in the style sheet, and the new style is automatically displayed in every page. The technology you use to create style sheets goes by the name Cascading Style Sheets, or CSS for short.

  
  

• Learn about the three types of CSS

  • In a separate file (external)

  • At the top of a web page document (internal)

  • Right next to the text it decorates (inline)

    
    

  External style sheets are separate files full of CSS instructions (with the file extension .css). When any web page includes an external stylesheet, its look and feel will be controlled by this CSS file (unless you decide to override a style using one of these next two types). This is how you change a whole website at once. And that's perfect if you want to keep up with the latest fashion in web pages without rewriting every page!

  Internal styles are placed at the top of each web page document, before any of the content is listed. This is the next best thing to external, because they're easy to find, yet allow you to 'override' an external style sheet -- for that special page that wants to be a nonconformist! (see SimpleFormattingRevisited)

  Inline styles are placed right where you need them, next to the text or graphic you wish to decorate. You can insert inline styles anywhere in the middle of your HTML code, giving you real freedom to specify each web page element. On the other hand, this can make maintaining web pages a real chore!

  
  

• Learn how to create different types of Style Sheets using the Style Builder (Under Format menu ... New Style)

  • Inline Styles (StyleSheetIntro)... use Style Builder and define in current page ... click inside <div>

    • we take a simple page containing  some text, a text box and a button and create a style to improve the look

      • we add a background color, border,  border color

      • we change the default font and size and style (italic)

    • we update and edit the style using the CSS properties window

      • View/CSS properties

      • View/Manage Styles

  • External Styles (linking to an external Style Sheet file) (ExternalStyleIntro)

    • create a folder called stylesheet

    • right click folder and add new item .. StyleSheet (give it a name)

    • in design view ...pick New Style (under format menu) then  new/existing file

    • create the style rules in the builder

      • Choose Selector (HTML tag/Class/ID) then Declaration (property:value)

        • we style the <body> tag and the <H1> <H2> tags

        • we create a class

  • Learn how to link to a style sheet

    • drag stylesheet to upper left corner of page

    • to apply a class ... highlight text .. then View/Apply Styles or go to Properties/Class

In this Lecture we will

• Learn about the style sheet concept of Flow and Floating Based Layout (FlowBasedLayoutIntro)

  • create a style (without floats)  that defines a

    • header

    • left panel

    • center panel

    • right panel

    • NOTE:  we use classes here... but the most correct way to define these specific elements  we learn in our second example using ids

• Take a look at a more complex Floating Layout (ChiarelliElearning)

  • reviews the concepts of classes, ids , descendent selectors, page wrappers

    • You use IDs when you have a single element on the page that will take the style. IDs must be unique. They are defined with  "#" . Examples of ids are: main-content, header, footer, or left-sidebar.

    • You use a class when you want to consistently style multiple elements throughout the page/site. A class is defined with a "."  Classes are useful when you have, or possibly will have in the future, more than one element that shares the same style. An example may be a div of "comments" or a certain list style to use for related links. Additionally, a given element can have more than one class associated with it, while an element can only have one id. For example, you can give a div two classes whose styles will both take effect.

    
    

In this Lecture we will

• Learn about ASP.NET’s master pages feature, which allows you to define page templates and reuse them across your website.

  • Learn that Master pages are similar to ordinary ASP.NET pages. Like ordinary pages, master pages are text files that can
    contain HTML, web controls, and code. However, master pages have a different file extension (.master instead of .aspx), and they can’t be viewed directly by a browser. Instead, master pages must be used by other pages, which are known as content pages. 

  • Learn that essentially, the master page defines the page structure and the common ingredients. The content pages adopt this structure and just fill it with the appropriate content. For example, if a website such as http://www.amazon.com were created using ASP.NET, a single master page might define the layout for the entire site. Every page would use that master page, and as a result, every page would have the same basic organization and the same title, footer, and so on. However, each page would also insert its specific information, such as product descriptions, book reviews, or search results, into this template.

• Create a  simple Master Pages and apply to a web page (MasterPageIntro)

  • create a folder called master

  • add new item ... Master Page 

    • modify layout ... take a good look at the code in source view

    • moving ContentPlaceHolder into appropriate locations on page ... this will hold unique content on each page that uses master

    • you can drag more ContentPlaceHolders as needed from toolbox or copy and paste in source

  • use the master page

    • create a new web form  ... choose Web Form with Master

    • editing the master page

In this Lecture we will

• Demonstrate how to incorporate  a style sheet into a master page (ChiarelliElearning -> ChiarelliElearningMasterStyled)

  • use a CSS floating layout 

  • put a Content Placeholder in the "MainContent" ID Section

  • create a web page based on the master page

• Deriving a master page from a full CSS Template

  • using a freely available template (soft_green) ... copy styles.css and images folder over to Visual Studio 

  • create a master page ... remove the content placeholder from <head> section and <div> from body

  • copy all the <div> content in body of index.html(css template) into body of master page

  • drag style sheet onto master page

  • move content placeholder to appropriate position and add other holders where necessary

• Demo a  master page based on a free CSS Templates

  • BrownShadow -> BrownShadowMod

• You try modifying this free CSS Templates ... Metamorph

In this Lecture we will

• Challenge you with a exercise to practice the skills you learned in this section on using Style Sheets and Master Pages

  •  Find a Free CSS Template and implement it into a site of your own interest ... Sports/Music Group  etc

    • The site should use a Master Page which is then used to create subsequent sub pages of the site 

• Need Resources ? .... check the links from the previous lecture

In this Lecture we will

• Learn that many sites today are dynamic and interactive 

  • They display content that is updated frequently ... news, sports, stocks

  • They allow clients to interact with the site ... shopping sites, auction sites

• Learn that interaction requires storage

• Learn that creating a database is a way to solve this storage requirement

• Demonstrate how Visual Studio can be used to create a database using SQL Express (DataBindingIntro1/DataBindingIntro1VS2022 ...don't execute application ... will be used as the starting point for next lecture where we display the data created here in a GridView and DetailsView)

  • local file based database engine ... similar to Access with full SQL support for database up to 4 GB

  • right click on App_Data folder

    • create a new database (Customers) ... note database explorer window now appears

    • add a new table  then add fields and data types

      • customerID ... int /FirstName ... varchar(50) /LastName... varchar(50) /CreditLimit... money

      • varchar means variable length text 1-50 characters

      • set identity specification for customerID and make it a keyfield

    • save table (customer.mdf)

      • edit SQL name from Table to Customer

      • press Update (choose Update Database)

      • go over to Server Explorer and Refresh  ... the Customer table should now appear under the table section

    • Now enter data (right click on newly appearing Customer table / show table data)

    • interact with DB using SQL (right click customer table and select new query ... find all customers whose  creditlimit is less than $8000 (Don't save query ... just demo results)

      • SELECT FirstName, LastName, CreditLimit  FROM Customer WHERE CreditLimit < 8000  

In this Lecture you will

• Learn that the basic principle of data binding is this: you tell a control where to find your data and how you want it
  displayed, and the control handles the rest of the details. 

  • ASP.NET data binding works in one direction only. Information moves from a data object into a control. Then the data objects are thrown away, and the page is sent to the client. If the user modifies the data in a data-bound control, your program can update the corresponding record in the database, but nothing happens automatically. 

• Learn about many of the most powerful databinding controls, such as the GridView and DetailsView, which give you unprecedented control over the presentation of your data, allowing you to format it, change its layout, embed it in other ASP.NET controls, and so on.

• Add Databound controls to the Web Form started in the previous lecture (DataBindingIntro2 ...  remember to use DataBindingIntro1VS2022 as the starting point for this Lecture )

  • add a data source to the web form (SqlDataSource)

    • Create a new connection

    • choose Data Source (SQL Server DB)  and DB File  (customer.mdf)

    • specify columns (*) all ... notice Select statement

    • press Test Query

  • add a grid view to display data ... choose data source SqlDataSource1

    • also demo simple technique ... just drag and drop data table in <DIV> block (IDE adds 2 controls Grid View and SqlDataSource) ... make sure to choose SqlDataSource1

  • add a details view to a new web form 

    • after initial SqlDataSource is added to a web form there is no need to create that connection again. You only need to add the desired control.

    • Visual Studio will automatically add the SqlDataSource after you answer the prompts

      • first drag and drop the DetailsView control

      • next choose new data source ( SQL DB)

      • to the left of "New Connection"  pick from the drop down menu "ConnectionString"

      • Now you are accessing the previous data source

      • choose your columns and test your query

    • autoformat 

    • enable paging

    • ... other properties (formatting numbers {0:c} currency (edit fields)

  • grid view and detail view together

    • configure gridview first then details view (SqlDataSource1)

    • enable selection in  grid view

      • remove CustomerID/CreditLimit columns (edit columns)

      • no paging

    • write code for grid view control's "SelectedIndexChange" event (access through bolt prop)

    • DetailsView1.PageIndex=GridView1.SelectedIndex

In this Lecture we will

• Look at a simple application of databinding related to a music band site in which the data is stored in an Microsoft Access Database (DataDrivenBandBioPage ... using BandDatabase  Access 2000 version )

• NOTE: These DB Lectures which connect to an Access DB only work with Visual Studio 2019 (32 bit) and will not work with Visual Studio 2022/2026 (64 bit)

  • add BandDataBase.mdb to AppData folder

  • Connect to an Access DB using Gridview

    • add Gridview onto page

    • choose data source (new data source)... SQL database

    • choose BandDataBase.mdb in Data Connection screen dropdown menu

    • configure Select statement  ... choose the artist table 

      • Select * From [Artists] Where 

    • Remove "PictureName" field after Gridview appears

  • Editing Gridview properties

    • HeaderStyle ... BackColor, BorderColor, BorderStyle, BorderWith

• Give you a chance to experiment with the Access Database by creating a GridView control of the Tours table.

  • ... Then make it look nicer... here's a couple of ideas

    • enable paging

    • set the PageStyle font size to medium to make the numbers easier to read

    • for columns choose only ShowDate, City, State, ZipCode and Tournumber

    • Format the date as {0:MM/dd/yy}

    • a white border of two pixels would look nice

    • use Autoformat to change the appearance of the table

      
      

      
      

In this Lecture we will

• Learn how to filter data from the database by creating a  Select query (FilteringData)

• NOTE: These DB Lectures which connect to an Access DB only work with Visual Studio 2019 (32 bit) and will not work with Visual Studio 2022/2026 (64 bit)

• Using the WHERE and ORDER BY clause options where the source is a control like a RadioList or DropDownList

  • First create the RadioList before adding a GridView (eg. Daniel value 1/Davis 2/Kevin 3/Reginald 4/Thaddeus 5

    • don't forget to set autopostback to true

    • What we eventually want is an application where a user selects a radiobutton  and the records for the selected band member (1,2,3 ) is displayed in gridview

  • Next add a GridView to the page

    • create a new datasource and make a connection to the BandDatabase

    • select the ArtistJournal table and choose the IDNumber , JournalDate and Remarks fields ... notice how the wizard automatically creates the SQL statement

    • Next click on the WHERE button to construct the WHERE clause.

      • Choose the IDNumber in the Column field. For the Operator, choose =. For the Source, select Control. Select RadioButtonList1 from the ControlID list in the Parameter properties section. When we call the query method, we can pass in a value for the IDNumber (2 for example).

      • Test the query

  • Test out the page by clicking on the RadioButtonList and choosing an artist to display.

  • Next let's re-configure our WHERE clause to include AND condition

    • first add a text box to the form to hold a date

    • next click on SqlDataSource control and click on Configure Data Source

    • click  on the WHERE button to add a second condition

      • choose JournalDate, operator >= with control id TxtDate

      • Click Test Query. The Parameter Values Editor opens and

        you are prompted to enter an IDNumber (enter 2) and a Date (enter 1/1/2003).

  • Lastly we add an ORDER BY clause

    • first configure data source again

    • this time click on the ORDER BY button

    • Select Remarks for the Sort by and choose descending. Notice the changes that occur to the SELECT statement. Click OK.

  • Code Tweaking

    • Modifying the SQL statement by using the Query Builder (demo only)

      • click on the SqlDataSource

      • select the ellipsis on the SelectQuery property (property window on right side of Visual Studio screen)

In this Lecture we will

• Learn how to implement a FormView control which allows us to access CRUD (create,read , update,delete) ... FormViewCrud

  • GridView displays multiple records in a database in a grid style. We are able to delete, edit and select, but we

    are not able to insert. The FormView on the other hand allows for creation of data (new) 

  • We used the DetailsView control to display one record at a time. The FormsView control displays one record at a time as well. So, what is the difference? The basic difference is that the FormsView control allows you to edit more features of the templates

    whereas the DetailsView provides a standard block style with limited template editing.

• Use an SQL data source

  • customer.mdf  ... Customers2022dfFile.rar

    • need to make proper connection string (add data source to web form first ... SqlDataSource)

    • configure data source

    • choose *

    • then go into advanced when databinding

      • generate insert/update/delete statements

      • use optimistic concurrency

      • database must use key fields if you want to be able to edit the table through web page

    • turn on paging in FormView control

• Experiment with Web App

  • adding new records (Create)

  • editing  records (Update)

  • deleting records (Delete)

  • viewing the updated table (Read)

  • ... go into DB Explorer and view actual raw table data to observe changes

    
    

In this Lecture we will

• Challenge you to  create a new database with SQL Server Express. 

• This database will store historical weather data, so you will create a table to keep track of weather details like temperature, rainfall, and so on.

•  Later you will build an interface to add weather data for all clients, so you will also store the location in this database.

In this Lecture we will

• Create an ASP.NET Web Application that implements a DropDown List that is data bound and filters records into a GridView (BandTour)

• NOTE: These DB Lectures which connect to an Access DB only work with Visual Studio 2019 (32 bit) and will not work with Visual Studio 2022/2026 (64 bit)
  

  • Tour number is in dropdown list  (enable PostBack)

    • Tour Table from BandDatabase is chosen

    • This data source only contains the field Tour Numbers ... with Return only unique rows specified

  • Records filtered into GridView

    • add GridView choosing new datasource (don't use SqlDatasource1)

      • choose same connection string (ConnectionString BandTour)

      • when you choose the connection string you want to reuse the same connection string . That's because the connection string only tells the control where the database is located, it doesn't specify any tables or views within the database.

    • this data source contains all the fields + WHERE clause + ORDER BY

      • set WHERE clause for TourNumber = DropDownList1

      • ORDER BY TourNumber and ShowDate

      • Select Advanced and check the Generate INSERT, UPDATE and DELETE statements as well as the Use optimistic concurrency boxes. Recall that optimistic concurrency will detect whether someone else has modified the record during the time that you pulled it up on your screen and not perform the update.

    • In the GridView control select Edit Columns. Edit the Selected fields to include TourNumber, ShowDate and City. For the ShowDate column, change the DataFormat property to {0:d}

      • enable Paging, Deleting and Selection

      • Set Paging Properties.... Set PageSize to 5

      • Choose Auto Format and pick a style

        
        

In this Lecture we will

• Create an ASP.NET Web Application that implements a Calendar control that is used to filter dates for records that are fed in a GridView for display.... A Band Journal Search Page (ArtistJournal)

• NOTE: These DB Lectures which connect to an Access DB only work with Visual Studio 2019 (32 bit) and will not work with Visual Studio 2022/2026 (64 bit)

• We add a calendar control to the Web Form which will be used to select  dates which will be placed into  textboxes

  • Use a single calendar control for the Start Date and the End Date...C# code checks for textbox contents and places the chosen date in the appropriate Start or End date textbox

  • The textbox entries are then used to filter records into a GridView

    • note the use of two WHERE clauses

    • JournalDate >= TxtStart and JournalDate <=TxtEnd

In this Lecture we will

• Learn to create a Relational Database and connect it to a ASP.NET Web Form (ASPandRelationalDB)

• Look at this Scenario

  • The "band" wants us to add a Favorite Songs page to the web site. They want it to show a fan’s name, their favorite songs, a comment and if they are a member of the StreetTeam – the group of active fans that help promote the band. Easy enough since this information is all in the Fans table. Here's the hard part ⎯ they also want the Favorite Songs page to show the Album Name, Album Number and Track Number. But that information is in a different table; it's in the AlbumTracks table. So we have some work to do there..... That's where the concept of Relational Databases will come into play

  • Fields in Fans Table

    ID
    Password
    Name
    BirthDate
    Gender
    City
    State
    Email
    FavoriteSong***
    StreetTeam
    Comment

    
    Fields in AlbumTracks Table
    
    AlbumNumber
    AlbumName
    TrackNumber
    TrackName ***
    

  • If you look carefully at the data in these tables, you see that the information in the FavoriteSong field of the Fans table is the same as the information in the TrackName field of the AlbumTracks table. That is, both of these fields contain song titles. In other words, the data in the Fans table is connected to or "related" to the data in the AlbumTracks table through the fields FavoriteSong and TrackName. This is the essential element of a "relational database" ⎯ information in one table can be related to information in another table through fields that hold common information (in this case song titles). Let's say we wanted the name of the album (AlbumName) that contains a fan's favorite song. We would look for the name of the favorite song in the FavoriteSong field of the Fans table. Then we search for the same song in the TrackName field of the AlbumTracks table. Once we find the matching favorite song in the AlbumTracks table, we get the AlbumName for that particular record.

  • Here's another example. The Albums table contains a field called AlbumNumber. The AlbumTracks table also contains a field called AlbumNumber. Both fields contain an integer: 1 denoting the first album and 2 denoting the second album (and we hope there will be many more in the future). The information in both tables is related through their AlbumNumber fields. Using the AlbumNumber field in the AlbumTracks table, we can find the same AlbumNumber in the Albums table. Once we know which record has the same AlbumNumber, we can get other information from the Albums table such as Release Year and Label.

• First add a GridView and connect it to the BandDatabase

• When we configure the Select statement we need to select fields from the Fans and Album Tracks tables

  • Configure Select using custom SQL (Multi-Table Query-Query Builder) ... selecting fields from two tables

    • Add the Fans and AlbumTracks Tables to the Query Builder

    • Check the boxes next to the column names we want to display:

      Fans: Name, Favorite Song, Street Team, Comments

      Album Tracks: Album Number, Album Name, Track Number, TrackName

    • FavoriteSong field and TrackName are connecting fields

    • then click on FavoriteSong and drag toward TrackName (this creates relationship).This will match (or join) the two tables on those column names when their values are equal.

    • press the "Execute Query Button" ... and then "Test Query"

• Start your application. The grid is populated with data from the Fans table and the AlbumTracks table. Note that the same song is listed in the FavoriteSong field and the TrackName field.

  • clean up the grid ... eliminate redundant information (make TrackName invisible) and move AlbumNumber down once so that it is just before TrackNumber

  • Sort the records by AlbumNumber then by TrackNumber (need to get back into QueryBuilder)

    • Click SqlDataSource ... then go over to properties and choose SelectQuery

    • Click in the Sort Type cell in the AlbumNumber row and select Ascending. The Sort Order will be 1. Click in the Sort Type cell

      for the TrackNumber row and select Ascending. The Sort Order will be 2.

In this Lecture we will

• Welcome you back ... and introduce the  7 new sections

• Discuss the strengths and weaknesses of Web Forms

• Highlight where Web Forms fail

• Discuss how MVC is an improvement over Web Forms

• Highlight some of the features of MVC

  • Based on Model View Controller pattern

  • lightweight, fast and secure

  • designs and codes are neatly separated

  • it uses pure HTML control or HTML helpers (No server controls)

  • it uses controller based url

  • implements no view state

  • it uses layout at the place of master pages for consistent looks and feel

• Discuss "What's the Core part ?"

In this Lecture we will

• Take a closer look at the MVC software pattern

  • The Model

  • The View

  • The Controller

• Discuss how MVC works in 3 steps

In this Lecture we will

• Create our very first ASP.NET MVC Core application (using Visual Studio 2019/2022 Community Edition)

  • Pick ASP.NET Core Web App

  • Pick Empty Template

• Look at the Startup.cs file and modify the await command to display content on the browser (Pre .NET 6)

  • Using .NET 6 or higher ... no Startup.cs file anymore

  • Use Program.cs  ... app.MapGet("/", () => "Hello Raptors!");

• Run the project

In this Lecture we will

• Discuss how the Controller acts as the middleman - it will combine your Model with a View and serve the result to the end - user.

  • However , neither a Model nor a View is required

  • The Controller can act on its own for the most basic operations... delivering simple text messages

• Learn how to add MVC support to a Web project

  • In the Startup.cs file in ConfigureServices we add

    • services.AddMvc();

• Learn how modify the Configure() method in the Startup.cs ... so that

  • your web application knows how to map incoming requests to your controller(s)

    • UseMvcWithDefaultRoute()

• Using Visual Studio 2022 and .NET 6 or higher ... no Startup.cs ... only Program.cs

  • var builder = WebApplication.CreateBuilder(args);

    
    

    // Add services to the container.

    builder.Services.AddControllersWithViews();

    
    

    var app = builder.Build();

    
    

    //app.MapGet("/", () => "Hello Raptors!");

    
    

    app.UseRouting();

    
    

    app.MapControllerRoute(

        name: "default",

        pattern: "{controller=Home}/{action=Index}/{id?}");

    
    

    app.Run();

• Learn how to add a Controller

  • create a new folder called "Controllers"

  • right click the new folder and select Add...New Item...Controller ... MVC Controller - Empty

  • name the controller HomeController()

• Discuss how the Controller looks like a regular C# class.

  • It has one method called Index() which will try to return the default view by calling the View() method.

  • Since we do not have any Views yet we will instead use the command

    • return Content("Hello Raptors");

In this Lecture we will

• Discuss how a View is the visual presentation of the Model returned by the Controller

• Create a View for the HomeController instead of just returning a piece of text

  • create a folder called "Views"and inside that folder create another folder called "Home"

  • right click on the Home folder and Add ... View

• Highlight the contents of the newly create View

  • @{

        Layout = null;

    }

    <!DOCTYPE html>

    <html>

    <head>

        <meta name="viewport" content="width=device-width" />

        <title>Index</title>

    </head>

    <body>

    
    

    </body>

    </html>

  • looks like standard HTML with the MVC related code at the top called Razor syntax

  • add some content to the body

    • <span style="font-size: 18pt;">Hello, <b>Raptors</b> world!</span>

• Run the application and discuss how the default routing mechanisms found in MVC automatically routed to the HomeController's Index() method.

• Discuss how a call to the View() method causes a number of locations to be searched to find a View with a matching name ... in this case

  • \project root\Views\name of controller\index.cshtml

  • this view is then interpreted and returned as output to the browser

In this Lecture we will

• Discuss the fact that so far we combined a Controller with a View, but this can only create a simple HTML based web page

• Discuss that fact that the idea behind MVC is of course to mix HTML with data generated by the server and this is where the Model comes into play

• Learn that the Model is generated by the Controller and then passed to the View which outputs the relevant data to the user

• Learn what a model can look like

  • any kind of object found in the framework

  • it could be a simple number or string or a complex object instantiated from a class

• Learn how to add a Model to our web application

  • create a folder called "Models"

  • right click the folder and add a Class ... call it Raptors

    • public class Raptors

          {

              public string PlayerName { get; set; }

              public DateTime ArrivalDate { get; set; }

          }

• Learn how the Controller is used to instantiate the Model and then send it to the View

  • public IActionResult Index()

            {

                Models.Raptors player = new Models.Raptors()

                {

                    PlayerName = "Kyle Lowry",

                    ArrivalDate = new DateTime(2012, 3, 24)

                };

    
    

                return View(player);   

• Learn that a View can work without a Model , but when we want to actually use a Model we need to make the View aware of this and tell it which type we expect the Model to be.

  • This is done with the Razor @model directive , usually in the top of the  View

    • @model HelloRaptors.Models.Raptors

  • Now the View knows that it should expect a model of the type Raptors

  • We can modify the View to include the code that references our model properties

    • <html>

      <head>

          <meta name="viewport" content="width=device-width" />

          <title>@Model.PlayerName</title>

      </head>

      <body>

          <b>@Model.PlayerName</b>

          <br /> was signed by the Toronto Raptors on  @Model.ArrivalDate.ToLongDateString()

      </body>

      </html>

• Discuss how we have now finally come full circle and combined a Model, a View and a Controller (MVC).

In this Lecture we will

• Learn that when Microsoft first created the ASP.NET MVC framework it used WebForms to display content. However WebForms weren't as flexible as people were used to . WebForms had too much overhead in the form of the ViewSate, server controls etc.

• Learn that Microsoft decided to implement a much simpler and more lightweight language/view engine called Razor. It was released in 2011 as part of MVC version 3.

• Learn why we use Razor

  • The biggest advantage is the fact that you can mix client-side markup (HTML) with server-side code (C#)

  • In Razor you can reference server-side variables by simply prefixing them with an at-character @

    • <p>/Welcome to our Toronto Raptors Site ! current date is :
      @DateTime.Now.ToString()
      </p>

    • Here we are adding a conditional statement to our view

          @if (DateTime.Now.Year >= 2020)

          {

              <span>The year 2020 has finally arrived!</span>

          }

  
  

In this Lecture we will

• Look at all the basic principles of the Razor syntax

• Learn that the @ prefix is not just for accessing simple variables or properties on a class. Its' used for pretty much anything in Razor, including inline control statements, code blocks, comments and much more

• Learn how HTML encodes and interprets  Razor expressions

  • @{

            var helloWorld = "<b>Welcome to Canada !</b>";

        }

        <p>@helloWorld</p>

        <p>@Html.Raw(helloWorld)</p>

  • The first line will be HTML encoded as <b>Welcome to Canada!</b>

  • The second line will be intrepreted  thereby making the text bold : Welcome to Canada

• Learn to wrap Razor expressions with a set of parentheses. This makes it easier for the parser to understand what your are doing.

  • @{

            var name = "Charlie Chiarelli";

        }

        Hello, @(name.Substring(0, 4)). Your age is: <b>@(37 + 23).</b>

• Learn that if you need to do more than simply accesss variable, Razor allows you to enter a dedicated, multiline code-block by entering a start curly-bracket after the @-operator.

  • @{

            var sum = 32 + 10;

            var greeting = "Hello, World!";

            var text = "";

            text += greeting + " The result is: " + sum;

        }

    
    

        <h2>CodeBlocks</h2>

        Text: @text

• Learn create a  comment in Razor code:

  • @*

        Here's a Razor server-side comment

        It won't be rendered to the browser

        It can span multiple lines

    *@

In this Lecture we will

• Learn that just like in regular C# code, you can define variables in Razor to store information for later use.

  • @*Simple assignment statement*@

        @{

            string Msg = "Hello, world!";

        }

        <div>

            @Msg

        </div>

  • @*Working with and manipulating variables and applying logic to them

            just like you would in C#*@

        @{

            string helloWorldMsg = "Good day";

            if (DateTime.Now.Hour > 17)

            {

                helloWorldMsg = "Good evening";

            }

            helloWorldMsg += ", world!";

            helloWorldMsg = helloWorldMsg.ToUpper();

        }

        <div>

            @helloWorldMsg

        </div>

In this Lecture we will

• Learn that when defining the markup for your Views, it's extremely useful to define a conditional statement , which decides whether or not a portion of the View is interpreted and rendered.

• Learn that the most common conditional statement is the if-statement and you can use one of these in your Razor code pretty much like you would in regular C#.

  • @if (DateTime.Now.Year >= 2020)

        {

            <span>The year 2020 has finally arrived!</span>

        }

        else

        {

            <span>We're still waiting for the year of 2020...</span>

        }

In this Lecture we will

• Learn that looping is an extremely useful programming technique which you can also benefit a lot from in your Razor code. Looping allows you to repeat an action and/or output for a specific amount of iterations.

• @{

          List<string> names = new List<string>()

  {

          "Kyle Lowry",

          "Pascal Siakim",

          "Fred VanVleet",

          "OG Anunoby",

          "Marc Gasol"

      };   
  }

  
  

      <ul>

          @for (int i = 0; i < names.Count; i++)

          {

              <li>@names[i]</li>

          }

      </ul>

  
  

      <ul>

          @foreach (string n in names)

          {

              <li>@n</li>

          }

      </ul>

  
  

      <ul>

          @{

              int counter = 0;

          }

          @while (counter < names.Count)

          {

              <li>@names[counter++]</li>

          }

      </ul>

In this Lecture we will

• Take a deeper look at what a controller is

  • acts as the middleman

  • it will combine your Model with a View and serve the result to the end user

  • neither a Model or View is required , the Controller can act on its own

  • the Controller is just like any other class so it has a .cs file extension

• Learn there are a few things that allow you and the .NET framework to recognize it as an MVC Controller

  • usually placed in a folder called "Controllers" in the root of your project

  • the name of the class will usually end with the word Controller eg. "HomeController"

• Learn that each browser request is mapped with the particular controller and each controller has several action methods (next lecture) to handle browser requests

In this Lecture we will

• Learn that since a Controller is just a regular .NET class it can have fields, properties and methods.

• Learn that the methods of a Controller class are interesting because they are the connection between the browser and your application. For that reason the methods of a Controller class are referred to as actions

• Learn that all public methods in a Controller class are considered an Action. This means that all your methods in your Controller class can in theory be reached using a URL. So if you have methods in your Controller that you don't want the end-user to be able to call, be sure to mark it as private

• Learn about Action Verbs

  • To gain more control of how your actions are called , you can decorate them with the so-called Action Verbs. These are in fact regular .NET attributes, which will tell the .NET framework how an action can be accessed.

  • //This Edit Action below can only be accessed with a GET request.

    
    

            [HttpGet]

            public IActionResult Edit()

            {

                return Content("Edit");

            }

In this Lecture we will

• Learn that when the Action (method) finishes its work, it will usually return something to the client and that something will usually be implementing the IActionResult interface.

  • public IActionResult Index()

            {

               

                // Here now we are going to return a View with a Model

                //First we instantiate a new Raptors object

    
    

                Models.Raptors player = new Models.Raptors()

                {

                    PlayerName = "Kyle Lowry",

                    ArrivalDate = new DateTime(2012, 3, 24)

                };

    
    

                return View(player); //pass player object to View method

               

                //Other possible results of controller actions ... besides View()

                //Content()  returns the specified string to the browser

                //PartialView() returns a Partial View (we will cover this type soon)

             }

    
    

In this Lecture we will

• Go more in depth with the topic of Views

• Review what a View is

  • The View is the visual result of a Controller Action

  • A View contains the markup (HTML) and Razor code and will often be a visual representation of your Model. In other words the Controller generates a Model object and then passes it to the View, which then uses the Model to visually represent the content of the Model to the user

• Review where a View is placed

  • View files are usually placed in a folder called Views in the root of the project.

  • To make it easier for .NET and your Controllers to locate the proper view you usually create a sub-folder inside your Views folder for each of your controllers bearing the name of the Controller. So, if you have a HomeController and ProductController, your Views folder could have sub-folders with the names "Home" and "Product". Each of these folders would then have one or several views relating to the actions of your controllers.

    • The Home View .... index.cshtml

    • The Product View ... Details.cshtml

  
  

In this Lecture we will

• Learn about View Discovery, a process where ASP.NET MVC will try to guess which View to use , without forcing you to specify it.

• Learn that View Discovery works if  you follow the conventions we covered in the previous lecture

  • The filename of the View should match the name of the Action

  • In other words , the location and naming of your views should follow this convention

    • /Views/Controller Name/Action Name.cshtml

  • If it does you can simply call the View() method method from your Controller actions and have the .NET Framework automatically locate the proper View for you

  • If the framework can't find a matching View using this convention it will look in one more place

    • /Views/Shared/Action Name.cshtml

In this Lecture we will

• Learn that the use of a Model is definitely the cleanest and most common approach to passing data into a View

• Learn  that a Model doesn't have to be a complex class, it could be something simple as a String, an Integer or a DateTime.

• Demonstrate a simple scenario with a Product model

  • public class Product

        {

            public string Title { get; set; }

            public double Price { get; set; }

        }

  • Next, the connection between the Model and View is made by the ProductController

  • public IActionResult Details (int id)

            {

                Product product = new Product();

                product.Title = "Basketball";

                product.Price = 19.99;

                return View(product);

            }

  • Notice how  the product instance is passed to the View

  • Inside the Product/Details View , I can now define the Product class as the Model this View can expect using the @model directive located at the top the View file

    • @model HelloRaptors.Models.Product

    • With this is place you can now start using your View Model and its properties

    • <body>

          <h1>@Model.Title</h1>

          Price:@Model.Price

      </body>

• Take a look at Demo Lecture49-RaptorsPassingDataIntoView

In this Lecture we will

• Learn that Partial Views allow you to split your Views into several files and discuss why you would want to do that

  • The most obvious reason is that you can take a part of a View and separate it into a Partial View, allowing you to re-use this specific part in other views as you want.

  • For instance, if you have a login form on your page, you can put this into a Partial View and insert it wherever you would like for a login form to appear, across multiple pages. As an added benefit, you are making the original View less cluttered, by breaking it up into smaller components.

• Learn how to add a Partial View to our current project (Lecture50-RaptorsPartialView)

  • Partial Views are usually placed in a "Shared" folder inside your View folder, it's filename usually starts with an underscore

  • Right click on the "Shared" folder ... choose View , name it, and make sure you check "Create as partial view"

  • Type in some code

    • <div>Hello Raptor Fans</div>

      <div>Today is @DateTime.Now.ToString()</div>

  • Now we try to reference it from one of our Views

    • <body>

      
      

          <h2>The Toronto Raptors!</h2>

      
      

          @*Here we are referencing our view located in the shared folder

              When the View is rendered the content of the

              Partial View is automatically injected into the place

              where you called the PartialAsync() method

              mixing in with the rest of the View

              Notice that we didn't have to specify a complete filename

              and path for the Partial View -

              the Shared folder is automatically searched during the

              View Discovery process*@

         

          @await Html.PartialAsync("_RaptorHello")

         

          <br />

          <b>@Model.PlayerName</b>

          <br /> was signed by the Toronto Raptors on  @Model.ArrivalDate.ToLongDateString()

      </body>

In this Lecture we will

• Review the fact that ever since the first website was created and expanded from a single page to several pages, the need to share specific parts of the pages became obvious. From the same footer at the bottom , to re-using complex layouts.

• Review the fact that various server-side technologies have solved this problem in different ways from

  • the include() statement of PHP .... to

  • the MasterPages technology of ASP.NET Webforms

    • ... They allow you to re-use all the stuff that would otherwise have to be repeated in each file and even worse: manually edited in each file for even the smallest global change

• Learn in ASP.NET MVC you can use something called a Layout, often in combination with Sections.

  • You can have one or several Layouts in your project and each can include zero or more Sections.

In this Lecture we will

• Learn that a Layout file allows you to re-use common markup across multiple web pages in your project. This is done by specifying all the common stuff in a layout file and then referencing this file in all of your sub pages

• Learn that in ASP.NET MVC layout files look just like a regular view and they also use the same extension (.cshtml).

  • <!DOCTYPE html>
    <html>
    <head>
    <title>Layout</title>
    </head>
    <body>
    
    @RenderBody()
    
    </body>
    </html>

  • Notice how it's almost just a regular HTML file, except for the RenderBody() Razor method

  • This part is required in a Layout file because it specifies where the content of the page using the Layout should be placed.

  • A file using the layout could look like this:

    • @{
      Layout = "~/Views/Shared/_Layout.cshtml";
      }
      
      <p>Hello, world!</p>

  • ASP.NET will now combine these two files resulting in something like this when the page is returned to the browser

    • <!DOCTYPE html>
      <html>
      <head>
      <title>Layout</title>
      </head>
      <body>
      
      <p>Hello, world!</p>
      
      </body>
      </html>

• Learn how to add a Layout to our current MVC project (Lecture52-RaptorsLayoutFiles)

  • Layouts are usually placed in a sub-folder of the Views folder called Shared

  • The filename of Layout views are usually prefixed with an underscore to indicate that this is not a regular View.

  • With that in mind , right click the Shared folder and create a new View called _Layout

  • All you need to do now is add your own markup and then add a call to the RenderBody() method in the place where you want the page content to be inserted, like this

    • <!DOCTYPE html>

      
      

      <html>

      <head>

          <meta name="viewport" content="width=device-width" />

          <title>_Layout</title>

      </head>

      <body>

      
      

          <h2>Hello Basketball Fans!</h2>

      
      

          @*This is where you want the page content to be inserted*@

          @RenderBody()   

      
      

      </body>

      </html>

    • Now reference the Layout in the Home/Index.cshtml file

      • @model HelloRaptors.Models.Raptors

        
        

        @{

            Layout = "~/Views/Shared/_Layout.cshtml";

        }

        
        

        <!DOCTYPE html>

        <html>

        <head>

            <meta name="viewport" content="width=device-width" />

            <title>@Model.PlayerName</title>

        </head>

        <body>

        
        

            <h2>Welcome To The Toronto Raptors Site</h2>

           

            <b>@Model.PlayerName</b>

            <br /> was signed by the Toronto Raptors on  @Model.ArrivalDate.ToLongDateString()

        
        

        </body>

        </html>

        
        

In this Lecture we will

• Learn that Routing in MVC is the concept of mapping a URL , which is what the end-user will be requesting through their browser, to a method in one of your controllers, which will then send a response back to the browser. The response will often be a View.

• Learn about Default Routing

  • If you are working on a brand new project created from the Empty template in Visual Studio (like we are), then your application doesn't have any routing yet.

  • Routing is implemented in the Startup.cs file. In the Configure method add  UseMvcWithDefaultRoute(). This adds a basic route to your project. If no Controller name is specified the URL will automatically map to the HomeController.

  • public void Configure(IApplicationBuilder app, IHostingEnvironment env)

            {

                if (env.IsDevelopment())

                {

                    app.UseDeveloperExceptionPage();

                }

    
    

                //BASIC ROUTING

                //we want the controller to handle the task  below in the future

                //so our web app needs to know how to map incoming

                //requests to your controller ... we need routes   

                //If no Controller name is specified, the URL will be mapped to the HomeController

               

                app.UseMvcWithDefaultRoute();

    
    

                //Here are some examples of URL's that now work

                //and the Controller/Method combination that they map to:

                //http://localhost/               -> HomeController.Index() 

                //http://localhost/Home/Index     -> HomeController.Index() 

                //http://localhost/Test/          -> HomeController.Test() 

                //http://localhost/Home/Something -> HomeController.Something()

    
    

                //Also if you have a controller called UserController

                //which has a method called Details()

                //you could access it by calling the URL: /User/Details

  • Using .NET 6 or higher , then Routing is implemented in Program.cs
    
    app.UseRouting();
    
    app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}" );

    
    

In this Lecture we will

• Learn to step outside the comfort of the default/catch-all route and define our own routes

  • You can define a route in several ways and places, but we'll start out doing it in the Startup.cs file, inside the Configure() method

  • //Creating  a custom route

    //The first parameter is the name of the route

    //The second parameter is the URL template for the rule

    //which will direct the rule to the desired Controller and method on that Controller

    //When we run the app the browser will automatically display

    //the Details page first

                app.UseMvc(routes => routes.MapRoute("Default", "{controller=Product}/{action=Details}"));

  • Using .NET 6 or higher then we use Program.cs
    
    app.MapControllerRoute(
    name: "Product",
    Pattern: "{controller=Product}/action=Details}/{id?}");
    
    app.MapControllerRoute(
    name: "default",
    patter: "{controller=Home}/{action=Index}/{id?}");

In this Lecture we will

• Review the idea that a Model should represent the current state of the application, as well as the business logic and/or operations

  • A Model can be any kind of object found in the framework

  • It could be a simple number or string or an instantiated object from a class

• Learn about the concept of Separation of Concerns (Soc)

  • SoC is achieved by encapsulating information inside a section of code, making each section modular and then having strict control over how each module communicates.

  • For the MVC pattern , this means that both the View and the Controller can depend on the Model, but the Model doesn't depend on neither the View nor the Controller.

  • This turns your Models into a module that can exist even outside of the MVC framework eg. for use in a desktop app.

    
    

In this Lecture we will

• Learn that in the old days of ASP.NET WebForms before MVC was introduced the process of updating a Model was a bit cumbersome.

  • First, you would have to create a FORM with all the fields that the user could change. When this FORM was posted back to the server, you would have to read each of the FORM fields and assign it to your Model

• Learn about the concept of Model Binding which allows your Views to use information from the Model to generate e.g. a FORM for editing the Model, but even more helpful, that allows the receiving method on the Controller to treat the posted values as an object of the Models type, instead of forcing you to read strings from the FORM.

  • In other words, you can now keep working with objects all the way through the communication between the client and server.

• Create a simple example which illustrates how Model Binding is implemented. (Lecture56-RaptorsModelBinding/Lecture56-RaptorsModelBindingAlternateSol)

  • First we need a  Model

    • public class Player

          {

              public string PlayerName { get; set; }

              public string Position { get; set; }

          }

  • Next in our Controller we now pass an instance of this class to the View.

    • [HttpGet]

      public IActionResult SimpleBinding()

      {

                  return View(new Player() { PlayerName = "Kyle Lowry", Position = "Guard" });

         }

  • Next we let our View know what kind of Model it can expect with the @model directive, we can now use various helper methods to help with the generation of the a FORM

    • @using (var form = Html.BeginForm())

          {

              <div>

                  @Html.LabelFor(m => m.PlayerName)

                  @Html.TextBoxFor(m => m.PlayerName)

              </div>

      
      

              <div>

                  @Html.LabelFor(m => m.Position)

                  @Html.TextBoxFor(m => m.Position)           

              </div>

      
      

              <input type="submit" value="Submit" />

          }

  • By default the FORM will be posted back to the same URL that delivered it, so to handle that we need a POST-accepting Controller method to handle the FORM submission

    • //The [HttpPost] attribute tells the routing engine to send any POST requests

              //to that action method

              [HttpPost]

              public IActionResult SimpleBinding(Player raptor)

              {

                  return Content($"User {raptor.PlayerName} updated !");

              }

    • Notice how our Controller action takes just one parameter , of the same type as the Model we passed into the View originally. The Raptor class. Behind the scenes MVC will now process the FORM and assign the values found in its editable controls to the properties of the Raptor class. This is the magic of Model Binding.

In this Lecture we will

• Discuss the fact that sometimes it is relevant for your Views to know more about a property on you Model than just its name and type. For these situations, ASP.NET MVC comes with the concept of DataAnnotations.

  • DataAnnotations basically allow you to add meta data to a property.

• Learn how to implement a simple DataAnnotation (Lecture57-RaptorsDataAnnotations)

  • In our previous example we had the framework generate a label and an input field for a property. When generating the label, the name of the property was used, but property names are generally not nice to look at for humans.

  • As an example let's say we want to change the PlayerName property to Player Name.

  • Here's how you do it with DataAnnotations.

    • public class Player

          {

              //Using DataAnnotations

                     

              [Display (Name="Player Name")]

              public string PlayerName { get; set; }

             

              public string Position { get; set; }

          }

    • Our property keeps its original name, but whenever it's presented to a  user, an alternate version is used.

In this Lecture we will

• Learn that a lot of the available DataAnnotations are actually directly related to the validation mechanisms found in the ASP.NET MVC framework.

  • They allow you to enforce various kinds of rules for your properties, which will be used in your Views and in your Controllers, where you will be able to check whether a certain Model is valid in its current state or not (after a FORM submission)

• Show you how to add some basic validations (Lecture58-RaptorsModel Validation)

  • //Adding basic validation using DataAnnotations

    //[Required] means that value is required ... can't be NULL

    //We also used [StringLength] to make requirements about max and min lengths

    
    

            [Required]

            [StringLength(25)]

            [Display (Name="Player Name")]

            public string PlayerName { get; set; }

           

            [Required]

            [StringLength(50,MinimumLength =3)]

            public string Position { get; set; }

  • Next we need to update the View so that it can display error messages to the user using the helper method ValidationMessageFor().  Note also the use of the ValidationSummary() which displays a summary of the validation errors above all the fields.
    
    @using (var form = Html.BeginForm())

        {

            @Html.ValidationSummary()

           

            <div>

                @Html.LabelFor(m => m.PlayerName)

                @Html.TextBoxFor(m => m.PlayerName)

                @Html.ValidationMessageFor(m=>m.PlayerName)

            </div>

    
    

            <div>

                @Html.LabelFor(m => m.Position)

                @Html.TextBoxFor(m => m.Position)

                @Html.ValidationMessageFor(m=>m.Position)

            </div>

    
    

            <input type="submit" value="Submit" />

        }

  • Lastly we need the Controller to serve the View, as well as handle the POST request when the FORM is submitted. The interesting part here is where we check the IsValid property. Depending on the data you submitted it will be either true or false, based on the validation rules we defined for the Model. With this in place you can now prevent a Model from being saved eg. to a database unless it's completely valid.  We simply return the View and the current Model state , if there are any validation errors.
    
    [HttpPost]

            public IActionResult SimpleBinding(Player raptor)

            {

                if (ModelState.IsValid)

                {

                    return Content("Thank you");

                }

                else

                {

                    //once the form is submitted and if there are validation errors

                    //we return the FORM to the user, so that they can see and fix

                    //these errors. We do that by simply returning the View and the

                    //current Model state , if there are nay validation errors.

                    return View(raptor);

                    //return Content("Model could not be validated");

                }

    
    

In this Lecture we will

• We recap some the validation-related DataAnnotations

  • [Required (AllowEmptyStrings=true)]

  • [StringLength(50,MinimumLength=3)]

  • [Range(1,100)]

  • [Compare("PasswordRepeated")]

  • [CreditCard] validates that the property has a credit card format

  • [EmailAddress] validates that the property has an email format

  • [Phone] validates that the property has a telephone number format

  • [Url] validates that the property has a URL format

In this Lecture we will

• Learn how Microsoft came up with the concept of Tag helpers

• Learn  that ASP.NET WebForms introduced the concept of controls to the world of coding for the web

  • This was a well known concept  when creating applications for the desktop but not for the web

  • Controls allowed you to get a lot of out of the box functionality by writing tags which were then intrepreted by ASP.NET and turned into regular HTML and CSS before reaching the browser

  • Microsoft implemented server controls for all the common HTML controls like asp:Textbox (which would be rendered as an INPUT HTML tag)

  • Unfortunately, the major complaint about WebForm server controls was the lack of control over the resulting HTML. ASP.NET WebForms were in charge of generating the output to the browser and this became a problem for two reasons

    • Sometimes the resulting HTML would not work in all browsers

    • Second of all a lot of purists demanded the HTML be formatted in a specific way, lowercase or uppercase

• Learn about the transition from server controls to HTML helpers

  • Microsoft decided to completely leave out server controls when they implemented MVC.

  • For this reason they invented the Razor language which allowed you to combine programming logic like IF statements and loops with regular markup.

  • But missing was the ability to connect the Model data with its visual representation in the View. For this reason they introduced HTML helpers.

  • the concept of HTML helpers allowed you to generate markup for your Model data, especially when generating FORM's and its elements.

  • For instance if you were to create an INPUT field for the PlayerName property of our Model, you would write the markup like this:

    • <input type="text" name="PlayerName" value="@model.PlayerName" />

    • With the introduction of HTML Helpers you could instead call the TextBoxFor() method on the Html helper class to have this tag generated automatically
      @Html.TextBoxFor(model => model.PlayerName)

    • It's shorter and you get the added benefit of compile time checking of the Razor code.

• Learn about the transition from HTML helpers to Tag helpers

  • Thanks to HTML helpers, binding your Model data together with the markup in your Views is now a lot easier, but a problem from the days of server controls still exists:

  • Since the markup has been abstracted into helper methods, these helper methods are now responsible for generating your HTML and they also have to be flexible enough to support all the ways you might want to use them. Consider our example from before, but now imagine that we want to add a couple of properties with values to the HTML generated:
    @Html.TextBoxFor(model => model.PlayerName, new { @class = "form-control", style = "font-weight: bold; font-size: 120%;" })

  • The example is now way less elegant than it was before, just because we wanted to add a class and style property with values to the INPUT tag.

  • Microsoft decided to solve this problem by taking the best from both worlds: With Tag helpers, you write regular HTML tags instead of Razor commands, but you can mix in custom server-side attributes which will allow you to, for instance, easily bind to data from your model. With Tag helpers, we can rewrite our previous example to something like this:
    <input asp-for="PlayerName" class="form-control" style="font-weight: bold; font-size: 120%;" />

  • Notice that the ONLY thing that doesn't look like a regular HTML tag/attribute setup is the asp-for attribute. This is how MVC knows which property from the Model that this control is created for - this information will be used to generate the Name of the INPUT field ("PlayerName" in this case) and the value will be automatically added as well.

• Discuss the use of Tag Helpers vs HTML Helpers

  • HTML helpers are still relevant and a viable choice in ASP.NET MVC. You may prefer their syntax or the way they work, but on top on that, there are still things they can do, which Tag helpers cannot.

  • For this reason you will see me use both Tag helpers and HTML helpers.
    
    

In this Lecture we will

• Discuss how one of the most common ways of taking input from the user in a web application is through the query string

  • In classic ASP you would deal directly with the query string but MVC has abstracted most query string handling  into parameters in Controller actions

• Review what a query string is

  • The query string is the part of the URL that comes after a question mark character. So in a URL like this:
    
    https://www.google.com/search?q=test&oq=hello
    
    Everything after the ? character is considered the query string. In this case there are two parameters: One called q and one called oq with values "test" and "hello"

  • The query string is usually appended as the result of the user clicking on a link or submitting a FORM. This allows the same file on your server to handle multiple situations - it can vary the output  returned based on the input through the query string

• Learn how to access the query string

  • To access the query string we use the HttpContext class property of Query
    
    public IActionResult QueryTest()

            {

                string name = "Pascal Siakim";

    
    

                if (!String.IsNullOrEmpty(HttpContext.Request.Query["name"]))

                    name = HttpContext.Request.Query["name"];

    
    

                return Content("Name from query string " + name);

    
    

                //To test this out use a URL like this

                // /Home/QueryTest?name=Serge Ibaka

            }

In this Lecture we will

• Learn that HTTP the protocol that takes care of the communication between a server and a client on the web is known as a stateless protocol. In other words, if a user requests two pages on a server, no information will be shared between these two request automatically

  • Instead a developer will have to rely on something called cookies to share information between the requests. This is extremely useful in a lot of situations eg. to keep a user logged in between several requests.

• Learn what a cookie is

  • A cookie is basically a physical plain-text file stored by the client (usually a browser) tied to a specific website. The client will then allow this specific website to read the information stored in this file on subsequent requests, basically allowing the server  to store information for later use.

• Learn how to set and read cookies

  • HttpContext.Response.Cookies.Append("user_id", "1");

    • this declares  a cookie named user_id with a value of 1

  • var userId = HttpContext.Request.Cookies["user_id"];

    • this gets back the value of the cookie user_id

• Create a simple code block which determines if a user has visited our site before or not

  • public IActionResult Index()

            {

             

                //Working with Cookies

                //Simple example which determines whether has visited this site before

    
    

                CookieOptions cookieOptions = new CookieOptions();

                cookieOptions.Expires = new DateTimeOffset(DateTime.Now.AddDays(7));

    
    

                if (!HttpContext.Request.Cookies.ContainsKey("first_request"))

                {

                    HttpContext.Response.Cookies.Append("first_request", DateTime.Now.ToString(), cookieOptions);

                    return Content("Welcome, new visitor");

                }

                else

                {

                    DateTime firstRequest = DateTime.Parse(HttpContext.Request.Cookies["first_request"]);

                    return Content("Welcome back, user! You first visited us on " + firstRequest.ToString());

                }

  • Here we check whether the visitor has visited the page before by always checking for the presence of a cookie with the name of "first_request" - if this cookie is not present, we add it, while setting the value to the current date and time. If the cookie is present we can assume that the visitor has visited the page before and we can even tell the visitor when the first visit occurred.

  • Notice also the use of an optional third parameter to the Append() method. You can pass an instance of the CookieOptions class. It allows you to adjust several important aspects of your cookie eg. how long it should stay alive.

In this Lecture we will

• Briefly discuss the importance of using a database in a web application ( a full DB connected application will created in the next section)

  • For most programming languages and frameworks the ability to communicate with a database is very important. This is even more true for frameworks targeted towards the web where you will quickly run into the need for a database to store date for you website

• Learn that when using Visual Studio the best database to use is Microsoft's SQL Server  Express which is built into the IDE.

  • You can work with the database (design tables, edit rows etc) directly from Visual Studio

  • It scales very well - you can use it for a small, personal website and if that website grows with thousand of visitors, SQL Server will still have more than enough power and scalability to support it.

In this Lecture we will

• Learn the basics of building an ASP.NET Core MVC web app. The app manages a database of Player Info for the Toronto Raptors Professional Basketball Team.
  Over the next 10 Lectures you learn how to:

  • Create a web app.

  • Add and scaffold a model.

  • Work with a database.

  • Add search and validation.

  At the end, you will have an app that can manage and display player data.

• Start the process of creating the app by :

  • Creating a new project ... ASP.NET Core Web Application called MVCBasketball

  • Select Web Application (Model-View-Controller)

  • Test run the app

In this Lecture we will

• Review that the MVC architectural pattern separates an app intro three main components: Model, View and Controller. The MVC pattern helps you create apps that are more testable and easier to update than traditional apps.

  • Models: Classes that represent the data of the app. The model classes use validation logic to enforce business rules for that data. Typically, model objects retrieve and store model state in a database. In this tutorial, a Raptor model retrieves player data from a database, provides it to the view or updates it. Updated data is written to a database.

  • Views: Views are the components that display the app's user interface (UI). Generally, this UI displays the model data.

  • Controllers: Classes that handle browser requests. They retrieve model data and call view templates that return a response. In an MVC app, the view only displays information; the controller handles and responds to user input and interaction. For example, the controller handles route data and query-string values, and passes these values to the model. The model might use these values to query the database. For example, https://localhost:5001/Home/About has route data of Home (the controller) and About (the action method to call on the home controller).

• Create the HomeController

  • Right-Click Controllers ... Add -> Controller

  • Select the MVC Controller Empty template

• Go through a series of modifications to the Controller contents

  • replace return View() with return Content("This is the default action")

  • create a new method
    public  IActionResult Welcome()

    {

    return "This is the Welcome action method...";

    }
    

  • Every public method in a controller is callable as an HTTP endpoint. In the samples above both methods return a string. The first is called using /Home and the second is called using /Home/ Welcome

• Learn that MVC invokes controller classes (and the action methods within them) depending on the incoming URL. The default URL routing logic is set in the Configure method in Startup.cs

  • //The default URL routing logic

                //When you browse to the app and don't supply any URL segments

                //it defaults to the "Home" controller and the "Index" method

                //Note: the trailing ? (in id?) indicates the id parameter is optional

                app.UseMvc(routes =>

                {

                    routes.MapRoute(

                        name: "default",

                        template: "{controller=Home}/{action=Index}/{id?}");

                });

• Learn how to modify the Welcome method (action) to handle passing some parameter information from the URL to the Controller

  • /Home/Welcome?playername=Kyl&age=30

  • public string Welcome(string playername,int age=24)

            {           

               

                //I'm using HtmlEncoder to protect the app from malicious input

               

                return HtmlEncoder.Default.Encode($"Hello {playername}, age is: {age}");

               

                //The $ special character identifies a string literal as an

                //interpolated string. An interpolated string is a string literal

                //that might contain interpolation expressions.

                //When an interpolated string is resolved to a result string,

                //items with interpolation expressions are replaced by the

                //string representations of the expression results.

            }

• Discuss the fact that in these examples the controller has been doing the VC portion of MVC - that is the view and controller work. The controller is returning HTML directly. Generally you don't want controllers returning HTML directly since that becomes very cumbersome to code and maintain. Instead you typically use a separate Razor view template file to help generate the HTML response. We do that in the next lecture.

In this Lecture we will

• Modify the HomeController class to use Razor view files to cleanly encapsulate the process of generating HTML responses to a client

  • Razor based view templates have a .cshtml file extension. They provide an elegant way to create HTML output with C#

  • Currently  the Index method returns a string with a message that is hard-coded . We will replace this with
    public IActionResult Index()

            {

                return View();

                //return Content("This is the default action ");

            }
    
    This code calls the controller's View method. The Index method returns an IActionResult not a type like string

• Learn to to create the corresponding View for the action method above.

  • Right click on the Views folder and add a sub-folder called Home

  • Right click on this Home folder and Add ... New Item...View

  • Use Name ... index.cshtml and then add

    • @{

          ViewData["Title"] = "Toronto Raptors Roster";

      }

      
      

      <h2>Team Roster</h2>

      
      

      <p>Hello from our View Template</p>

• Learn how to change Views and Layout pages

  • Note that when you click on all the links they each show the same menu layout. The menu layout is implemented in the Views/Shared/_Layout.cshtml file.

  • Open the _Layout.cshtml file. You will notice that the template allows you to specify the HTML container layout of your site in one place and then apply it across multiple pages in your site.

  • Notice the @RenderBody() line. This is a placeholder where all the view specific pages you create show up, wrapped in the layout page.

  • Change the title, footer and menu link in the layout file

• Learn about the significance of the _ViewStart.cshtml file

  • @{

        Layout = "_Layout";

    }
    This file brings in the Views/_Layout.cshtml to each view. The Layout property can be used to set a different layout view, or set it to null so no layout file will be used.

  • Notice how the content in the Index.cshtml view template was merged with the Views/Shared/_Layout.cshtml view template and a single HTML response was sent to the browser.

• Learn how to pass data from the Controller to the View using a ViewData dictionary

  • currently the Welcome method in the HomeController class takes a playername and age parameter and then outputs the values directly to the browser. Rather than have the controller render this response as a string, we are going to use a view template instead.

  • public IActionResult Welcome(string playername,int age=2)

            {

                //The ViewData dictionary is a dynamic object,

                //which means any type can be used;

                //the ViewData object has no defined properties

                //until you put something inside it.

                //The MVC model binding system automatically maps

                //the named parameters(playername and age) from the query string

                //in the address bar to parameters in your method.             

    
    

                ViewData["Message"] = "Hello " + playername;

                ViewData["Age"] = age;

    
    

                //The ViewData dictionary object contains data that will be passed

                //to the view.

                return View();

    
    

            }

  • Now we need to create a new Razor page to match the Welcome action (inside the Views/Home folder) called Welcome.cshtml

    • @{

          ViewData["Title"] = "Welcome";

      }

      
      

      <h2>Welcome</h2>

      
      

      <ul>

          @for (int i = 0; i < (int)ViewData["Age"] ;i++)

          {

              <li>@ViewData["Message"]</li>

          }

      
      

      </ul>

      
      

      @*browse to the URL

          /Home/Welcome?playername=Kyle Lowry&age=24

         

          Data is taken from the URL and passed to the controller using the

          MVC model binder.

          The controller packages the data into a ViewData dictionary and

          passes that object to the view.

          The view then renders the data as HTML to the browser*@

• Conclude with the fact that in this Lecture the ViewData dictionary was used to pass data from the controller to a view. In our next Lecture a view Model is used to pass data from a controller to a view. The view model approach to passing data is generally much preferred over the ViewData dictionary approach. In the next Lecture a database of player stats is created.

In this Lecture we will

• Add classes for managing player info in a database. These classes will be the "Model" part of the MVC app.

• Learn how to implement these classes with the Entity Framework Core to work with a database.

  • EF Core is an object-relational mapping (ORM) framework that simplifies the data access code that you have to write.

• Start off by adding a data model class

  • Right click the Models folder... Add...Class...Raptors

  • Add the following properties to the Raptors class:
    public class Raptors

        {

            public int Id { get; set; }

            public int PlayerNum { get; set; }

            public string PlayerName { get; set; }

            public string PlayerPosition { get; set; }

            public string PlayerHeight { get; set; }

            public double PlayerSalary { get; set; }

        }

• Learn how to Scaffold the Raptors model

  • The scaffolding tool produces pages for Create, Read, Update and Delete (CRUD) for the Raptors model

  • In the Solution Explorer, right click the Controllers folder... Add... New Scaffolded Item
    In the Add Scaffold dialog, select MVC Controller with views, using Entity Framework ... Add
    Complete the Add Controller dialog
    Model class: Raptors
    Data Context class ... Select the + icion and add the default
    Views: Keep the default of each option checked
    Controller name: Keep the default... Select Add

  • Visual Studio creates:

    • In the data folder an Entity Framework Core (database context class) MVCBasketballContext.cs

    • a Raptors Controller

    • Razor view files for Create, Delete, Details, Edit and Index pages (Views/Raptors/*.cshtml)

    • This automatic creation of the database context and CRUD action methods and views is known as scaffolding.

• Learn that if you run the app now you will get an error. You need to create the database, and you use the EF Core Migrations feature to do that. Migrations lets you create a database that matches your data model and update the database schema when you model changes.

  • Initial Migration

    • From the Tools menu , select NuGet Package Manager... Package Manager Console

    • In the console enter the following commands
      Add-Migration Initial
      Update-Database

• Test the app

  • Test the Create link...Enter and submit data

  • Test the Edit, Details and Delete links

• Recall how in an earlier Lecture we had the controller pass data or objects to a view using the ViewData dictionary. But MVC also provides the ability to pass strongly typed model objects to a view. The scaffolding mechanisim used this approach with the RaptorsController class and views when it created the methods and views.

  • Examine the generated Details method in the RaptorsController
    public async Task<IActionResult> Details(int? id)

            {

               

                //the id parameter is defined as a nullable type (int ?)

                //in case an ID value isn't provided

               

                if (id == null)

                {

                    return NotFound();

                }

    
    

                //a lambda expression is passed in to the FirstOrDefaultAsync

                //to select player entities that match the route data or query string

                //if a player is found, an instance of the Raptors model is passed to

                //the Details view

    
    

                var raptors = await _context.Raptors

                    .FirstOrDefaultAsync(m => m.Id == id);

                if (raptors == null)

                {

                    return NotFound();

                }

    
    

                return View(raptors);

            }

• Examine the contents of the Views/Raptors/Details.cshtml
  @model MVCBasketball.Models.Raptors

  
  

  @{

      ViewData["Title"] = "Details";

  }

  
  

  <h1>Details</h1>

  
  

  <div>

      <h4>Raptors</h4>

      <hr />

      <dl class="row">

          <dt class = "col-sm-2">

              @Html.DisplayNameFor(model => model.PlayerNum)

          </dt>

          <dd class = "col-sm-10">

              @Html.DisplayFor(model => model.PlayerNum)

          </dd>

          <dt class = "col-sm-2">

              @Html.DisplayNameFor(model => model.PlayerName)

          </dt>

          <dd class = "col-sm-10">

              @Html.DisplayFor(model => model.PlayerName)

          </dd>

          <dt class = "col-sm-2">

              @Html.DisplayNameFor(model => model.PlayerPosition)

          </dt>

          <dd class = "col-sm-10">

              @Html.DisplayFor(model => model.PlayerPosition)

          </dd>

          <dt class = "col-sm-2">

              @Html.DisplayNameFor(model => model.PlayerHeight)

          </dt>

          <dd class = "col-sm-10">

              @Html.DisplayFor(model => model.PlayerHeight)

          </dd>

          <dt class = "col-sm-2">

              @Html.DisplayNameFor(model => model.PlayerSalary)

          </dt>

          <dd class = "col-sm-10">

              @Html.DisplayFor(model => model.PlayerSalary)

          </dd>

      </dl>

  </div>

  <div>

      <a asp-action="Edit" asp-route-id="@Model.Id">Edit</a> |

      <a asp-action="Index">Back to List</a>

  </div>

  • By including a @model statement at the top of the view file, you can specify the type of object that the view expects.

    
    

    
    

In this Lecture we will

• Take a look at using SQL Server Express LocalDB

  • LocalDB is a lightweight version of the SQL Server Express Database Engine that's targeted for program development in Visual Studio

  • LocalDB starts on demand and runs in user mode so there's no complex configurations.

  • By default, LocalDB database creates .mdf files

  • From the View menu open SQL Server Object Explorer

    • Click on Databases ... then MVCBasketballContext ... then Tables

    • Now right click Raptors and pick View Designer

    • Note the key icon next to ID. By default EF will make a property named ID the primary key.

    • Right click again on Raptors and pick View Data ... The database is empty

• Learn how to seed the database

  • Create a new class named SeedData in the Models folder. Replace the generated code with the following.
    public static void Initialize(IServiceProvider serviceProvider)

            {

                using (var context = new MVCBasketballContext(

                    serviceProvider.GetRequiredService<

                        DbContextOptions<MVCBasketballContext>>()))

                {

                               

                   

                    // Look for any player info

                    if (context.Raptors.Any())

                    {

                        return;   // DB has been seeded

                    }

    
    

                    context.Raptors.AddRange(

                        new  Raptors

                        {

                            PlayerNum = 9,

                            PlayerName = "Serge Ibaka",

                            PlayerPosition = "Forward",

                            PlayerHeight = "7-0",

                            PlayerSalary=22271604

                        },

    
    

                        new Raptors

                        {

                            PlayerNum = 33,

                            PlayerName = "Marc Gasol",

                            PlayerPosition = "Centre",

                            PlayerHeight = "6-11",

                            PlayerSalary = 25595700

                        },

    
    

                        new Raptors

                        {

                            PlayerNum = 7,

                            PlayerName = "Kyle Lowry",

                            PlayerPosition = "Guard",

                            PlayerHeight = "6-0",

                            PlayerSalary = 34996296

                        },

    
    

                        new Raptors

                        {

                            PlayerNum = 43,

                            PlayerName = "Pascal Siakam",

                            PlayerPosition = "Forward",

                            PlayerHeight = "6-9",

                            PlayerSalary = 2351839

                        },

    
    

                        new Raptors

                        {

                            PlayerNum = 23,

                            PlayerName = "Fred VanVleet",

                            PlayerPosition = "Guard",

                            PlayerHeight = "6-1",

                            PlayerSalary = 9346153

                        },

    
    

                        new Raptors

                        {

                            PlayerNum = 24,

                            PlayerName = "Norman Powell",

                            PlayerPosition = "Guard",

                            PlayerHeight = "6-3",

                            PlayerSalary = 10116576

                        },

    
    

                        new Raptors

                        {

                            PlayerNum = 3,

                            PlayerName = "OG Anunoby",

                            PlayerPosition = "Forward",

                            PlayerHeight = "6-7",

                            PlayerSalary = 2281800

                        }

    
    

                    );

                    context.SaveChanges();

                }

            }

  • Note: If there are any records in the DB, the seed initializer returns and no records are added.

  • Next we need to add the seed initializer

    • replace the contents of Program.cs with the following code.
      public static void Main(string[] args)

              {

                  //Here we start the process of adding the seed initializer

                 

                  var host = CreateWebHostBuilder(args).Build();

      
      

                  using (var scope = host.Services.CreateScope())

                  {

                      var services = scope.ServiceProvider;

      
      

                      try

                      {

                          var context = services.GetRequiredService<MVCBasketballContext>();

                          context.Database.Migrate();

                          SeedData.Initialize(services);

                      }

                      catch (Exception ex)

                      {

                          var logger = services.GetRequiredService<ILogger<Program>>();

                          logger.LogError(ex, "An error occurred seeding the DB.");

                      }

                  }

      
      

                  host.Run();

      
      

              }

• Test the app ... if there is data in the database delete all the records first either using the delete links in the browser app or right in SQL Server Express LocalDB

  • MVCBasketball (pre .NET 6 version)

  • MVCBballNet7WorkingWithSQLwithSeed (.NET 6+ version)

  • MVCBballNet7WorkingWithSQLwithoutSeed (.NET 6+ version)

    
    

    
    

In this Lecture we will

• Start by modifying Raptors.cs in the Models folder to update the field (column) titles .

  • public class Raptors

        {

            public int Id { get; set; }

           

            [Display(Name= "Player Number")]

            public int PlayerNum { get; set; }

           

            [Display(Name = "Player Name")]

            public string PlayerName { get; set; }

           

            [Display(Name = "Position ")]

            public string PlayerPosition { get; set; }

           

            [Display(Name = "Height")]

            public string PlayerHeight { get; set; }

           

            [Display(Name = "Salary")]

            [Column(TypeName="double(18,2)")]

            public double PlayerSalary { get; set; }

        }

  • The Display attribute specifies what to display for the name of a field (in this case "Player Number" instead of "PlayerNumber"

• Take a look at the two "Edit" Controller actions methods

  • The code below shows the HTTP GET  Edit method which fetches the movie and populates the edit form generated by the Edit.cshtml Razor file
    
    // GET: Raptors/Edit/5

            public async Task<IActionResult> Edit(int? id)

            {

                if (id == null)

                {

                    return NotFound();

                }

    
    

                var raptors = await _context.Raptors.FindAsync(id);

                if (raptors == null)

                {

                    return NotFound();

                }

                return View(raptors);

            }

  • The code below shows the HTTP POST edit method which processes the posted player info values;
    
    // POST: Raptors/Edit/5

            // To protect from overposting attacks, please enable the specific properties you want to bind to, for

            // more details see http://go.microsoft.com/fwlink/?LinkId=317598.

            [HttpPost]

            [ValidateAntiForgeryToken]

            public async Task<IActionResult> Edit(int id, [Bind("Id,PlayerNum,PlayerName,PlayerPosition,PlayerHeight,PlayerSalary")] Raptors raptors)

            {

                if (id != raptors.Id)

                {

                    return NotFound();

                }

    
    

                if (ModelState.IsValid)

                {

                    try

                    {

                        _context.Update(raptors);

                        await _context.SaveChangesAsync();

                    }

                    catch (DbUpdateConcurrencyException)

                    {

                        if (!RaptorsExists(raptors.Id))

                        {

                            return NotFound();

                        }

                        else

                        {

                            throw;

                        }

                    }

                    return RedirectToAction(nameof(Index));

                }

                return View(raptors);

            }

    • Notice how the second Edit action method is preceded by the [HttpPost] attribute. The HttpPost attribute specifies that this Edit method can be invoked only for POST requests.  You could apply the [HttpGet] attribute to the first edit method, but that's not necessary because [HttpGet] is the default.

    • The ValidateAntiForgeryToken attribute is used to prevent forgery of a request and is paired up with an anti-forgery token generated in the edit view file (Views/Raptors/Edit.cshtml).

    • The [Bind] attribute is one way to protect against over-posting. You should only include properties i the [Bind] attribute that you want to change.

    • The HttpGet Edit method takes the Player ID parameter, looks up the Player using the Entity Framework FindAsync method, and returns the selected Player to the Edit view. If a movie cannot be found, NotFound (HTTP 404) is returned.

• Learn that when the scaffolding system create the Edit view, it examined the Raptors class and created code to render <label> and <input> elements for each property of the class. Below we see the Edit view that was generated by the Visual Studio scaffolding system
  
  @model MVCBasketball.Models.Raptors

  
  

  @{

      ViewData["Title"] = "Edit";

  }

  
  

  <h1>Edit</h1>

  
  

  <h4>Raptors</h4>

  <hr />

  <div class="row">

      <div class="col-md-4">

          <form asp-action="Edit">

              <div asp-validation-summary="ModelOnly" class="text-danger"></div>

              <input type="hidden" asp-for="Id" />

              <div class="form-group">

                  <label asp-for="PlayerNum" class="control-label"></label>

                  <input asp-for="PlayerNum" class="form-control" />

                  <span asp-validation-for="PlayerNum" class="text-danger"></span>

              </div>

              <div class="form-group">

                  <label asp-for="PlayerName" class="control-label"></label>

                  <input asp-for="PlayerName" class="form-control" />

                  <span asp-validation-for="PlayerName" class="text-danger"></span>

              </div>

              <div class="form-group">

                  <label asp-for="PlayerPosition" class="control-label"></label>

                  <input asp-for="PlayerPosition" class="form-control" />

                  <span asp-validation-for="PlayerPosition" class="text-danger"></span>

              </div>

              <div class="form-group">

                  <label asp-for="PlayerHeight" class="control-label"></label>

                  <input asp-for="PlayerHeight" class="form-control" />

                  <span asp-validation-for="PlayerHeight" class="text-danger"></span>

              </div>

              <div class="form-group">

                  <label asp-for="PlayerSalary" class="control-label"></label>

                  <input asp-for="PlayerSalary" class="form-control" />

                  <span asp-validation-for="PlayerSalary" class="text-danger"></span>

              </div>

              <div class="form-group">

                  <input type="submit" value="Save" class="btn btn-primary" />

              </div>

          </form>

      </div>

  </div>

  
  

  <div>

      <a asp-action="Index">Back to List</a>

  </div>

  • Note how the scaffolded code uses several Tag Helper methods to streamline the HTML markup.

  • The Label Tag Helper displays the name of the field and the Input Tag Helper renders an HTML <input. element.

• Run the application and navigate to the /Raptors URL. Click an Edit link. In the browser view the source for the page.  The <input>elements are in an HTML <form> element whose action attribute is set to post to the /Raptors/Edit/id URL. The form data will be posted to the server when the Save button is clicked. The last line before the closing </form> element shows the hidden XSRF token generated by the Form Tag Helper.

In this Lecture we will

• Learn how to implement a search by "Position" in our web application

• Learn we need to update the Index action method found inside the Controllers/RaptorsController.cs with the following code:
  
  public async Task<IActionResult> Index(string searchString)

          {

              //This creates a LINQ query to select the player info

              //The query is only defined at this point it has not been

              //run against the database

              var raptor = from m in _context.Raptors

                           select m;     

  
  

              //If the searchString parameter contains a string, the basketball

              //query is modified to filter on the value of the string string

              if (!String.IsNullOrEmpty(searchString))

              {

                  raptor = raptor.Where(s => s.PlayerPosition.Contains(searchString));

              }

              return View(await raptor.ToListAsync());

  
  

              //To test this out try the following

              //Navigate to /Raptors/Index?searchString=Guard

                        

          }

  • The s=> s.PlayerPosition.Contains() code above is a Lambda Expression. Lambdas are used in method-based LINQ queries as arguments to standard query operator methods asuch as the Where method or Contains (used in the code above).

  • Note: The Contains method is run on the database not  in the C# code shown above.

• Learn that you can't expect users to modify the URL every time they want to search by  "position". So now we will add UI elements to help filter player positions.

  • Open the Views/Raptors/Index.cshtml and add the <form> markup below

    <h1>Index</h1>

    
    

    <p>

        <a asp-action="Create">Create New</a>

    </p>

    
    

    <form asp-contorller="Raptors" asp-action="Index">

    
    

        <p>

            Position:<input type="text" name="searchString" />

            <input type="submit" value="Filter" />

        </p>

    
    

    </form>

    
    

    <table class="table">

  • Note the HTML <form> tag uses the Form Tag Helper so when you submit the form, the filter string is posted to the Index action of the Raptors controller.

• Test out the filter

  
  

In this Lecture we will

• Learn how to add a new field called PlayerCollege to the application

  • First we add the field PlayerCollege to Models/Raptors.cs
    
    public class Raptors

        {

            public int Id { get; set; }

            [Display(Name= "Player Number")]

            public int PlayerNum { get; set; }

           

            [Display(Name = "Player Name")]

            public string PlayerName { get; set; }

           

            [Display(Name = "Position ")]

            public string PlayerPosition { get; set; }

           

            [Display(Name = "Height")]

            public string PlayerHeight { get; set; }

           

            [Display(Name = "Salary")]

            [Column(TypeName="double(18,2)")]

            public double PlayerSalary { get; set; }

    
    

            [Display(Name ="College")]

            public string PlayerCollege { get; set; }

        }

  • Next because we've added a new field to the Raptors class you need to update the binding white list so this new property will be included . In the RaptorsController.cs we update the [Bind] attribute for both the Create and Edit action methods to include the PlayerCollege property:
    
    public async Task<IActionResult> Create([Bind("Id,PlayerNum,PlayerName,PlayerPosition,PlayerHeight,PlayerSalary,PlayerCollege")] Raptors raptors)

            {

                if (ModelState.IsValid)

                {

                    _context.Add(raptors);

                    await _context.SaveChangesAsync();

                    return RedirectToAction(nameof(Index));

                }

                return View(raptors);

            }
    
    public async Task<IActionResult> Edit(int id, [Bind("Id,PlayerNum,PlayerName,PlayerPosition,PlayerHeight,PlayerSalary,PlayerCollege")] Raptors raptors)

            {

                if (id != raptors.Id)

                {

                    return NotFound();

                }

    
    

                if (ModelState.IsValid)

                {

                    try

                    {

                        _context.Update(raptors);

                        await _context.SaveChangesAsync();

                    }

                    catch (DbUpdateConcurrencyException)

                    {

                        if (!RaptorsExists(raptors.Id))

                        {

                            return NotFound();

                        }

                        else

                        {

                            throw;

                        }

                    }

                    return RedirectToAction(nameof(Index));

                }

                return View(raptors);

            }

  • Next we need to update the view templates in order to display, create and edit the new PlayerCollege property in the browser view

    • Edit the /Views/Raptors/Index.cshtml and add a PlayerCollege field
      
      <table class="table">

          <thead>

              <tr>

                  <th>

                      @Html.DisplayNameFor(model => model.PlayerNum)

                  </th>

                  <th>

                      @Html.DisplayNameFor(model => model.PlayerName)

                  </th>

                  <th>

                      @Html.DisplayNameFor(model => model.PlayerPosition)

                  </th>

                  <th>

                      @Html.DisplayNameFor(model => model.PlayerHeight)

                  </th>

                  <th>

                      @Html.DisplayNameFor(model => model.PlayerSalary)

                  </th>

                  <th>

                      @Html.DisplayNameFor(model => model.PlayerCollege)

                  </th>

                  <th></th>

              </tr>

          </thead>

          <tbody>

      @foreach (var item in Model) {

              <tr>

                  <td>

                      @Html.DisplayFor(modelItem => item.PlayerNum)

                  </td>

                  <td>

                      @Html.DisplayFor(modelItem => item.PlayerName)

                  </td>

                  <td>

                      @Html.DisplayFor(modelItem => item.PlayerPosition)

                  </td>

                  <td>

                      @Html.DisplayFor(modelItem => item.PlayerHeight)

                  </td>

                  <td>

                      @Html.DisplayFor(modelItem => item.PlayerSalary)

                  </td>

                  <td>

                      @Html.DisplayFor(modelItem => item.PlayerCollege)

                  </td>

                  <td>

                      <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |

                      <a asp-action="Details" asp-route-id="@item.Id">Details</a> |

                      <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>

                  </td>

              </tr>

      }

          </tbody>

      </table>

    • Update the /Views/Raptors/Create.cshtml with a PlayerCollege field. You can copy/paste the previous "form group" and let IntelliSense help you update the fields.

    • Update the remaining templates.

  • Next we access the SQL Server Object Explorer windows ... go into the appropriate database and hand enter the new field called "PlayerCollege". Lastly hand update in SQL Server all the players.

  • ... If you are loading in the demo solution for this lecture you may need to go to the Package Manager Console and enter

    • add-migration college

    • update-database

In this Lecture we will

• Learn what it means to keep things DRY

  • One of the design tenets of MVC is DRY ("Don't Repeat Yourself"). ASP.NET Core MVC encourages you to specify functionality or behavior only once, and then have it be reflected everywhere in an app. This reduces the amount of code you need to write and makes the code you do write less error prone, easier to test, and easier to maintain.

  • The validation support provided by MVC and Entity Framework Core Code First is a good example of the DRY principle in action. You can declaratively specify validation rules in one place (in the model class) and the rules are enforced everywhere in the app.

• Learn how to add validation rules to the Raptors model

  • The DataAnnotations namespace provides a set of built-in validation attributes that are applied declaratively to a class or property. DataAnnotations also contains formatting attributes like DataType that help with formatting and don't provide any validation.

  • Update the Raptor class to take advantage of the built in Required, StringLength and Range validation attributes
    
    public class Raptors

        {

            public int Id { get; set; }

           

            [Range(1,100)]   //between 1 and 100

            [Required]       //must have a value

            [Display(Name= "Player Number")]

            public int PlayerNum { get; set; }

           

            [StringLength(60, MinimumLength=3)] //maximum and minimum length of string

            [Required]

            [Display(Name = "Player Name")]

            public string PlayerName { get; set; }

           

            [Display(Name = "Position ")]

            [StringLength(60, MinimumLength =3)]

            [Required]

            public string PlayerPosition { get; set; }

           

            [Display(Name = "Height")]

            [Required]

            public string PlayerHeight { get; set; }

           

            [Display(Name = "Salary")]

            [Range(1,100000000)]

            [DataType(DataType.Currency)]   //lots of other DataType attributes available

            [Required]                      //Date, Time , PhoneNumber, EmailAddress 

            public double PlayerSalary { get; set; }

    
    

            [Display(Name ="College")]

            [StringLength(60, MinimumLength = 3)]

            public string PlayerCollege { get; set; }

        }

  • The validation attributes specify behavior that you want to enforce on the model properties they're applied to:

    • The Required and MinimumLength attributes indicate that a property must have a value; but nothing prevents a user from entering white space to satisfy this validation.

  • Having validation rules automatically enforced by ASP.NET Core helps make your app more robust. It also ensures that you can't forget to validate something and inadvertently let bad data into the database.

• Run the application and navigate to the Raptors controller. Tap the Create New link and add a new player. Fill out the form with some invalid values. As soon as jQuery client side validation detects the error, it displays an error message.

  • Notice how the form has automatically rendered an appropriate validation error message in each field containing an invalid value. The errors are enforced both client-side (using JavaScript and jQuery) and server-side (in case a user has JavaScript disabled).

  • A significant benefit is that you didn't need to change a single line of code in the RaptorsController class or in the Create.cshtml view in order to enable this validation UI. The controller and views you created earlier in these Lectures automatically picked up the validation rules that you specified by using validation attributes on the properties of the Raptors model class. Test validation using the Edit action method, and the same validation is applied.

  • The form data isn't sent to the server until there are no client side validation errors.

In this Lecture we will

• Open the Raptors Controller and examine the Details method
  
  // GET: Raptors/Details/5

  public async Task<IActionResult> Details(int? id)

          {

              //The id parameter is generally passed as route data

              //for example /Raptors/Details/1 ... sets:

              //the controller to the Raptors controller

              //the action to details

              //the id to 1

              //the id parameter is defined as a nullable type (int ?)

              //in case an ID value isn't provided

             

              if (id == null)

              {

                  return NotFound();

              }

  
  

              //a lambda epression is passed in to the FirstOrDefaultAsync

              //to select player entities that match the route data or query string

              //if a player is found, an instance of the Raptors model is passed to

              //the Details view

  
  

              var raptors = await _context.Raptors

                  .FirstOrDefaultAsync(m => m.Id == id);

              if (raptors == null)

              {

                  return NotFound();

              }

  
  

              return View(raptors);

          }

  • The MVC scaffolding engine that created this action method adds a comment showing an HTTP request that invokes the method. In this case it's a GET request with three URL segments, the Raptors controller, the Details method, and an id value. Recall these segments are defined in Startup.cs.

    
    

    app.UseMvc(routes =>

    {

    routes.MapRoute(

    name: "default",

    template: "{controller=Home}/{action=Index}/{id?}");

    });

  • EF makes it easy to search for data using the FirstOrDefaultAsync method. An important security feature built into the method is that the code verifies that the search method has found a movie before it tries to do anything with it. For example, a hacker could introduce errors into the site by changing the URL created by the links from http://localhost:{PORT}/Raptors/Details/1 to something like http://localhost:{PORT}/Raptors/Details/12345 (or some other value that doesn't represent an actual Raptor player ). If you didn't check for a null raptor, the app would throw an exception.

• Examine the Delete and DeleteConfirmed methods

  
  // GET: Raptors/Delete/5

          public async Task<IActionResult> Delete(int? id)

          {

              if (id == null)

              {

                  return NotFound();

              }

  
  

              var raptors = await _context.Raptors

                  .FirstOrDefaultAsync(m => m.Id == id);

              if (raptors == null)

              {

                  return NotFound();

              }

  
  

              return View(raptors);

          }

  
  

          // POST: Raptors/Delete/5        ActionName below performs mapping   

          [HttpPost, ActionName("Delete")] //for the routing system so that a URL that includes 

          [ValidateAntiForgeryToken]       // /Delete/ for a POST request will find DeleteConfirmed

          public async Task<IActionResult> DeleteConfirmed(int id)

          {

              var raptors = await _context.Raptors.FindAsync(id);

              _context.Raptors.Remove(raptors);

              await _context.SaveChangesAsync();

              return RedirectToAction(nameof(Index));

          }

  • Note that the HTTP GET Delete method doesn't delete the specified Raptor player, it returns a view of the player where you can submit (HttpPost) the deletion. Performing a delete operation in response to a GET request (or for that matter, performing an edit operation, create operation, or any other operation that changes data) opens up a security hole.

  • The [HttpPost] method that deletes the data is named DeleteConfirmed to give the HTTP POST method a unique signature or name.

• Offer you several Challenges to review and extend your MVC skills

  • MVCProject.pdf

  • RevisitWebFormProblems.rar

In this Lecture we will

• Learn that when it comes to web application development there are multiple technologies available to choose from. There are open-source technologies like Java, PHP and closed source technologies like ASP.NET MVC.

• Learn that ASP.NET Core , MVC's successor is now an open source , cross-platform framework developed by Microsoft. Basically it is a complete reform of ASP.NET that combines MVC structure and Web API into a single framework.

• Look at the elements that make ASP.NET Core the right choice for app development

  • The MVC architecture provides a clear separation of concerns.

  • Razor Pages is a new element of ASP.NET Core that makes programming page-focused scenarios more productive. As you know from our previous section when you work with the MVC  framework , the controller classes are filled with a large amount of actions. And not only that, but they also grow as the new things are added. With Razor pages, each web page becomes self-contained with its View (.cshtml Razor file) component and a .cshtml code behind file.

  • Provides support for popular Javascript frameworks.

    NET core framework provides build-in templates for two of the most popular frameworks, Angular and React.

  • Improved Collaboration and Cross - Platform support. This means the apps built using this framework can run on Windows, Linux, and Mac operating systems.

• Look at the key advantages of Using Razor Pages

  • Razor pages are better organized. Files are basically more organized. You have a Razor View and the entire code behind file, the same way the old ASP.NET Webforms did.

  • Single Responsibility. In Razor Pages, each app page is self contained with its own view and code organized together, which is less complex than MVC

  • ASP.NET is a Modular Web Framework. Everything is managed using the NuGet package, which means it is easier than MVC to upgrade the existing  framework without releasing new .Net Framework versions every time new things are added.

    
    

     

In this Lecture we will

• Create our first Razor Pages web app (RaptorsCoreRazor/RaptorsCoreRazorNET7)

  • From the Visual Studio File menu, select New -> Project

  • Create a new ASP.NET Core Web Application and select Next

  • Name the project RaptorsCoreRazor

  • Select ASP.NET Core 6/7/8 in the dropdown Web Application and then select Create.

• Run the app

• Examine the project files

  • Let's focus on the the Pages folder

  • This folder contains Razor pages and supporting files

  • Each Razor page is a pair of files

    • A .cshtml file that contains HTML markup with C# code using Razor syntax.

    • A .cshtml.cs file that contains C# code that handles page events.

  • Supporting files have names that begin with an underscore.

    • _Layout.cshtml configures UI elements common to all pages. This file sets up the navigation menu at the top of the page

  • wwwroot folder

    • Contains static files such as the HTML files, JavaScript files and CSS files.

  • appSettings.json

    • Contains configuration data such as connection strings.

  • Program.cs

    • Contains the entry point for the program.

  • Startup.cs

    • Contains code that configures app behavior such as whether it requires consent for cookies.

      
      

In this Lecture we will

• Add a data model

  • we add a class for managing basketball player info in a database.

  • these classes are used with Entity Framework Core to work with a database

  • first we add a folder called Models

  • then we right click the Models folder ... Select Add -> Class and name the class Raptor

  • add the following properties to this new class
    public class Raptor

        {

            //ID field is required by the database for the primary key

            public int Id { get; set; }

            public int PlayerNum { get; set; }

            public string PlayerName { get; set; }

            public string PlayerPosition { get; set; }

            public string PlayerHeight { get; set; }

            public double PlayerSalary { get; set; }

        }

  • recall the ID field is required by the database for the primary key

• Scaffold the Raptor model

  • the scaffolding tool produces pages for Create, Read, Update and Delete (CRUD) operations for the Raptor model

  • create a Pages/Raptors folder

  • right click on the Pages/Raptors folder ... Add -> New Scaffolded Item

  • in the Add Scaffold dialog select Razor Pages using Entity Framework (CRUD) -> Add

  • complete the Add Razor Pages using Entity Framework (CRUD) dialog

    • in the Model class drop down select Raptor (RaptorsCoreRazor.Models)

    • in the Data context class row, select the + sign and accept the generated name

    • select Add

  • The appsettings.json file is updated with the connection string used to connect to a local database

  • the scaffold process creates and updates the following files

    • Pages/Raptors: Create, Delete,Details,Edit and Index

    • Data/RaptorsCoreRazorContext.cs

    • Startup.cs is updated

• Perform the initial migration

  • In this section the Package Manager Console is used to

    • add an initial migration

    • update the database with the initial migration

  • From the Tools menu, select NuGet Package Manager -> Package Manager Console

    • in the PMC enter ther following command
      Add-Migration Initial
      Update-Database

• Test the app

  • run the app and append /Raptors to the URL in the browser

  • test out the Create link

  • test out the Edit,Details and Delete links
    

In this Lecture we will

• First we examine the Pages/Raptors/Index.cshtml.cs page
  public class IndexModel : PageModel

      {

          private readonly RaptorsCoreRazor.Models.RaptorsCoreRazorContext _context;

  
  

          public IndexModel(RaptorsCoreRazor.Models.RaptorsCoreRazorContext context)

          {

              _context = context;

          }

  
  

          public IList<Raptor> Raptor { get;set; }

  
  

          //When a request is made for this page the OnGetAsync method returns

          //a list of players to the Razor page.

          public async Task OnGetAsync()

          {

              Raptor = await _context.Raptor.ToListAsync();

          }

      }
  
  ... and the associated Razor Page
  
  @page

  @*The @page Razor directive makes the file into an MVC action

      which means that it can handle requests.

      @page must be the first Razor directive on a page*@

  @model RaptorsCoreRazor.Pages.Raptors.IndexModel

  @*The @model directive specifies the type ofmodel passed to the Razor

      page.*@

  
  

  @{

      ViewData["Title"] = "Index";

  }

  
  

  @*You add objects into the ViewData Dictionary using a key/value pattern

      In the preceding sample the Title property is added to the ViewData dictionary

      The Title property is used in the Pages/Shared/_Layout.cshtml file*@

  
  

  <h1>Index</h1>

  
  

  <p>

      <a asp-page="Create">Create New</a>

  </p>

  <table class="table">

      <thead>

          <tr>

              <th>

                  @Html.DisplayNameFor(model => model.Raptor[0].PlayerNum)

              </th>

              <th>

                  @Html.DisplayNameFor(model => model.Raptor[0].PlayerName)

              </th>

              <th>

                  @Html.DisplayNameFor(model => model.Raptor[0].PlayerPosition)

              </th>

              <th>

                  @Html.DisplayNameFor(model => model.Raptor[0].PlayerHeight)

              </th>

              <th>

                  @Html.DisplayNameFor(model => model.Raptor[0].PlayerSalary)

              </th>

              <th></th>

          </tr>

      </thead>

      <tbody>

  @foreach (var item in Model.Raptor) {

          <tr>

              <td>

                  @Html.DisplayFor(modelItem => item.PlayerNum)

              </td>

              <td>

                  @Html.DisplayFor(modelItem => item.PlayerName)

              </td>

              <td>

                  @Html.DisplayFor(modelItem => item.PlayerPosition)

              </td>

              <td>

                  @Html.DisplayFor(modelItem => item.PlayerHeight)

              </td>

              <td>

                  @Html.DisplayFor(modelItem => item.PlayerSalary)

              </td>

              <td>

                  <a asp-page="./Edit" asp-route-id="@item.Id">Edit</a> |

                  <a asp-page="./Details" asp-route-id="@item.Id">Details</a> |

                  <a asp-page="./Delete" asp-route-id="@item.Id">Delete</a>

              </td>

          </tr>

  }

      </tbody>

  </table>

• Next we take a deeper look at the layout page

  • Click each of the links in the Index page including Home and Privacy. Each page show the same menu layout. The menu layout is implemented in the Pages/Shared/_Layout.cshtml file.

  • this layout template allows you to specify the HTML container layout of your site in one place and then apply it across multiple pages in your site.

  • find the @RenderBody() line. RenderBody is a placeholder where all the page-specific views you create show up wrapped in the layout page.

  • Let's update a few items in the layout

    • change the <title> element to display "Toronto Raptors"

    • update the following anchor element
      <a class="navbar-brand" asp-area="" asp-page="/Raptors/Index">Player Info</a>

    • Save your changes and test the app by clicking on Player Info

In this Lecture we will

• Learn to access the SQL Server Express LocalDB

  • LocalDB is a lightweight version of the SQL Server Express database engine that's targeted for program development.

  • From the View menu open SQL Server Object Explorer

  • Click inside the LocalDB folder and then the Databases folder and find the MVCBasketballContext folder

  • Open up the Tables folder and then right click on dbo.Raptors and select View Designer

  • Note the key icon next to ID. By default, EF creates a property names ID for the primary key.

  • Right click dbo.Raptors again and select View Data (clear out all the data)

• Learn how to initially seed the database

  • First we create a new class named SeedData in the Models folder with the following code:
    
    public static void Initialize(IServiceProvider serviceProvider)

            {

                using (var context = new RaptorsCoreRazorContext(

                    serviceProvider.GetRequiredService<

                        DbContextOptions<RaptorsCoreRazorContext>>()))

                {

    
    

                    // Look for any player info

                    if (context.Raptor.Any())

                    {

                        return;   // DB has been seeded

                    }

    
    

    
    

    
    

                    context.Raptor.AddRange(

                            new Raptor

                            {

                                PlayerNum = 9,

                                PlayerName = "Serge Ibaka",

                                PlayerPosition = "Forward",

                                PlayerHeight = "7-0",

                                PlayerSalary = 22271604

                            },

    
    

                            new Raptor

                            {

                                PlayerNum = 33,

                                PlayerName = "Marc Gasol",

                                PlayerPosition = "Centre",

                                PlayerHeight = "6-11",

                                PlayerSalary = 25595700

                            },

    
    

                            new Raptor

                            {

                                PlayerNum = 7,

                                PlayerName = "Kyle Lowry",

                                PlayerPosition = "Guard",

                                PlayerHeight = "6-0",

                                PlayerSalary = 34996296

                            },

    
    

                            new Raptor

                            {

                                PlayerNum = 43,

                                PlayerName = "Pascal Siakam",

                                PlayerPosition = "Forward",

                                PlayerHeight = "6-9",

                                PlayerSalary = 2351839

                            },

    
    

                            new Raptor

                            {

                                PlayerNum = 23,

                                PlayerName = "Fred VanVleet",

                                PlayerPosition = "Guard",

                                PlayerHeight = "6-1",

                                PlayerSalary = 9346153

                            },

    
    

                            new Raptor

                            {

                                PlayerNum = 24,

                                PlayerName = "Norman Powell",

                                PlayerPosition = "Guard",

                                PlayerHeight = "6-3",

                                PlayerSalary = 10116576

                            },

    
    

                            new Raptor

                            {

                                PlayerNum = 3,

                                PlayerName = "OG Anunoby",

                                PlayerPosition = "Forward",

                                PlayerHeight = "6-7",

                                PlayerSalary = 2281800

                            }

    
    

                        );

                    context.SaveChanges();

                }

            }

  • Note: If there are any players in the DB, the seed initializer returns and no players are added.

  • Next we must add a seed initializer

    • in Program.cs we modify the Main method to do the following

    • Get a DB context instance from the dependency injection container

    • Call the seed method passing to it the context

    • Dispose the context when the seed method completes
      
      public static void Main(string[] args)

              {

                  //Here we start the process of adding the seed initializer

      
      

                  var host = CreateWebHostBuilder(args).Build();

      
      

                  using (var scope = host.Services.CreateScope())

                  {

                      var services = scope.ServiceProvider;

      
      

                      try

                      {

                          var context = services.GetRequiredService<RaptorsCoreRazorContext>();

                          context.Database.Migrate();

                          SeedData.Initialize(services);

                      }

                      catch (Exception ex)

                      {

                          var logger = services.GetRequiredService<ILogger<Program>>();

                          logger.LogError(ex, "An error occurred seeding the DB.");

                      }

                  }

      
      

                  host.Run();

              }

• Test the app

  
  

In this Lecture we will

• Learn that the scaffolded Basketball app has a good start, but the presentation isn't Ideal. For instance PlayerNum should be Player Number when displayed in the label.

• Update the generated code in the Raptor.cs file
  
  public class Raptor

      {

          //ID field is required by the database for the primary key

          public int Id { get; set; }

          [Display(Name = "Player Number")]

          public int PlayerNum { get; set; }

  
  

          [Display(Name = "Player Name")]

          public string PlayerName { get; set; }

  
  

          [Display(Name = "Position ")]

          public string PlayerPosition { get; set; }

  
  

          [Display(Name = "Height")]

          public string PlayerHeight { get; set; }

  
  

          [Display(Name = "Salary")]

          [Column(TypeName = "double(18,2)")]

          public double PlayerSalary { get; set; }

      }

  • The [Column(TypeName="double(18,2)"] data annotation enables Entity Framework Core to correctly map Salary to currency in the database.

  • The Display attribute specifies what to display for the name of a field.

• Review the concept of Posting and Binding in the Pages/Raptors/Edit.cshtml.cs file

  
  public class EditModel : PageModel

      {

          private readonly RaptorsCoreRazor.Models.RaptorsCoreRazorContext _context;

  
  

          public EditModel(RaptorsCoreRazor.Models.RaptorsCoreRazorContext context)

          {

              _context = context;

          }

  
  

          [BindProperty]

          public Raptor Raptor { get; set; }

  
  

          public async Task<IActionResult> OnGetAsync(int? id)

          {

              if (id == null)

              {

                  return NotFound();

              }

  
  

              Raptor = await _context.Raptor.FirstOrDefaultAsync(m => m.Id == id);

  
  

              if (Raptor == null)

              {

                  return NotFound();

              }

              return Page();

          }

  
  

          //This code detects concurrency exceptions when the one client deletes

          //the player and the other client posts changes to the player info

          public async Task<IActionResult> OnPostAsync()

          {

              if (!ModelState.IsValid)

              {

                  return Page();

              }

  
  

              _context.Attach(Raptor).State = EntityState.Modified;

  
  

              try

              {

                  await _context.SaveChangesAsync();

              }

              catch (DbUpdateConcurrencyException)

              {

                  if (!RaptorExists(Raptor.Id))

                  {

                      return NotFound();

                  }

                  else

                  {

                      throw;

                  }

              }

  
  

              return RedirectToPage("./Index");

          }

  
  

          private bool RaptorExists(int id)

          {

              return _context.Raptor.Any(e => e.Id == id);

          }

      }

  • When an HTTP GET request is made to the Raptors/Edit page for example http://localhost:500/Raptors/Edit/2

    • The OnGetAsync method fetches the player info from the database and returns the Page method

    • The Page method renders the Pages/Raptors/Edit.cshtml Razor Page

    • The Pages/Raptors/Edit.cshtml file contains the model directive (@model RaptorsCoreRazor.Pages.Raptors.EditModel), which makes the Raptor model available on the page.

    • The Edit form is displayed with the values from the Player Info

  • When the Raptors/Edit page is posted

    • The form values on the page are bound to the Raptor property

    • The [BindProperty] attribute enables Model binding

In this Lecture we will

• Learn how to implement at search by "Position" in our Basketball web app

  • First we need to update Pages/Raptors/Index.cshtml.cs
    
    public class IndexModel : PageModel

        {

            private readonly RaptorsCoreRazor.Models.RaptorsCoreRazorContext _context;

    
    

            public IndexModel(RaptorsCoreRazor.Models.RaptorsCoreRazorContext context)

            {

                _context = context;

            }

    
    

            public IList<Raptor> Raptor { get;set; }

    
    

            //SearchString contains the text users enter into the search text box

            //[BindProperty] binds form values and query strings with the same

            //name as the property

            //SupportsGet = true is required for binding on GET requests

            [BindProperty(SupportsGet =true)]

            public string SearchString { get; set; }

                   

    
    

            //When a request is made for this page the OnGetAsync method returns

            //a list of players to the Razor page.

            public async Task OnGetAsync()

            {

                var pos = from m in _context.Raptor

                          select m;

                if (!string.IsNullOrEmpty(SearchString))

                {

                    pos = pos.Where(s => s.PlayerPosition.Contains(SearchString));

                }

               

                Raptor = await pos.ToListAsync();

            }

        }

  • Recall the s=>s.PlayerPosition.Contains() code is a Lambda Expression. Lambdas are used in method-based LINQ queries as arguments to standard query operator methods such as the Where method or Contains.

  • Also note that the Contains method is run on the database, not in the C# code.

• Test out the Search

  • Navigate to the Raptors page and append a query string such as ?searchString=guards to the URL

  • However you can't expect users to modify the URL to search for a player.

• Implement a UI component to the Razor Page for the Index so that a user can enter a search query into a text box.

  • Open the Pages/Raptors/Index.cshtml file and add the <form> markup below
    
    <p>

        <a asp-page="Create">Create New</a>

    </p>

    
    

    @*When the form is submitted, the filter string is sent to the

        Pages/Raptors/Index page via query string

        Here we are using the input tag helper with its one attribute for

        ... An expression to be evaluated against the current

        PageModel usually a PageModel property name ... SearchString*@

    <form>

        <p>

            Title: <input type="text" asp-for="SearchString" />

            <input type="submit" value="Filter" />

        </p>

    
    

    </form>

In this Lecture we will

• Learn how to add a new property called "PlayerCollege" to the Raptor model

  • First we open Models/Raptor.cs and add the PlayerCollege property
    public class Raptor

        {

            //ID field is required by the database for the primary key

            public int Id { get; set; }

            [Display(Name = "Player Number")]

            public int PlayerNum { get; set; }

    
    

            [Display(Name = "Player Name")]

            public string PlayerName { get; set; }

    
    

            [Display(Name = "Position ")]

            public string PlayerPosition { get; set; }

    
    

            [Display(Name = "Height")]

            public string PlayerHeight { get; set; }

    
    

            [Display(Name = "Salary")]

            [Column(TypeName = "double(18,2)")]

            public double PlayerSalary { get; set; }

    
    

            [Display(Name = "College")]

            public string PlayerCollege { get; set; }

        }

  • Next we open Pages/Raptors/Index.cshtml and add the PlayerCollege field
    <table class="table">

        <thead>

            <tr>

                <th>

                    @Html.DisplayNameFor(model => model.Raptor[0].PlayerNum)

                </th>

                <th>

                    @Html.DisplayNameFor(model => model.Raptor[0].PlayerName)

                </th>

                <th>

                    @Html.DisplayNameFor(model => model.Raptor[0].PlayerPosition)

                </th>

                <th>

                    @Html.DisplayNameFor(model => model.Raptor[0].PlayerHeight)

                </th>

                <th>

                    @Html.DisplayNameFor(model => model.Raptor[0].PlayerSalary)

                </th>

                <th>

                    @Html.DisplayNameFor(model => model.Raptor[0].PlayerCollege)

                </th>

                <th></th>

            </tr>

        </thead>

        <tbody>

    @foreach (var item in Model.Raptor) {

            <tr>

                <td>

                    @Html.DisplayFor(modelItem => item.PlayerNum)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.PlayerName)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.PlayerPosition)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.PlayerHeight)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.PlayerSalary)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.PlayerCollege)

                </td>

                <td>

                    <a asp-page="./Edit" asp-route-id="@item.Id">Edit</a> |

                    <a asp-page="./Details" asp-route-id="@item.Id">Details</a> |

                    <a asp-page="./Delete" asp-route-id="@item.Id">Delete</a>

                </td>

                @*Tag helpers enable server-ise code to participate in creating and rendering HTML

            elements in Razor files.

            In the preceding code the AnchorTagHelper dynamically generates

            the HTML href attribute value from the Razor Page*@

            </tr>

    }

        </tbody>

    </table>

  • You will also need to update the Delete and Details , Edit and Create pages with the PlayerCollege field

• Learn that the app won't work until the DB is updated to include the new field. If run now, the app throws a SqlException

  • We will resolve this error manually

  • We will explicitly modify the schema of the existing database so that it matches the model classes. The advantage of this approach is that you keep your data.

  • Finally run the app to confirm the addition of the new field

In this Lecture we will

• Learn how to implement validation logic in the Raptor model. The validation rules are enforced any time a user creates or edits a player's info

• Learn about the DRY tenet (Don't Repeat Yourself). Razor pages encourage development where functionality is specified once, and it's reflected throughout the app.

  • The validation support provided by Razor Pages and Entity Framework is a good example of the DRY principle. Validation rules are declaratively specified in one place (in the model class) and the rules are enforced everywhere in the app.

• Add validation rules to the Raptor model

  • The DataAnnotations namespace provides a set of built-in validation attributes that are applied declaratively to a class or property. DataAnnotations also contains formatting attributes like DataType that help with formatting and don't provide any validation

  • Update the Raptor class to take advantage of the some the built-in validation attributes.
    public class Raptor

        {

            //ID field is required by the database for the primary key

            public int Id { get; set; }

    
    

            [Range(1, 100)]   //between 1 and 100

            [Required]       //must have a value

            [Display(Name = "Player Number")]

            public int PlayerNum { get; set; }

    
    

            [StringLength(60, MinimumLength = 3)] //maximum and minimum length of string

            [Required]

            [Display(Name = "Player Name")]

            public string PlayerName { get; set; }

    
    

            [Display(Name = "Position ")]

            [StringLength(60, MinimumLength = 3)]

            [Required]

            public string PlayerPosition { get; set; }

    
    

            [Display(Name = "Height")]

            [Required]

            public string PlayerHeight { get; set; }

    
    

            [Display(Name = "Salary")]

            [Range(1, 100000000)]

            [DataType(DataType.Currency)]   //lots of other DataType attributes available

            [Required]

            public double PlayerSalary { get; set; }

    
    

            [Display(Name = "College")]

            [StringLength(60, MinimumLength = 3)]

            public string PlayerCollege { get; set; }

        }

    • Note: the DataType attributes do not provide any validation
      

  • Run the app , navigate to the Raptors page. Select ... Create New link. Complete the form with some invalid values. When jQuery client side validation detects the error, it displays an error message.

    • Notice how the form has automatically rendered a validation error message in each field containing an invalid value. The errors are enforced both client-side (using JavaScript and jQuery) and server-side (when a user has JavaScript disabled).

    • A significant benefit is that no code changes were necessary in the Create or Edit pages. Once DataAnnotations were applied to the model, the validation UI was enabled. The Razor Pages created in this tutorial automatically picked up the validation rules (using validation attributes on the properties of the Raptor model class). Test validation using the Edit page, the same validation is applied.

    • The form data isn't posted to the server until there are no client-side validation errors.

In this Lecture we will

• Discuss your next steps

In this Lecture we will

• Learn how we develop web applications today

• Discuss how we can use C# for both server-side and client side developement

  • Discuss how Blazor is a feature of ASP.NET for building interactive web UIs using C# instead of JavaScript.

  • Blazor is a framework that adds client-side interactivity to web applications with .NET. In Blazor, developers use C# codes and Razor syntaxes to create client-side features without the need to use JavaScript at all. This is a big plus point for developers who do not know JavaScript.

  • Blazor embraces the Single Page Application (SPA) architecture which rewrites the same page dynamically over a persistent HTTP connection (SignalR) maintained with the Server.

  • There is no page reload when the Blazor code communicates with the server. Everything is done asynchronously just like AJAX.

• Discuss how a browser can execute C# code using WebAssembly

• Recap the  different run-time modes Server Side and Client Side Blazor (WebAssembly)

In this Lecture we will

• Take a deeper look at how Blazor offers 2 hosting models Blazor WebAssembly and Blazor Server

  • The WebAssembly Hosting Model

    • Benefits

    • Downsides

  • The Blazor Server hosting Model

    • Benefits

    • Downsides

• Create the default Blazor Server and WebAssembly applications

In this Lecture we will

• Highlight the differences and similarities between the Blazor Server project structure and the WebAssembly project structure

  • program.cs

  • wwwroot

  • app.razor

  • Pages folder

  • Shared folder

  • MainLayout.razor

  • NavMenu.razor

  • _Import.razor

  • wwwroot/index.html (WebAssembly)

  • startup.cs (Server)

  • pages/_Host.cshtml (Server)

  • Data folder (Server)

  • appsettings.json (Server)

• Blazor is known as a SPA framework

  • The term Single-Page Application (SPA) seems a bit weird when you open the app and start navigating from one page to another. However, technically SPAs consist of a single HTML page and Blazor or any other JavaScript framework (ReactJS, Angular, etc.) dynamically updates the content of that page. As you have seen, in the wwwroot folder, there is only one HTML page in our whole application, called index.html.

In this Lecture we will

• Learn to re-use and edit a Blazor component

  • Component files have the extension .razor and must start with a capital letter

  • Razor files are a combination of HTML markup defining the user interface and the C# code defining the processing logic ... not two separate files as we have learned with Razor pages

  • ComponentsIntroPart1 (Blazor Server App)

    • @page "/counter"

      
      

      @*One way to have the Counter component rendered is by navigating to /counter

          in the browser. This path is specified by the @page  directive at the top

          of the component.   

      
      

      <h1>Counter</h1>

      
      

      <p>Current count: @currentCount</p>

      
      

      <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

      
      

      @code {

          private int currentCount = 0;

      
      

          private void IncrementCount()

          {

              currentCount++;

          }

      }

  • ComponentsIntroPart2 (Blazor Server App)

    • Here we reference the Counter component in the Index.razor page
      @page "/"

      
      

      <h1>Hello, world!</h1>

      Welcome to your new app.

      
      

      @*Here we are nesting the Counter component*@

      <Counter />

      <Counter />
      

      <SurveyPrompt Title="How is Blazor working for you?" />

• Learn to create and implement a simple component

  • ComponentsIntroPart3 (Blazor Server App)

    • @page "/componentexample"

      
      

      <h3 style="background-color:goldenrod">This is my first Component Example</h3>

      
      

      @code {

      
      

      }

In this Lecture we will

• Look at how to split a razor component into two files with the HTML in one file and the C# code in a separate file

• Discuss  how this technique is good practice from a maintenance and unit testing standpoint

  • SplitComponents

    • Counter.razor
      @page "/counter"

          A component is a combination of HTML markup and C# code in one file

          These can also be separate files ... partial files*@

      
      

      <h1>Counter</h1>

      
      

      @*Adding a style and a reference to the fontFamily variable   *@

      <p style="font-family:@fontFamily ">Current count: @currentCount</p>

      
      

      <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

    • Counter.razor.cs
      namespace ComponentsIntroPart1.Pages

      {

      
      

          //class changed to partial class

          //file has same name but .cs after .razor

      
      

          public partial class Counter

          {

             

              private int currentCount = 0;

              private string fontFamily = "Verdana";

      
      

              private void IncrementCount()

              {

                  currentCount++;

              }

      }

In this Lecture we will

• Learn that while ASP.NET Web Forms and Blazor have many similar concepts there are differences in how they work

• Examine the inner workings and architectures of ASP.NET Web Forms and Blazor

  • ASP.NET Web Forms

    • page-centric

    • pages consist of HTML, C#, Code behind class containing logic and event handling and controls

    • pages are files that end with .aspx containing markup, controls and some code

    • code behind classes are in files with the same base name and .asps.cs extension

    • controls on a page typically post-back to the same page that presented the control and carry along with them a payload from a hidden form field called ViewState.

  • Blazor

    • client side web UI framework similar in nature to Javascript front-end frameworks like Angular or React

    • handles user interactions and renders the necessary UI updates

    • apps consist of one or more components that are rendered on an HTML page

    • components are .NET classes that represent a reusable piece of UI.

    • each component maintains its own state and specifies its own rendering logic

    • after a component handles an event, Blazor renders the component and keeps track of what changed in the rendered output.

    • the components don't render directly to the DOM. They instead render to an in-memory representation of the DOM called a RenderTree so that Blazor can track the changes.

    • Blazor compares the newly rendered output with the previous output to calculate a UI diff that it then applies to the DOM

In this Lecture we will

• Learn that Blazor components can pass values to other components using parameters

• Learn that component parameters are defined using the [Parameter] attribute

• Discuss the use of parameters in the Blazor default app

  • ParametersIntroPart1SeeIndexSurvey

• Create a simple implementation of parameters

  • ParametersIntroPart2

    • Create a razor component ParameterExampleComponent.razor
      <h3>Parameter Example Component</h3>

      
      

      <h5 style="color:red">@Title</h5>

      
      

      @*Razor components can pass values to other components using

          parameters (we are going to call/implement  this component in index.razor)

          Component parameters are defined using the [Parameter] attribute

          which must be declared as public*@

      
      

      @code {

      
      

          [Parameter]

          public string Title { get; set; }
          //Here we are using an auto-implemented property

      }

    • Then implement the parameter in Index.razor
      @page "/"

      
      <h1>Hello, world!</h1>

      Welcome to your new app.

      
      

      @*Here we are nesting the Counter component*@

      <Counter />

      <Counter />

      
      

      <SurveyPrompt Title="How is Blazor working for you?" />

      
      

      <ParameterExampleComponent Title="Passed from Parent" />

  • ParametersIntroPart3 (Implementing OnParametersSet() )

    • We will implement a parameter in the Counter page and then refer to it in the Index page ... <Counter Increment="10" />

      • We will add a parameter to specify the increment used by the IncrementCount() method
        @code {

            private int currentCount = 0;

            private string fontFamily = "Verdana";

        
        

            //new variable which will allow us to increment by any amount via a parameter ...

            //if no value is specified (null) it will default to 1

            private int increment = 1;

        
        

            [Parameter]

             public int? Increment {get;set;}

            //? is shorthand for Nullable<int> (a nullable type) ...this allows you to have nullables for Increment parameter

        
        

            //Now need a way to get Increment (public) coming in from the 'outside' ie. <Counter Increment="10" />

            //Into our private variable increment

            protected override void OnParametersSet()

            {

               if (Increment.HasValue)

                {

                    increment = Increment.Value;   

                }

            }

        
        

            private void IncrementCount()

            {

                //currentCount++;

                //now we can go up by whatever we want ... or the default 1

                currentCount += increment;

            }

        }
        

        
        

• Learn that so far we’ve seen how to link a static URL to a Blazor component. Static URLs are only useful for static content, if we want the same component to render different views based on information in the URL (such as a customer id) then we need to use route parameters. (RouteParameters)

  • A route parameter is defined in the URL by wrapping its name in a pair of { braces }  when adding a component’s @page declaration.

    • @page "/routepage/{CustomerId?}"

    • The “?” at the end of route parameter specifies that the parameter accepts null value. This is the case when no value is passed for the route parameter

    • @page "/routepage/{CustomerId?}"

      
      

      <h3>Route Parameters Example</h3>

      
      

      @if (string.IsNullOrEmpty(CustomerId))

      {

          <h4>No customer entered</h4>

      }

      else

      {

          <h4 class="bg-info text-white">Hello customer @CustomerId</h4>

      }

      
      

      @code {

      
      

          [Parameter]

          public string CustomerId { get; set; }

      
      

      }

    • To test out ...

          1) Run app and just click on Route Parameters link in the NavMenu first ... then

          2) Run app and hand type url routepage/2345

• Supplementary Demos

  • BookAppClassParameterLect90

    • This is a simple implementation of Components with Parameters where the BookCard Component is used to display the details of a Book Object (an instance of the Book class ... located in the Models folder).

In this Lecture we will

• Learn that binding data is a fundamental task in single page applications. At some point every application needs to either display data (eg labels) or receive data (eg. forms)

• Learn about the two types of binding

  • One Way ... means that updates to the value only flow one way, for instance rendering a label... the user will never be able to modify the value directly. So you set or alter a value in one part of your code and have it display in another part of your code.

  • Two Way ... means bindings have a bidirectional flow... ie they allow values to be updated from two directions ... the primary use for two way binding is in forms

• Create a simple application which illustrates One and Two Way Binding

  • DataBindingIntro

    • @page "/OneWayBinding"

      
      

      <h3>@Title</h3>

      
      

      @code {

          string Title = "This is a simple One Way Binding";

      }

    • @page "/TwoWayBinding"

      
      

      <h3>Two Way Binding</h3>

      
      

      @*When we run the app initially and navigate to this

          page we see the SliderValue set to zero using

          one way binding*@

      <p> Slider Value: <b>@SliderValue</b> </p>

      
      

      @*Here we add a slider control that is bound to the

          SliderValue variable

          This time we are using the @bind-value attribute and

          an event parameter oninput to activate two-way binding

          When we move the slider the SliderValue variable is

          updated immediately and displayed

          When we manipulate a variable property through

          the UI control we are implementing two way binding

          because the consumer is updating the source*@

      <input type="range" step="1"

             @bind-value="SliderValue"

             @bind-value:event="oninput" />

      
      

      @code {

          int SliderValue = 0;

      }

• Supplementary Demo

  • DataBindIntroExtraExNET6

    • incorporates a class called DemoProduct

    • incorporates a checkbox
      <input type="checkbox" @bind-value="@Product.IsActive" checked="@(Product.IsActive? "checked":null)" />

In this Lecture we will

• Create a simple Blazor application to demonstrate One Way and Two Way Binding

  • Colours (WebAssembly App)

    • Incorporates ... loops (foreach), if statements, C# Lists,Bootstrap classes
      
      @page "/oneway"

      
      

      @*One way binding is used for printing values in your views

          These values could be strings such as a title in a

          <h1> tag like below or items in a list.

          But it can also be used to dynamically inject values into the

          HMTL such as the name of a CSS class on an element*@

      
      

      <h1>@Title</h1>

      
      

      Welcome to my one-way binding example. Here's a list of colours.

      
      

      <ul>

          @foreach (var colour in Colours)

          {

              <li>@colour</li>

          }

      </ul>

      
      

      @if (DateTime.Now.DayOfWeek==DayOfWeek.Saturday || DateTime.Now.DayOfWeek==DayOfWeek.Sunday)

      {

          <p class="@weekendFontStyle"> It's the Weekend</p>

      }

      else

      {

          <p> It's @DateTime.Now.DayOfWeek.ToString()</p>

      }

      
      

      
      

      @code {

      
      

          string Title  = "Welcome to one-way binding";

         

          List<string> Colours  = new List<string>    {

              "Red","Blue","Green","Yellow"

          };

      
      

          string weekendFontStyle = "alert-warning";

      }
      
      @page "/twoway"

      
      

      @*With one way binding you now know how to print out values

          to a view, but what if you would like a user to be able

          to update those values? This is where two-way binding comes in

         

          Blazor uses a directive called bind to achieve this*@

      
      

      <h1>Record your current favourite colour</h1>

      
      

      <p>

          <input @bind="Name"

                 @bind:event="oninput"/>

      </p>

      
      

      <p>

          <select @bind="FavouriteColour">

      
      

              <option>Red</option>

              <option>Blue</option>

              <option>Green</option>

              <option>Yellow</option>

      
      

          </select>

      </p>

      
      

      
      

      <p>Hi @Name</p>

      <p>Your favourite colour is @FavouriteColour </p>

      
      

      @code {

      
      

          public string Name { get; set; }

         

          public string FavouriteColour { get; set; }

      
      

         

      }

• Offer you an Exercise to review and extend your skills

  • DataBindingPart2Exercise/DataBindingPart2ExerciseSolution

    • Implements Lists, DropDownLists, and Bootstrap classes

• Supplementary Demo

  • Lecture92ExtraExampleOneVsTwoWayBind

    • clearly demos difference between one and two way binding

In this Lecture we will

• Create another Blazor application to  further demonstrate One Way and Two Way Binding

  • UnitsConverter (WebAssembly App)

    • Before Binding ... using html input value property and the onchange event
      
      @page "/OneWayBindingConverter"

      
      

      <h3>Converting Inches to Centimeters</h3>

      
      

      @*One Way Binding with an Event*@

      
      

      @*initial simple interface without event handler

          <input value=@inches type="number" />*@

      
      

      @*Here we are using the input's value property

          and manually handling the onchange event

          however there is an easier way when we look at

          two way binding*@

      
      

      <input value="@inches"

             @onchange="UpdateValue"

             type="number" />

      
      

      <p>The value of inches is : @inches</p>

      
      

      @code {

      
      

          double inches = 1;//default value;

      
      

          void UpdateValue(ChangeEventArgs e)

          {

              double val = 0;//Failing to parse will set to 0

              double.TryParse(e.Value.ToString(), out val);

              inches = val;

          }

      }

    • With Two Way Binding ... binding uses the onchange event by default but  in this implementation we use the oninput bind event which occurs immediately as we type and also incorporate Properties to perform the actual conversions
      
      <h4>Advanced Two-Way Binding using oninput</h4>

      <label>Inches</label>

      <input type="number" @bind="Inches"

                           @bind:event="oninput"/>

      <span>=</span>

      <input type="number" @bind="Centimeters"

                           @bind:event="oninput"/>

      <label>Centimeters</label>

      
      

      @code {

      
      

          double inches = 1;//default value

          double centimeters = 2.54;//default value

      
      

          //We are going to add properties called Inches and Centimeters

      
      

          public double Inches

          {

              //get => inches;

              get

              {

                  return inches;

              }

              set

              {

                  centimeters = value * 2.54;//both inches and

                  inches = value;            //centimeters are updated

              }

              //when the values are updated by the set method

              //data binding will ensure the changes are reflected

              //in the UI

          }

      
      

          public double Centimeters

          {

              //get => centimeters;

              get

              {

                  return centimeters;

              }

              set

              {

                  inches = value / 2.54;

                  centimeters = value;

              }

          }

• Offer you the challenge of the Currency Exchange Problem (CurrencyExchange)

• Offer you the challenge of the Birthday Problem (BirthdayProblem)

  • Note use of DateTime.TryParse(DateOfBirth, out var date)

  • DayOfWeek = date.DayOfWeek.ToString()

• Supplementary Demos

  • MoreDataBinding

    • Focus on the Counter page where we alternate the colour of the number being updated between red and yellow.

    • Note the use of a style classes ... stored in app.css in wwwroot folder
      .red-background {

          background:red;

          color:white;

      }

      
      

      .yellow-background {

          background:yellow;

          color:black;

      }

    • Note the use of the ternary operator in the IncrementCount() method to toggle back and forth between the red and yellow backgrounds

    • Notice how we disable the Click Me button when the currentCount goes over 10

  • MoreDataBindingKeypress

    • Here we react to the keypress event connecting to the KeyHandler method where pressing + and - will increment and decrement the value in the input ... but initially you will also see the key you just pressed (ie +)  added to the input html element because this is the  default behavior. To stop this default behavior we add preventDefault
      
      <input type="number" @bind="@increment"

      @onkeypress="KeyHandler"

      @onkeypress:preventDefault="true"/>

      @increment
      
      @code {
      private void KeyHandler (KeyboardEventArgs e)

      {

          if (e.Key=="+")

          {

              increment += 1;

          }

          if (e.Key=="-")

          {

              increment -= 1;

          }

      }
      }

  • BindTimeFormatsCultureSpecific

    • The value of the DateTime can be formatted according to your needs. 
      
      <input type="text" class="form-control" @bind="BirthDate" @bind:format="yyyy-MM-dd"/>
      

    • The values of the DateTime can be shown in a culture specific format
      
      @using System.Globalization

      @*necessary for CultureInfo reference in code section*@

      
      @*In the next code I am specifying the culture through @bind:culture attribute.

          There are 2 text boxes that show appointment times in fr-FR (French)  and en-gb (Great Britian) cultures*@

      
      

      <input type="text" class="form-control" @bind="ApptTime" @bind:format="MMM-dd" @bind:culture="CultureGB" />

      <input type="text" class="form-control" @bind="ApptTime" @bind:format="MMM-dd" @bind:culture="CultureFR" />

      
      @code {

      
      

          private DateTime BirthDate = new DateTime(1959, 5, 24);

         

          public DateTime ApptTime { get; set; } = DateTime.Parse("1959/04/24");

      
      

          public CultureInfo CultureGB { get; set; } = CultureInfo.GetCultureInfo("en-GB");

          public CultureInfo CultureFR { get; set; } = CultureInfo.GetCultureInfo("fr-FR");

      
      

          //Go here for more info on CultureInfo

          //https://csharp.net-tutorials.com/working-with-culture-and-regions/the-cultureinfo-class/

      
      

      }

      
      

In this Lecture we will

• Learn to implement State Management in Blazor

  • State Management refers to the technique that you use to persist data between Blazor pages. Without state management this data would be lost.

  • First we look at the issue ... state is not maintained

    • we use the default server-side Blazor app and add the Counter component to the Index page

    • BlazorStateManagePt1

  • We introduce a CounterState class with a public counter to implement state management

    • Here we use Dependency Injection which is the best way to pass data between Blazor pages .

    • We register a singleton service and inject it as a dependency onto the pages or components that need it.

      • CounterState.cs
        public class CounterState

        {

            public int CurrentCount { get; set; }

        }

      • BlazorStateManagePt2  (Pre .NET 6)

        • Startup.cs

        • services.AddScoped<CounterState>();

      • BlazorStateManagePt2net6 (.NET 6 +)

        • Program.cs

        • builder.Services.AddSingleton<CounterState>();

      • BlazorStateManagePt2net6Updated
        
        @page "/counter"

        @inject BlazorStateManagePt2net6.SessionState.CounterState CounterState

        
        

        <PageTitle>Counter</PageTitle>

        
        

        <h1>Counter</h1>

        
        

        @*State Management update*@

        <p>Current count: @CounterState.CurrentCount</p>

        <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

        
        

        @code { 

        
        

            private void IncrementCount()

            {

                //Session State object
                CounterState.CurrentCount++;       

            }

        }

  • Supplementary Demo

    • DependencyInjectionIntroWASM1

      • This application serves as a Review of some of the State Management skills covered in Lecture 94

        • State Management is one of the much needed features in modern web apps ... recall the issue when we move between various pages (ie Counter page) ... we don't want to lose values of fields and properties '

        • With State Management the data is managed in the browser using an in memory state container service and frequent postbacks to the server can be avoided.

        • The best way to pass data between Blazor pages is by registering a singleton service and injecting it as a dependency onto the pages or components that need it. In this demo, we create a C# class, register it as a service in your Blazor app, inject an instance of the service onto your pages, and use the service to share data across Blazor components.

        • This technique you learn in this demo will allow you to pass parameters from one Blazor component to another, even if those components are on different pages. This is not only important for keeping your C# code clean, but it is also ensures the end user has a consistent experience across all pages of your site. Moreover, using a service class enables you to you to pass data in a way that does not require the use of routing parameters.

        The Steps

        • Initial Setup ... Create a folder called Services and add a new C# class called AppData.cs (public int Age) Initial Setup ... In the Pages folder create a new Razor Components called Page1.razor and Page2.razor

        • Our objective is to create a simple Web App where you set the value of a property on one page and another page will be aware of the value

        • Next we must register our AppData.cs class as a Service by adding a reference to it in the Program.cs file... builder.Services.AddSingleton();

        • Here we have added the AppData class (from the Services folder) with a Singleton lifetime. Singleton is perfect for a client side Blazor app, but if you are working with Server-Side Blazor you will want to register as a Scoped service so each different user receives his/her own instance of the service for the duration of their session.

        • A Singleton allows the same instance of a service class to be shared across components. This is good, because you want to be sure all your pages receive the same instance of the AppData service class. This will ensure that the data (namely Age, in this example) is correctly shared between pages throughout the lifetime of the application.

        • We use two pages (Page1/Page2) for our demo. We inject the singleton instance of the AppData service into both pages. Note the UI is refreshed when the bind:event is raised.

        
        

In this Lecture we will

• Revisit creating components and how to pass parameters to them

  • Products1
    
    Index.razor
    
    @page "/"

    
    

    @*original content removed and replaced by

        reference to newly created razor component called Home

       

        <Home></Home>

       

         ... then further modified with a parameter *@

    
    

    <Home Title="Welcome to the Products Page"></Home>
    
    Home.razor
    
    @page "/home"

    
    

    <div style="text-align:center">

    
    

        <h1>

            @*Welcome to the Products Page

                replaced by parameter variable below*@

           

            @*Here we are using one-way binding to bind the

                value from the Title property from the code section

                below*@

            @Title

        </h1>

        <p>

            Feel free to browse

        </p>

        <p>

            <img src="images/krispies.jpeg" width="300" height="400" class="img-fluid" />

        </p>

    
    

    </div>

    
    

    @code {

    
    

        //If we want to mark any property as a component parameter

        //we have to decorate it with the [Parameter] attribute

        //This allows us to create reusable components that accept

        //different parameters and show content based on those parameters

        [Parameter]

        public string Title { get; set; }

    
    

    }

    
    

• Learn that in addition to sending parameters to the component we can send content as well. This is very useful when we have  HTML markup that we want to use inside the component. We do this by using a RenderFragment parameter. It is a bad solution trying to send HTML code through the regular parameters to the component because it would be hard to maintain and it is not easily readable.

  • Products2

    • Review how to separate our main razor file (Home) into two separate (but still connected) files by creating a Partial class

    • Implement the RenderFragment inside the Partial class

      • [Parameter]

                public RenderFragment BrowseContent { get; set; }

    • Then we modify the Home component file
      @page "/home"

      
      

      <div style="text-align:center">

      
      

          <h1>

              @Title

          </h1>

          <p>

              @*Feel free to browse ...

                  has been replaced by the newly created property*@

              @BrowseContent

          </p>

          <p>

              <img src="images/krispies.jpeg" width="300" height="400" class="img-fluid" />

          </p>

      
      

      </div>

    • And finally we modify the Index file
      @page "/"

      
      

      <Home Title="Welcome to the Products Page">

         

          @*Here we explicitly specify the name of the

              RenderFragment property*@

          <BrowseContent>

              <b>Feel free to browse</b>

          </BrowseContent>

      </Home>

• Supplementary Demos

  • MoreComponentsAndParameters

    • uses a boolean Parameter  to hide or show a RenderFragment Parameter (a button on the Index page toggles the ChildContents on and off)

      • Alert.razor
        
        @if(Show)

        {

        <div class="alert alert-secondary mt-4" role="alert">

           @ChildContent

            </div>

        }

        
        

        @code{

        
        

        [Parameter]

        public bool Show { get; set; }

        
        

        @* The ChildContent can hold complex content (HTML markup for instance)

        and therefore needs to be of type RenderFragment *@

        [Parameter]

        public RenderFragment ChildContent { get; set; }

        
        

        }

      • Index.razor
        
        @page "/"

        
        

        @* Quick simple review of the use of a RenderFragment Parameter *@

        
        

        <Alert Show="@ShowAlert">

        <ChildContent>

        <span class="oi-check mr-2" aria-hidden="true"></span>

        <strong>Blazor Components and RenderFragment Example</strong>

        </ChildContent>

        
        

        </Alert>

        
        

        <button @onclick="ToggleAlert">Toggle</button>

        
        

        @code {

        
        

        public bool ShowAlert { get; set; } = true;

        
        

        public void ToggleAlert()

        {

        ShowAlert = !ShowAlert;

        }

        
        

        }

  • Lecture95ExtraReviewExampleDashboard (additional enrichment example ... using embedded components)

    • This application serves as a Review and Extension of some basic Blazor concepts ... including

      • Components...Components...Components

      • Bootstrap CSS ... Card class in particular (See Resource Link for more info)

      • Parameters

      • RenderFragments

      • Partial Files (Splitting Components)... localized css file

      Click on the Dashboard link on the left to try out the Application

      • Click on the App Details/Help button on the Dashboard page for more coding details and concept reviews

      • Take a deeper dive by looking through the relevant razor component pages, they are fully documented

• Provide you with some Supplementary Demos on the concept of Cascading Values and Parameters (CascadingValuesParameters ... CascadingIntro1/CascadingIntro2)

  • Cascading values and parameters provide a convenient way to flow data down a component hierarchy from an ancestor component to any number of descendent components. Unlike Component parameters, cascading values and parameters don't require an attribute assignment for each descendent component where the data is consumed.

  • CascadingIntro1

    • This application serves as an introduction to the Concept of Cascading Values and Parameters

      • One way to pass data from Parent component to child component is by using component parameters ... as we have shown in this Lecture

      • Components can also be nested. A component can be nested in another component. That component can be nested in yet another component and this can go on.

      • However, when there are several component layers in the component hierarchy, it's tedious to pass data from an ancestor component to a descendent component using component parameters. This is when we use cascading values and parameters. They provide a convenient way for an ancestor component to pass a value to all of its descendent components.

      • Blazor has a built-in component called CascadingValue. We can pass a value to this component. This value is then cascaded down its component tree to all of its descendants.

      • The child component can access the cascading value by declaring a property of the same type, decorated with the [CascadingParameter] attribute.

      • In fact, any of the descendant components in the component tree can access the cascading value. They simply have to declare a property of the same type, decorated with the [CascadingParameter] attribute.

      • Check out the ParentComponent.razor page in the Pages folder

      • Note how we have embedded the ChildComponent in the ParentComponent and how the GrandChildComponent is embedded inside the ChildComponent

      • Just like component parameters, if a cascading value is changed the change will be passed down to all descendants. And any components using the value will be updated and automatically have StateHasChanged called.
        
        @page "/parentcomponent"

        
        

        <h1 style="@Style">Parent Component Text</h1>

        
        

        <CascadingValue Value="@Style">

            <ChildComponent/>

        </CascadingValue>

        
        

        @code {

        
        

            public string Style { get; set; } = "color:red";

        
        

        }
        
        ChildComponent.razor
        
        <h3 style="@ElementStyle">Child Component</h3>

        
        

        <GrandChildComponent/>

        
        

        @code {

        
        

            //We don't need to use the same name we

            //used in the ParentComponent

            [CascadingParameter]

            public string ElementStyle{ get; set; }

        
        

        }
        
        GrandChildComponent.razor
        
        <h5 style="@ElementStyle">GrandChild Component</h5>

        
        

        @code {

        
        

            [CascadingParameter]

            public string ElementStyle { get; set; }

        
        

        }

  • CascadingIntro2

    • In this 2nd version we are implementing Multiple Cascading Parameters

      • There are two ways of a dealing with this situation

      • The first is provided by the framework and is based on types. Say we had two cascading values, one is a string and one is an int. And there is a single child component.

      • Blazor will look at the type of the parameter and try and find a cascading value which matches

      • ... But what happens if both cascading values have the same type ... See Cascading 3

      • In that situation, the framework is still going to match based on type. Except it will use the closest ancestor to the component requesting the parameter... in this case Name

      • The second, and most reliable way to identify cascading parameters is by name. When you create a cascading value you have the option to give it a name. Then when a child component wants to use it, they can ask for it by specifically.
        
        @page "/parentcomponent4"

        
        

        <h1 style="@Style">Parent Component Text ... Name=@Name</h1>

        
        

        <CascadingValue Value="@Style" Name="TeacherStyle">

        
        

            <CascadingValue Value="@Name" Name="TeacherName">

        
        

                <ChildComponent4 />

        
        

            </CascadingValue>

        
        

        </CascadingValue>

        
        

        @code {

        
        

            public string Style { get; set; } = "color:green";

            public string Name { get; set; } = "Charlie Chiarelli";

        
        

        }
        
        

        <h3 style="@ElementStyle">Child Component Text... Name = @TheName</h3>

        
        

        @code {

            [CascadingParameter (Name ="TeacherStyle")]

            public string ElementStyle { get; set; }

        
        

            [CascadingParameter(Name ="TeacherName")]

            public string TheName { get; set; }

        }