1 / 50

ASP.NET MVC Part II: Building an Internet Application

Learn how to build an Internet application using ASP.NET MVC, including adding, editing, deleting, and listing information stored in a database. This lecture covers creating the application, exploring the application folders, adding styles, adding a controller, adding views, adding a database, and adding a data model.

jsachs
Download Presentation

ASP.NET MVC Part II: Building an Internet Application

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSC 330 E-Commerce Teacher Ahmed MumtazMustehsan GM-IT CIIT Islamabad Virtual Campus, CIIT COMSATS Institute of Information Technology T2-Lecture-15

  2. ASP.NET MVC Part - II For Lecture Material/Slides Thanks to: www.w3schools.com

  3. Internet Application • To learn ASP.NET MVC, we will Build an Internet Application • We will build an Internet application that supports adding, editing, deleting, and listing of information stored in a database. Part I: Creating the Application Part II: Exploring the Application Folders Part III: Adding Styles and a Consistent Look (Layout). Part IV: Adding a Controller Part V: Adding Views for Displaying the Application Part VI: Adding a Database. Part VII: Adding a Data Model T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  4. Part VI: Adding a Database.

  5. Creating the Database Visual 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_Datafolder in the SolutionExplorer window • Select Add, New Item • Select SQLServerCompactLocalDatabase* • Name the database Movies.sdf. • Click the Add button T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  6. Creating the Database • Visual Web Developer automatically creates the database in the App_Datafolder. 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 T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  7. Adding a Database Table • Double-clicking the Movies.sdf file in the App_Data folder will open a DatabaseExplorer window. • To create a new table in the database, right-click the Tables folder, and select CreateTable. • Create the following columns: T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  8. Adding a Database Table • ID 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 primarykey (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: T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  9. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  10. Adding a Database Table • When 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 willname 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. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  11. Adding Database Records • Use Visual Web Developer to add some test records to the movie database. • Double-click the Movies.sdffile in the App_Datafolder. • Right-click the MovieDBstable in the Database Explorer window and select ShowTableData. • Add some records: Note:The ID column is updated automatically. You should not edit it. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  12. Part VII: Adding a Data Model.MVC Models

  13. Models The 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. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  14. The Models Folder • The 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. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  15. Adding a Database Model • The 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: T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  16. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  17. Adding a Database Model Note: • 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. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  18. Adding a Database Controller The database controller needed for this lesson can be created with these simple steps: Re-Build your project: • Select Debug, and then BuildMvcDemo from the menu. • In the Solution Explorer, right-click the Controllers folder, and select Add and Controller • Set controller name to MoviesController • Select template: Controllerwithread/writeactionsandviews, usingEntityFramework • Select model class: MovieDB (MvcDemo.Models) • Select data context class: MovieDBContext (MvcDemo.Models) • Select views Razor (CSHTML) • Click Add T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  19. Adding a Database Controller Visual Web Developer will create the following files: • A MoviesController.cs file in the Controllers folder • A Movies folder in the Views folder T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  20. Adding Database Views The following files are automatically created in the Movies folder: • Create.cshtml • Delete.cshtml • Details.cshtml • Edit.cshtml • Index.cshtml T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  21. Adding a Connection String • Add the following element to the <connectionStrings> element in your Web.config file: <add name="MovieDBContext"connectionString="Data Source=|DataDirectory|\Movies.sdf"providerName="System.Data.SqlServerCe.4.0"/> T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  22. MVC Application Security • The 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 contains A LogOnModel, A ChangePasswordModel, and A RegisterModel: T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  23. Account Model T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  24. The Change Password Model public 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; }} T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  25. A Logon Model public 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; }} T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  26. The Register Model public 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; }} T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  27. Congratulations • Congratulations. You have added your first MVC data model to your application. • Now you can click on the "Movies" tab T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  28. Run the Application • Select 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. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  29. The End ASP.NET MVC Part-II T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  30. Introduction to Visual Studio 2010 T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  31. Installation of Visual Studio/Visual Web Express • Get 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. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  32. Starting Visual Studio/Web Developer Run Visual Studio from the installed directory or Desktop or Start Menu. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  33. Adding Projects and Items • Web Projects The 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. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  34. Using the Integrated Development Environment The Visual Web Developer environment T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  35. Using the Integrated Development Environment • Customizing Menus and Toolbars The menus and toolbars in Visual Web Developer are customizable. To customize menus commands and toolbars, click Customize in the Tools menu. • Customizedialogbox The 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. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  36. Using the Integrated Development Environment Solution Explorer Window • The 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. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  37. Using the Integrated Development Environment Properties Window • Used 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 PropertiesWindow in the View menu. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  38. Editors, Designers, and Tools • Pages 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 View T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  39. Editors, Designers, and Tools • Webpagedesigner, designview Design view displays the controls and other items in a WYSIWYG-like way. WYSIWYG:What You See Is What You Get. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  40. Editors, Designers, and Tools • Web page designer, Source view Source view displays the source code for the file. Source view also supports editing features like word wrap, bookmarks, and line numbers. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  41. Editors, Designers, and Tools • Web page designer, Split view Some editors can also display the design view and source view at the same time. This view is called Split view. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  42. Editors, Designers, and Tools • Editing Web Pages in the Designer • An 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. • TheToolbox displays controls that can be added to Visual Web Developer projects. To display the Toolbox, click Toolbox in the View menu. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  43. CSS Properties and Styles • The CSSProperties 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. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  44. Build and Debug Options • Before 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. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  45. Build and Debug Options • The Output window displays these types of errors. Output window showing build information T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  46. Build and Debug Options • After 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 QuickWatch dialog box, and the Memory windows. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  47. Build and Debug Options • Debugging windows • The Error List window displays errors, warnings, and other messages that are related to debugging. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  48. Deployment Options • Web Site Project Deployment • The typical Web deployment scenarios for Web site projects include: • Deploying a Web site by using the CopyWebSite 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. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  49. Product Documentation • The Help can be accessed by pressing F1 in the IDE and by clicking ViewHelp in the Helpmenu. • Help can be obtained from either locally installed Help or documentation on the MSDN Web site. T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com

  50. EndASP.NET MVC Part - II For Lecture Material/Slides Thanks to: www.w3schools.com

More Related