In this chapter students will be able to: Introduction, javascript where to, javascript output, javascript syntax, javascript statements, javascript comments, javascript variables, javascript data type.
CSC 330 E-Commerce Teacher Ahmed Mumtaz Mustehsan GM-IT CIIT Islamabad Virtual Campus, CIIT COMSATS Institute of Information Technology T2-Lecture-15 ASP.NET MVC Part - II For Lecture Material/Slides Thanks to: www.w3schools.com 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 1-3 Part VI: Adding a Database 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_Data folder in the Solution Explorer window Select Add, New Item Select SQL Server Compact Local Database * Name the database Movies.sdf Click the Add button T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com 1-5 Creating the Database Visual 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 T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com 1-6 Adding a Database Table Double-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: T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com 1-7 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 primary key (record identifier) To 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 1-8 T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com 1-9 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 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 T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com 110 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 136 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 Properties Window in the View menu T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com 137 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 138 Editors, Designers, and Tools Web page designer, design view Design view displays the controls and other items in a WYSIWYGlike way WYSIWYG: What You See Is What You Get T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com 139 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 140 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 141 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 The Toolbox 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 142 CSS Properties and Styles The 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 T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com 143 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 compiletime errors These errors can include incorrect syntax, misspelled keywords, and type mismatches T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com 144 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 145 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 Quick Watch dialog box, and the Memory windows T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com 146 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 147 Deployment Options Web Site Project Deployment The 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 T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com 148 Product Documentation The 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 T2-Lecture-15 Ahmed Mumtaz Mustehsan www.w3schools.com 149 End ASP.NET MVC Part - II For Lecture Material/Slides Thanks to: www.w3schools.com ... T2 -Lecture- 15 Ahmed Mumtaz Mustehsan www.w3schools.com 128 The End ASP.NET MVC Part-II T2 -Lecture- 15 Ahmed Mumtaz Mustehsan www.w3schools.com 129 Introduction to Visual Studio 2010 T2 -Lecture- 15... window, set the Identity property to True: T2 -Lecture- 15 Ahmed Mumtaz Mustehsan www.w3schools.com 1-8 T2 -Lecture- 15 Ahmed Mumtaz Mustehsan www.w3schools.com 1-9 Adding a Database Table When you have... 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 115 T2 -Lecture- 15 Ahmed