ASP.NET MVC - Part 2

CSC 330 E-CommerceTeacher Ahmed Mumtaz Mustehsan GM-IT CIIT Islamabad Virtual Campus, CIIT COMSATS Institute of Information TechnologyT2-Lecture-15ASP.NET MVCPart - IIFor Lecture Material/Slides Thanks to: www.w3schools.comInternet ApplicationTo learn ASP.NET MVC, we will Build an Internet ApplicationWe will build an Internet application that supports adding, editing, deleting, and listing of information stored in a database.Part I: Creating the ApplicationPart II: Exploring the Application FoldersPart III: Adding Styles and a Consistent Look (Layout).Part IV: Adding a ControllerPart V: Adding Views for Displaying the ApplicationPart VI: Adding a Database.Part VII: Adding a Data Model1-3T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comPart VI: Adding a Database.Creating the DatabaseVisual Web Developer comes with a free SQL database called SQL Server Compact.The database needed for this lesson can be created with these simple steps:Right-click the App_Data folder in the Solution Explorer windowSelect Add, New ItemSelect SQL Server Compact Local Database *Name the database Movies.sdf.Click the Add button1-5T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comCreating the DatabaseVisual Web Developer automatically creates the database in the App_Data folder. If SQL Server Compact Local Database is not an available option, means SQL Server Compact not installed.If SQL Server Compact not installed on your computer. Install it from this link: SQL Server Compact 1-6T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comAdding a Database TableDouble-clicking the Movies.sdf file in the App_Data folder will open a Database Explorer window.To create a new table in the database, right-click the Tables folder, and select Create Table. Create the following columns:1-7T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comAdding a Database TableID is an integer (whole number) used to identify each record in the table.Title is a 100 character text column to store the name of the movie.Director is a 100 character text column to store the director's name.Date is a datetime column to store the release date of the movie.After creating the columns described above, you must make the ID column the table's primary key (record identifier). To do this, click on the column name (ID) and select Primary Key. Also, in the Column Properties window, set the Identity property to True: 1-8T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com1-9T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comAdding a Database TableWhen you have finished creating the table columns, save the table and name it MovieDBs.Note:We have deliberately named the table "MovieDBs" (ending with s). Later we will name it "MovieDB" used for the data model. It looks strange, but this is the naming convention you have to use to make the controller connect to the database table. 1-10T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comAdding Database RecordsUse Visual Web Developer to add some test records to the movie database.Double-click the Movies.sdf file in the App_Data folder.Right-click the MovieDBs table in the Database Explorer window and select Show Table Data.Add some records:Note: The ID column is updated automatically. You should not edit it.1-11T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comPart VII: Adding a Data Model.MVC ModelsModelsThe MVC Model contains all application logic: business logic, validation logic, data access logic, (except pure view and controller logic.)MVC, models are used for both: Hold and manipulate application data.1-13T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comThe Models FolderThe Models Folder contains the classes that represent the application model. Visual Web Developer automatically creates an AccountModels.cs file that contains the models for application security. AccountModels contains:A LogOnModel, A ChangePasswordModel, and A RegisterModel.1-14T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comAdding a Database ModelThe database model needed for this Lesson can be created with these simple steps:In the Solution Explorer, right-click the Models folder, select Add and Class.Name the class MovieDB.cs, and click Add.Edit the class:1-15T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com1-16T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comAdding a Database ModelNote:We have deliberately named the model class "MovieDB". In the previous section, we used the name "MovieDBs" (ending with s) used for the database table. It looks strange, but this is the naming convention we have to use to make the model connect to the database table. 1-17T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comAdding a Database ControllerThe database controller needed for this lesson can be created with these simple steps:Re-Build your project: Select Debug, and then Build MvcDemo from the menu.In the Solution Explorer, right-click the Controllers folder, and select Add and ControllerSet controller name to MoviesControllerSelect template: Controller with read/write actions and views, using Entity FrameworkSelect model class: MovieDB (MvcDemo.Models)Select data context class: MovieDBContext (MvcDemo.Models)Select views Razor (CSHTML)Click Add1-18T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comAdding a Database ControllerVisual Web Developer will create the following files:A MoviesController.cs file in the Controllers folderA Movies folder in the Views folder1-19T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comAdding Database ViewsThe following files are automatically created in the Movies folder:Create.cshtmlDelete.cshtmlDetails.cshtmlEdit.cshtmlIndex.cshtml1-20T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comAdding a Connection StringAdd the following element to the element in your Web.config file:1-21T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comMVC Application SecurityThe Models Folder contains the classes that represent the application model.Visual Web Developer automatically creates an AccountModels.cs file that contains the models for application authentication.AccountModels containsA LogOnModel, A ChangePasswordModel, andA RegisterModel:1-22T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comAccount Model1-23T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comThe Change Password Modelpublic class ChangePasswordModel{[Required][DataType(DataType.Password)][Display(Name = "Current password")]public string OldPassword { get; set; }[Required][StringLength(100, ErrorMessage = "The {0} must be at least {2}      characters long.", MinimumLength = 6)][DataType(DataType.Password)][Display(Name = "New password")]public string NewPassword { get; set; }[DataType(DataType.Password)][Display(Name = "Confirm new password")][Compare("NewPassword", ErrorMessage = "The new password and confirmation password do not match.")]public string ConfirmPassword { get; set; }}1-24T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comA Logon Modelpublic class LogOnModel{[Required][Display(Name = "User name")]public string UserName { get; set; }[Required][DataType(DataType.Password)][Display(Name = "Password")]public string Password { get; set; }[Display(Name = "Remember me?")]public bool RememberMe { get; set; }}1-25T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comThe Register Modelpublic class RegisterModel{[Required][Display(Name = "User name")]public string UserName { get; set; }[Required][DataType(DataType.EmailAddress)][Display(Name = "Email address")]public string Email { get; set; }[Required][StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)][DataType(DataType.Password)][Display(Name = "Password")]public string Password { get; set; }[DataType(DataType.Password)][Display(Name = "Confirm password")][Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]public string ConfirmPassword { get; set; }}1-26T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comCongratulationsCongratulations. You have added your first MVC data model to your application.Now you can click on the "Movies" tab 1-27T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comRun the ApplicationSelect Debug, Start Debugging (or F5) from the Visual Web Developer menu.Your application will look like this:Click on the "Home" tab and the "About" tab to see how it works.1-28T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comThe End ASP.NET MVCPart-II1-29T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comIntroductionto Visual Studio 20101-30T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comInstallation of Visual Studio/Visual Web ExpressGet and install a licensed copy of either the Visual Studio or Visual Web Developer.Visual Web Developer 2010 Express is part of the Visual Studio family. So, either of the environments can be used to build Web sites without any issue.Lets have introduction to Visual Studio 2010 environment.1-31T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comStarting Visual Studio/Web DeveloperRun Visual Studio from the installed directory or Desktop or Start Menu.1-32T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comAdding Projects and ItemsWeb ProjectsThe New Web Site dialog box enables you to create a new Web site on the local computer or on a remote computer, or to connect to a Web site location using FTP to read and write files. The following illustration shows the New Web Site dialog box.1-33T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comUsing the Integrated Development EnvironmentThe Visual Web Developer environment1-34T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comCustomizing Menus and ToolbarsThe menus and toolbars in Visual Web Developer are customizable. To customize menus commands and toolbars, click Customize in the Tools menu. Customize dialog boxThe Customize dialog box lets you select toolbars to display, create custom toolbars and menus, add remove items from toolbars and menus, and change the appearance of toolbar and menu items.Using the Integrated Development Environment1-35T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comUsing the Integrated Development EnvironmentSolution Explorer WindowThe Solution Explorer window displays solutions, projects, and the items in those projects. It provides an organized view of the projects and their files as well as access to the commands that pertain to them.1-36T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comUsing the Integrated Development EnvironmentProperties WindowUsed to view and set the properties and events of objects that you are working with in the editor and page designer. Can also be used to edit and view file, project, and solution properties. To display the Properties window, click Properties Window in the View menu.1-37T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comEditors, Designers, and ToolsPages are created and code is written using an editor and using designer windows. The functionality of the editor and of designers depends on the type of file or document being created.Web page editors and designers have two views: Graphical Design View Source-code View1-38T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comEditors, Designers, and ToolsWeb page designer, design viewDesign view displays the controls and other items in a WYSIWYG-like way. WYSIWYG: What You See Is What You Get.1-39T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comEditors, Designers, and ToolsWeb page designer, Source viewSource view displays the source code for the file. Source view also supports editing features like word wrap, bookmarks, and line numbers.1-40T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comEditors, Designers, and ToolsWeb page designer, Split viewSome editors can also display the design view and source view at the same time. This view is called Split view.1-41T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comEditors, Designers, and ToolsEditing Web Pages in the DesignerAn ASP.NET Web page consists of visual elements and programming logic. Visual elements for the page include markup, server controls, and static text. Programming logic for the page includes event handlers and other code. The Toolbox displays controls that can be added to Visual Web Developer projects. To display the Toolbox, click Toolbox in the View menu.1-42T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comCSS Properties and StylesThe CSS Properties window is used during the editing of an ASP.NET Web page. The window shows the styles that are used by the current selection in a Web page and the order of precedence for the styles. The window is used to add properties to an existing style, modify the already set properties, and create new inline styles.1-43T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comBuild and Debug OptionsBefore a Web application can be displayed, it must be compiled, or built. Visual Web Developer provides a robust set of build (compilation) and debugging options. By using build configurations, the components to build can be selected, or those unwanted can be excluded, and built details can be specified. Build configurations for solutions and projects can be created.Building begins the debug process. Building application helps in the detection of compile-time errors. These errors can include incorrect syntax, misspelled keywords, and type mismatches. 1-44T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comThe Output window displays these types of errors.Output window showing build informationBuild and Debug Options1-45T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comAfter building the application, the debugger can be used to detect and correct run-time problems, such as logic errors. The code can be stopped (break) as it is running. In break mode, the local variables and other data can be examined by using tools such as the Variable window, the Quick Watch dialog box, and the Memory windows. Build and Debug Options1-46T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comDebugging windowsThe Error List window displays errors, warnings, and other messages that are related to debugging.Build and Debug Options1-47T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comDeployment OptionsWeb Site Project DeploymentThe typical Web deployment scenarios for Web site projects include:Deploying a Web site by using the Copy Web Site tool, which can copy and synchronize files between the source computer, a destination computer or location.Deploying a Web site by using the Windows  XCopy command.Deploying a prebuilt (precompiled) Web site.1-48T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comProduct DocumentationThe Help can be accessed by pressing F1 in the IDE and by clicking View Help in the Help menu. Help can be obtained from either locally installed Help or documentation on the MSDN Web site. 1-49T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.comEndASP.NET MVCPart - IIFor Lecture Material/Slides Thanks to: www.w3schools.com