BASIC WEB DEVELOPMENT WEB DEVELOPER CAREER STARTS HERE. Jacob J. Heck HTML CSS IIS C# ASP.NET MVC MSSQL

Transcription

1 WEB DEVELOPER CAREER STARTS HERE Discover how the internet works and start creating your own custom web applications with Microsoft s Visual Studio, Internet Information Server, and SQL Server. Jacob J. Heck Senior Software Engineer and Technical Architect BASIC WEB DEVELOPMENT HTML CSS IIS C# ASP.NET MVC MSSQL

2 CONTENTS About the Author... 1 Prerequisites... 2 How the Internet Works... 2 The Client... 2 Your Web Browser... 2 The Server... 4 IIS... 4 Internal IP Address Static Internal IP Address Public IP Address The ISP Public IP Address Assignment Static IP Addresses Assignment DNS Servers Domain Name Registrars ICANN Getting the Tools Your IDE - Microsoft Visual Studio Community Creating A New Web Project Debugging Application Level Events MVC Routing Creating a Home Page Creating Multiple ActionResults Shared Layouts NuGet Packages bootstrap jquery Adding references to Javascript and CSS files MVC Razor Syntax Formatting Code Designing Views Model Binding... 74

3 About the Author 1 GET vs POST Model Validation Databases What is a Database Creating a Database Deploying a Database Accessing a Database ADO.NET Entity Framework What is ADO.NET Creating Data Model Saving Data Reading Data ABOUT THE AUTHOR I am Jacob Heck, a dynamic and motivated Senior Software Engineer with a proven track record of success in designing, implementing, integrating, testing and supporting impactful applications developed for desktop, mobile, web, and tablet devices on multiple platforms. I ve been programming since the age of twelve and my first job was working as a Tutor for the Advanced Programming course at College of the Sequoias. I ve worked at several companies after; moving to NYC to be an Application Developer where I rapidly expanded my knowledge on web applications and scalable tech environments. While in NYC I attended several Microsoft Developer Camps for Azure virtual machines and web apps. I currently work as a Senior Programmer Analyst where I create a variety of windows services, desktop applications, web APIs, and mobile handheld applications. I look forward to walking through these lessons with you and I hope to make this learning experience as painless as possible. I also hope to instill this valuable information in your mind to help you start or further you career in web development. If you have any questions please contact me. Jacob J. Heck [email protected]

4 Prerequisites 2 PREREQUISITES 1. A PC with Windows 7 or higher (all screen captures provided are taken in Windows 10) 2. Access to the Internet HOW THE INTERNET WORKS THE CLIENT YOUR WEB BROWSER Whenever you go to your PC is the client and Facebook.com is the server. Your PC tries to communicate over an internet protocol HTTP. HTTP stands for Hyper Text Transfer Protocol. The request on your PC is sent over your web browser to Facebook.com and it looks like this: GET HTTP/1.1 Host: facebook.com In which Facebook responds with a response header and response body The response header looks like this: HTTP/ Where the http status code 200 = OK If we were to go to a webpage that didn t exist the status code would be 404 ( Not Found ). The response body is HTML (Hyper Text Markup Language), you can view it by right clicking on the web page and selected View Source

5 How the Internet Works 3 The HTML will look like the following:

6 How the Internet Works 4 THE SERVER IIS You don t need a fancy server to run a website off your machine. All windows machines can have websites running on them, they just need IIS installed. IIS stands for Internet Information Services. IIS can be installed by going to add or remove programs then clicking turn windows features on or off

7 How the Internet Works 5 And then by selecting Internet Information Services in the features list and clicking OK

8 How the Internet Works 6 To see your default website that s now running on your, find IIS manager and open it

9 How the Internet Works 7 You can now see your default website in IIS installed on your machine by expanding Sites under your computer. To browse the default website, click browse.

10 How the Internet Works 8 This is what the default IIS website looks like You can see the web address is

11 How the Internet Works 9 The html file the webpage is displaying is automatically created by IIS. You can view/edit this html file here: Your IIS default website doesn t have to look in this folder for your html files for your default website, but this is where it is by default.

12 How the Internet Works 10 You can change the path it uses by clicking Basic Settings And then changing the Physical path, we won t change anything and just leave it how it is.

13 How the Internet Works 11 INTERNAL IP ADDRESS At your home you probably have several PCs connected to your router. Each machine that is connected to your router is assigned a unique internal (your router only) IP (internet protocol) address. You can see this internal IP address by opening command prompt and typing in ipconfig then pressing enter. Your IP address will be the IPv4 Address. IPv4 is the fourth version in the development of the internet protocol (IP). When you disconnect and reconnect to your home network, this IP address may change because it is dynamically assigned to your computer by your router. Your router is a DHCP server, DHCP stands for Dynamic Host Configuration Protocol. DHCP is a protocol that enables a server to automatically assign an IP address to a computer from a defined range of numbers configured for a given network. Applications use ports to allow remote PCs to communicate with your PC. For example, IIS does all of its communication through port 80 (IIS can be setup to use other ports but we ll talk about that later). So, if we were on the same network and you typed in my internal IP address and IIS port into your browser (e.g. you would be able to see my default website. All browsers use port 80 by default, so we can remove the trailing :80 and the address could just be

14 How the Internet Works 12 STATIC INTERNAL IP ADDRESS What if my computer disconnected from my router and my router assigned me a different internal IP? Web browsing connectivity to this internal IP address would no longer work. Therefore, I would need a static internal IP that does not change. Internal static IPs can be configured on your routers admin page. Every router is different but they all have the ability to save internal static IP addresses. To modify my routers static IPs, I need to go to my routers admin page. The routers admin page is usually the Default Gateway IP address located under my IPv4 address in command prompt after running ipconfig.

15 How the Internet Works 13 Now I just navigate to my default gateway and find the reserved IP addresses option

16 How the Internet Works 14 How does my router remember to assign my internal static IP addresses to my PC everytime it gets disconnected and then reconnected? By my PC s MAC address. Every PC has a different MAC address embedded into its network hardware. MAC stands for Media Access Control. PUBLIC IP ADDRESS Your public IP address is different from your internal IP address. If you go to you can see your public IP address. Every device on your network will have a different internal IP address. But, every device on your network will have the same public IP address. This is because your Public IP address is assigned to your router by your internet service provider (e.g. Comcast). Now, what if you were trying to connect to my PC s default website on your home network, not mine, so internal IPs wouldn t work? Then, you would have to connect to my public IP address. But, how would my public IP address know to route to my PC s internal IP address and not someone else s on my network? We would have to set up port forwarding on my router. I just navigate to my default gateway and find the port forwarding option. Once I find it I can set up my router to route to my internal IP address for port 80.

17 How the Internet Works 15 Now if you were to try to view my website from my public IP address, you would be routed to my PC successfully. THE ISP PUBLIC IP ADDRESS ASSIGNMENT Your ISP (internet service provider) assigns every one of their customer s routers a public IP address. If you were to disconnect your router and turn it off for a while, then reconnect, you would be assigned a new public IP address. Every ISP has a range of IP addresses they assign to their customer s routers. The same IP address cannot be assigned to two different routers at the same time. The IP addresses available for your ISP to assign is regulated by the company ICANN, that way two ISPs cannot assign the same public IP address. STATIC IP ADDRESSES ASSIGNMENT If my router disconnected and my ISP assigned me a different public IP, connection to my PC with my old public IP address would no longer work. Therefore, I would need a public static IP that does not change. Static IP s can be purchased from ISPs for a monthly fee. How does my ISP remember to assign my static IP addresses to my router in case it gets disconnected and then reconnected? By the routers MAC address. Every router has a different MAC address embedded into its hardware. DNS SERVERS Your internet service provider helps you get to the websites you want with their DNS servers. DNS stands for Domain Name System. DNS servers have long lists of domain names (e.g. google.com) that have a public IP address behind them (e.g try it out, So instead of you having to remember IP addresses, you can just remember google.com. DNS Servers are updated constantly to have consistent data with Domain Name Registrars and ICANN. DOMAIN NAME REGISTRARS Domain names are unique identification strings that represent an IP address. Domains can be purchased from Domain Name Registrars (e.g. Godaddy.com). Purchasing domains is like a lease, you have to pay $10 a year to keep the domain. Domain Name Registrars are regulated by ICANN, that way two exact domain names cannot be sold to two different customers. ICANN ICANN stands for Internet Corporation for Assigned Names and Numbers. ICANN is a nonprofit organization that is responsible for coordinating the maintenance and methodologies of several databases, with unique identifiers, related to the namespaces of the Internet - and thereby, ensuring the network's stable and secure operation. So they regulate our public IP addresses used by ISPs, and they regulate our domain names sold by Domain Name Registrars.

18 Getting the Tools 16 GETTING THE TOOLS YOUR IDE - MICROSOFT VISUAL STUDIO COMMUNITY 2015 IDE stands for integrated development environment, which is a software application that provides comprehensive facilities to computer programmers for software/website development. An IDE normally consists of a source code editor (where you write your code), build automation tools (where you compile your code and push updates to your website) and a debugger (where you can see your code run line by line). Most modern IDEs have intelligent code completion (programmers auto-complete that will help you make less typos and write code faster). Now, let s get started, download the Visual Studio Community installer from Microsoft s website.

19 Getting the Tools 17 When installing, select custom install.

20 Getting the Tools 18 Expand Windows and Web Development. Select Microsoft SQL Server Data Tools. Click Next and then click Install this may take a while. Once the install is complete, click Launch this may take a while.

21 Creating A New Web Project 19 CREATING A NEW WEB PROJECT Go to the top, click file -> new -> project

22 Creating A New Web Project 20 Select under templates -> Visual C# -> Web Type in CampusNews as the project name Uncheck Add to source control Check Create a directory for solution Change location of where it s saved to your desktop Click Ok

23 Creating A New Web Project 21 Select Empty under templates Check MVC under core references MVC stands for Model View Controller and it is the design pattern we will be using for programming the website. Click Ok

24 Creating A New Web Project 22 DEBUGGING Once the project is created, click the debug icon at the top of Visual Studio (the browser may be different on your machine, it s just the browser used to see the website being debugged) You ll see the following error message in your browser This is because we don t have any pages created yet. Go back to visual studio and click the stop debugging button at the top

25 Creating A New Web Project 23 APPLICATION LEVEL EVENTS Double click the file Global.asax You ll see the file open up in Visual Studio The Global.asax file, also known as the ASP.NET application file, is an optional file that contains code for responding to application-level events raised by ASP.NET or by HttpModules. The Global.asax file resides in the root directory of an ASP.NET-based application. The Global.asax allows you to write code that runs in response to "system level" events, such as the application starting, a session ending, an application error occurring, without having to try and implement that code into each and every page of your site. You can create it by choosing Add > New Item > Global Application Class in Visual Studio (We don t have to since it s already created). Once you've added the file, you can add code under any of the events that are listed: Application_Start Application_End Session_Start Session_End Application_BeginRequest Application_AuthenticateRequest Application_Error When you save changes to an active Global.asax file, the ASP.NET page framework detects that the file has been changed. It completes all current requests for the application, sends the Application_End event to any listeners, and restarts the application domain. In effect, this reboots the application, closing all browser sessions and flushing all state information. When the next incoming request from a browser arrives, the ASP.NET page framework reparses and recompiles the Global.asax file and raises the Application_Start event.

26 Creating A New Web Project 24 Notice that the Application_Start event has been created for us already. We can go ahead and Delete AreaRegisteration.RegisterAllAreas() because we are not using any MVC areas at the moment.

27 Creating A New Web Project 25 MVC ROUTING Double click RegisterRoutes Click F12 to navigate where the web application is registering its routes You ll see that it opens the file RouteConfig.cs that has the RegisterRoutes function RouteConfig.cs is located under the App_Start folder in the solution explorer In this file, all of the routing for the website is setup. You can see the following path is ignored

28 Creating A New Web Project 26 This path is ignored to prevent requests for the auto-generated Web resource files such as WebResource.axd or ScriptResource.axd from being passed to a controller. The other part of the code is routing all http requests to {controller}/{action}{id} With the default value of the controller = home, action = index, and id = UrlParameter.Optional

29 Creating A New Web Project 27 CREATING A HOME PAGE To create a home page, we need to create a Home controller with an action result of Index Right click the controller folder in the solution explorer -> add -> Controller

30 Creating A New Web Project 28 Select MVC controller empty Then click add Change the controller name to HomeController Then click Add

31 Creating A New Web Project 29 An action result for Index is created for you automatically Under Controllers folder in the solution explorer you will see HomeController.cs has been created And under Views folder you will see a Home folder has been created for you

32 Creating A New Web Project 30 Right click the Home folder and click add -> view

33 Creating A New Web Project 31 Change the view name to Index Uncheck use a layout page Click Add Your Index view has been created as index.cshtml under the home folder and the html is generated in the index.cshtml

34 Creating A New Web Project 32 Inside of the Index.cshtml file, add the following Hello World! in between the <div> tags Then type ctrl + s to save your changes. Now start debugging your project.

35 Creating A New Web Project 33 You now see in the web browser that the Home -> Index action result is being displayed Since in the RouteConfig.cs file the defaults are Home controller Index action, you can remove the following /Home/Index from the URL and click enter to see it load by default Stop debugging in Visual Studio

36 Creating A New Web Project 34 CREATING MULTIPLE ACTIONRESULTS Create a new Action Result in the Home controller called About

37 Creating A New Web Project 35 Add a new View called About in the Views\Home folder

38 Creating A New Web Project 36 Change the view name to About Uncheck use a layout page Click Add Inside of the Index.cshtml file, add the following <h1>about Us</h1> in between the <div> tags

39 Creating A New Web Project 37 Save your changes. Start debugging your project. See that your webpage has been created Stop debugging

40 Shared Layouts 38 SHARED LAYOUTS Notice that the following code is redundant in both the Index and About view: And This is really bad practice and we should clean this up with a shared layout.

41 Shared Layouts 39 Create a new folder in the views folder Name the folder Shared Create a new View in the Shared folder called _Layout

42 Shared Layouts 40 Delete Layout=null;

43 Shared Layouts 41 And rename the title to Campus News And then in between the <div> Save your will be where the view s HTML will be rendered.

44 Shared Layouts 42 Under the views folder, add a new view Name the view _ViewStart

45 Shared Layouts 43 Delete everything except the Layout=null Replace null with "~/Views/Shared/_Layout.cshtml" Save your changes The MVC Framework is programmed to look for a _ViewStart.cshtml file in which will execute at the start of each view's rendering. Any code contained within the code block in this file will execute before any code in the view. This helps us from having to declare the shared layout on every view that is created. Delete the excess code from the Index view so that it looks like this: Save your changes Delete the excess code from the About view so that it looks like this: Save your changes Start debugging Right click and view source

46 Shared Layouts 44 Notice that all of the html for the view is using the HTML content of the _Layout view, placing the About view HTML where RenderBody() should be

47 Shared Layouts 45 Stop debugging

48 NuGet Packages 46 NUGET PACKAGES NuGet is the package manager for the Microsoft development platform including.net. The NuGet client tools provide the ability to produce and consume packages. The NuGet Gallery is the central package repository used by all package authors and consumers. NuGet is a Visual Studio extension that allows you to search for, install, uninstall and update external references in your projects and solutions. In conclusion, you can add all types of external references that can help speed up your coding and at the same time, make sure to receive quality updates of the external references. We ll start off by adding our first NuGet package, Twitter Bootstrap. We ll install more NuGet Packages later, but right now we should get the design of the webpage to look more appealing. I ll explain Twitter Bootstrap after we install the NuGet Package.

49 NuGet Packages 47 Right click your project and click Mange Nuget Packages

50 NuGet Packages 48 The Nuget Package Manager window will open. Click the filter and select Installed These NuGet packages were added by default because they are the Core references for our basic Web Project.

51 NuGet Packages 49 Search for twitter bootstrap with filter of All Click Install

52 NuGet Packages 50 Notice that the review changes window says that it is installing jquery, Bootstrap and Twitter.Bootstrap. jquery is in here because it is a prerequisite package needed for Twitter Bootstrap. Click OK A readme.txt file will open, go ahead and close out of it. It s just letting us know that all future updates for Twitter Bootstrap will be the bootstrap package instead of the twitter.bootstrap package. If we go to the NuGet Package Manager and select Installed under the filters, you can see all of the NuGet packages installed for your project (make sure to clear out the search field that was previously Twitter Bootstrap )

53 NuGet Packages 51

54 NuGet Packages 52 Some of the NuGet packages in here were pre-existing when we created the new project. The new NuGet packages that have been added are: bootstrap jquery Twitter.Bootstrap Notice that there is an upgrade available for bootstrap. Go ahead and select version 3.35 and click upgrade The update preview will inform us that it will also upgrade jquery. Click OK

55 NuGet Packages 53 BOOTSTRAP The bootstrap NuGet package is for installing the external library bootstrap: Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. It s a framework that experienced developers spent thousands of hours creating that you can use to create your webpage instead of manually writing all the CSS yourself (reinventing the wheel is bad). In the solution explorer you will see that the folder Scripts has been created with several Javascript files: You will also see under the folder Content some CSS files have been created And last but not least, some fonts have been added

56 Adding references to Javascript and CSS files 54 JQUERY The jquery NuGet package is for installed the external library jquery: jquery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jquery has changed the way that millions of people write JavaScript. It s a framework that experienced developers spent thousands of hours creating that you can use to create you webpage instead of manually writing all of the Javascript yourself (reinventing the wheel is bad). jquery functions are short and sweet where if you had to manually write the Javascript yourself you would write a at least eight lines per one line of jquery (and have to figure out how to handle all the different types of browsers). ADDING REFERENCES TO JAVASCRIPT AND CSS FILES To start taking advantage of bootstrap and jquery, you need to reference them in your project. Open the _Layout view. Click and drag the bootstrap.css file below the <title> tag

57 Adding references to Javascript and CSS files 55 Click and drag the bootstrap.js file there too And the same for the jquery js file Note: the bootstrap.js relies on the jquery js file, so jquery must be referenced first. And while we re add it, let s go ahead and cut and paste add our <script> tags to the bottom of the document, right before </body>

58 Adding references to Javascript and CSS files 56 Putting that script at the bottom of the body guarantees the DOM is ready to be manipulated, if you put it in the head, you have to wrap it so that it waits for the DOMReady(or similar) event. The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. Now start debugging your project, you will see the webpage looks exactly the same because although we referenced these files, we re not using them yet Stop debugging

59 Adding references to Javascript and CSS files 57 To start using bootstrap, we can use a template on bootstraps website

60 Adding references to Javascript and CSS files 58 Scroll until you find Fixed Navbar example ( The click the example Right click the page and click view source

61 Adding references to Javascript and CSS files 59 Go ahead and copy the code inside the entire <body> to </body> html Paste the code, replace the html inside <body> to </body> in the _Layout file (except for the <script>)

62 Adding references to Javascript and CSS files 60 Delete the html code for the scripts at the bottom And replace the <div class= jumbotron > There was an extra custom CSS file the bootsrap example was referencing navbar-fixed-top.css :

63 Adding references to Javascript and CSS files 61

64 Adding references to Javascript and CSS files 62 So we need to create this file under the Content folder. Right click the folder and select add -> style sheet Type in navbar-fixed-top.css and click OK

65 Adding references to Javascript and CSS files 63 Go back to the viewed source, hold down ctrl and click the navbar-fixed-top.css to view the contents of the file Copy this CSS and add it to the navbar-fixed-top.css file in the project Delete min-height: 2000px Save changes Go to _Layout and add reference to navbar-fixed-top.css

66 Adding references to Javascript and CSS files 64 Start debugging And now we re using a bootstrap template as the design of the web project. Stop debugging

67 MVC Razor Syntax 65 MVC RAZOR SYNTAX Although we have a layout, none of the links will work until we route them correctly. Hyperlinks in HTML look like this: But in MVC we write them a little differently. In the _Layout view, find the following link: <a href= # >Home</a> And replace it with the following: <a Index, Home ) >Home</a> This way we are telling the View to create a hyper link that routes to the Index ActionResult for the Home controller. Save changes, start debugging Inspect element for the Home link in the navigation bar You can see the following HTML has been generated from the MVC Razor code we wrote above: Stop debugging Update the About link Delete the contact link

68 Formatting Code 66 Delete the drop down Delete the Static Top and Fixed Top links The following link we left and did not delete will not work properly, but we ll update it to something later: Update the navbar-brand link to: Save changes, start debugging You can click the Home and About link to see them routing correctly now Stop debugging FORMATTING CODE Delete all of the HTML comments. HTML comments are green in the editor and start with <!-- and end with -->

69 Formatting Code 67 Delete any empty lines Ctrl+a and select all of the code Then hold ctrl, then hold K then press F This formats your code to align and look neat Save your changes

70 Formatting Code 68 Right click one of the tabs in the top of the editor, for example _Layout and click Close all documents

71 Designing Views 69 DESIGNING VIEWS You now have a lot of the _Layout view covered, let s go back and update the HTML for the Index and About view. Open the viewed source for the bootstrap template ( and copy the following HTML: Paste this HTML into the Index view (replacing Hello World! ) Change the text inside of the <h1> tag to Campus News Delete all the <p> tags and replace them with: <p>welcome to the Campus News page. The best place to find all of your campus news!</p>

72 Designing Views 70 And we ll add the example of rows and columns from the following template ( Open the page, right click and view source Copy the Example row of columns HTML

73 Designing Views 71 Paste the copied HTML into the Index view, below the jumbotron </div> Update the <h2> and <p> tags to look like news posts At the very top of the Index view add the ViewBag.Title = Home ; }

74 Designing Views 72 Save changes Open the About view Add the following <small> inside the <h1> <small>we bring the news</small> Wrap the <h1> with a <div class= page-header > I found the example for page-header here: Add the following <p> to describe the about page <p>we are a small team that publishes the campus news online for our fellow students. Nothing makes us happier than letting everyone know what is and what is not important.</p> At the very top of the Index view add the ViewBag.Title = About ; } Save changes Open _Layout and add the to the <title>

75 Designing Views 73 Start debugging, view your updates to the Index and About page Notice the title of the page changes based on each page because we added the ViewBag.Title Stop debugging

76 Model Binding 74 MODEL BINDING Model binding in MVC provides a simple way to map posted form values to a.net Framework type and pass the type to an action result as a parameter. It s a clean and organized way to receive and process inputted data on the webpage. Let s start off by creating a new controller called Account Create a new folder under the folder Models called Account Under the Account folder, create a new class file

77 Model Binding 75 Name the file RegisterModel Declare two new strings properties public string {get;set;} public string Password {get;set;} Add Public in front of class RegisterModel Save changes Go to the Account controller and add the following using statement: using CampusNews.Models.Account;

78 Model Binding 76 Create a new action result called Register Inside of the action result, create a new instance of the RegisterModel like this: var model = new RegisterModel(); Then pass the model to the view like this: return View(model); Create a new view called Index under Views\Account\ Leave the generated text as is:

79 Model Binding 77 Create a new view called Register under Views\Account\ Select create as the template and ReigsterModel as the Model class In the Register view, Delete the very last div Save changes and start debugging

80 Model Binding 78 Right click and view source Compare and see all of the HTML the MVC Razor code generated for We need this to prevent CSRF attacks. CSRF stands for Cross Site Request Forgery. Cross Site Request forgery is a type of a hack where the hacker exploits the trust of a website on the user. In other words, the site trusts the user (because they have authenticated themselves) and accepts data that turns out to be malicious. A CSRF attack depends on the fact that the site trusts the user s input. From here on the hacker attempts to get authenticated users to click on links that submit data without the user actually realizing. For example, say you are logged on to your bank that has the ability to transfer money from one account to another. The hacker somehow reverse engineers this form and sets up a duplicate form that submits transfer requests to their own ensures that a form being posted to the server was actually generated by the same server. Thus fake forms that do not have the AntiForgeryToken from the correct server, gets rejected. We will add the other half of AntiForgeryToken to our controller in a bit. On with the HTML generated for => => => model. ) And last but not least, the HTML generated for model.password

81 Model Binding 79 Stop debugging We are successfully displaying the Register view, but we aren t processing any of the values when the user submits the form. Go to the Account controller GET VS POST Whenever you load a webpage, the default method of loading it is GET. The other type would be you submitting a form, which would be POST So to process the submitted values of the Register view, we need to add another action result to our Account controller that accepts the POST values of the RegisterModel. We also need to add the other half of AntiForgeryToken: Add a debug marker to the beginning of this action result by placing your cursor at the first curly bracket and typing F9 Save changes Update the _Layout view and change the <a href="../navbar/">default</a> link to route to the Account\Register view and change the default test to Register

82 Model Binding 80 Start debugging, go to the register page Type in some values for and password fields, then click the create button Visual Studio will then successfully hit the breakpoint we added. If you hover over model in the parameter, you can see the values coming in Click F5 to allow the breakpoint to continue Stop debugging Model binding has allowed us to use the code from the model to easily generate html in the view and accept POST values in the controller.

83 Model Validation 81 MODEL VALIDATION Validation should be added to your models to assure you have clean data before trying to go on to a next step (e.g. make sure is valid before letting a user register). Open RegisterModel and add the following using statement: using System.ComponentModel.DataAnnotations; Make RegisterModel s base class IValidatableObject Create a new function that returns an IEnumerable <ValidationResult> called Validate Inside of the Validate function, add a condition that checks if the string is null or empty Start debugging and navigate to the register page

84 Model Validation 82 On the register page, leave the blank and type in test for password, the submit the form You hit the breakpoint and should see that the has a null value. Click F5 Notice on the view, you can see it has our validation error Type in test for the and submit again Click F5 to get past the breakpoint Notice the view no longer has a validation error Stop debugging

85 Model Validation 83 Inside of the RegisterModel, create a public void Save() {} This will be the code we call if the data in our view provided is correct, we need to add it to the controller to be called now. On the Account controller for the [HttpPost] register, add to call the Save if ModelState.IsValid Remove all existing debug points (by toggling F9) and then add one to model.save(); Start debugging

86 Model Validation 84 Navigate to the register page, leave the blank and password = test and submit the form You will see the validation message is empty Change the field to test and password field to test and submit the form again You will see that the breakpoint to save has been hit Click F5 Stop debugging Now let s add some validation to check if is a correct address. There s no reason to reinvent the wheel, so we ll use some code from MSDN s website

87 Model Validation 85 Create a new folder in the project called Helpers Then create a new class called RegexUtilities.cs Copy the code from MSDN

88 Model Validation 86 And paste into RegexUtilities.cs

89 Model Validation 87 Then add wrapping namespace around all of the code namespace CampusNews.Helpers{} Add custom code to beginning of RegexUtilities public static bool Is Valid(string ) { var regexutilties = new RegexUtilities(); return regexutilties.isvalid ( ); } Save changes Open RegisterModel.cs

90 Model Validation 88 Add the following using statement: using CampusNews.Helpers; Inside of validate, add the following validation for the Add the following validation to check if Password is null or empty And then add the following validation to check if Password is at least six characters in length Save changes Start debugging Try out all your new validation Stop debugging

91 Databases 89 DATABASES WHAT IS A DATABASE CREATING A DATABASE DEPLOYING A DATABASE ACCESSING A DATABASE ADO.NET ENTITY FRAMEWORK WHAT IS ADO.NET CREATING DATA MODEL SAVING DATA READING DATA