In this chapter students will be able to: Creating the application, exploring the application folders, adding styles and a consistent look (layout), adding a controller, adding views for displaying the application.
CSC 330 E-Commerce Teacher Ahmed Mumtaz Mustehsan GM-IT CIIT Islamabad Virtual Campus, CIIT COMSATS Institute of Information Technology T2-Lecture-14 ASP.NET MVC Part - I For Lecture Material/Slides Thanks to: www.w3schools.com Objectives Introduction MVC Application MVC Folders MVC Layout MVC Controllers MVC Views MVC Database MVC Models T2-Lecture-14 Ahmed Mumtaz Mustehsan www.w3schools.com 1-3 Introduction Introduction ASP.NET is a development framework for building web pages and web sites with HTML, CSS, JavaScript and server scripting ASP.NET supports three different development models: Web Pages MVC (Model View Controller) Web Forms T2-Lecture-14 Ahmed Mumtaz Mustehsan www.w3schools.com 1-5 The MVC Programming Model MVC is one of three ASP.NET programming models It is a framework for building web applications using a MVC (Model View Controller) design: The Model represents the application core (for instance a list of database records) The View displays the data (the database records) The Controller handles the input (to the database records) The MVC model also provides full control over HTML, CSS, and JavaScript T2-Lecture-14 Ahmed Mumtaz Mustehsan www.w3schools.com 1-6 The MVC Programming Model The MVC model defines web applications with three logic layers: The business layer (Model logic) The display layer (View logic) The input control (Controller logic) T2-Lecture-14 Ahmed Mumtaz Mustehsan www.w3schools.com 1-7 The MVC Programming Model The Model: is the part of the application that handles the logic for the application data The model objects retrieve data (and store data) from a database The View: is the parts of the application that handles the display of the data Most often the views are created from the model data The Controller: is the part of the application that handles user interaction Typically controllers read data from a view folder, control user input, and send input data to the model The MVC Model: separation helps you manage complex applications, One can focus on one aspect a time For example, one can focus on the view without depending on the business logic It also makes it easier to test an application It simplifies group development Different developers can work on the view, the controller logic, and the business logic in parallel T2-Lecture-14 Ahmed Mumtaz Mustehsan www.w3schools.com 1-8 Web Forms vs MVC The MVC programming model is a lighter alternative to traditional ASP.NET (Web Forms) MVC is a lightweight, highly testable framework, integrated with all existing ASP.NET features, such as Master Pages, Security, and Authentication T2-Lecture-14 Ahmed Mumtaz Mustehsan www.w3schools.com 1-9 Visual Studio Express 2012/2010 Visual Studio Express is a free version of Microsoft Visual Studio Visual Studio Express is a development tool tailor made for MVC (and Web Forms) Visual Studio Express contains: MVC and Web Forms Drag-and-drop web controls and web components A web server language (Razor using VB or C#) A web server (IIS Express) A database server (SQL Server Compact) A full web development framework (ASP.NET) T2-Lecture-14 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-14 Ahmed Mumtaz Mustehsan www.w3schools.com 176 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-14 Ahmed Mumtaz Mustehsan www.w3schools.com 177 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-14 Ahmed Mumtaz Mustehsan www.w3schools.com 178 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-14 Ahmed Mumtaz Mustehsan www.w3schools.com 179 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-14 Ahmed Mumtaz Mustehsan www.w3schools.com 180 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-14 Ahmed Mumtaz Mustehsan www.w3schools.com 181 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-14 Ahmed Mumtaz Mustehsan www.w3schools.com 182 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-14 Ahmed Mumtaz Mustehsan www.w3schools.com 183 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-14 Ahmed Mumtaz Mustehsan www.w3schools.com 184 Build and Debug Options The Output window displays these types of errors Output window showing build information T2-Lecture-14 Ahmed Mumtaz Mustehsan www.w3schools.com 185 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-14 Ahmed Mumtaz Mustehsan www.w3schools.com 186 Build and Debug Options Debugging windows The Error List window displays errors, warnings, and other messages that are related to debugging T2-Lecture-14 Ahmed Mumtaz Mustehsan www.w3schools.com 187 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-14 Ahmed Mumtaz Mustehsan www.w3schools.com 188 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-14 Ahmed Mumtaz Mustehsan www.w3schools.com 189 End ASP.NET MVC Part - I For Lecture Material/Slides Thanks to: www.w3schools.com .. .ASP.NET MVC Part - I For Lecture Material/Slides Thanks to: www.w3schools.com Objectives Introduction MVC Application MVC Folders MVC Layout MVC Controllers MVC Views MVC Database... ASP.NET supports three different development models: Web Pages MVC (Model View Controller) Web Forms T2 -Lecture- 14 Ahmed Mumtaz Mustehsan www.w3schools.com 1-5 The MVC Programming Model MVC. .. in parallel T2 -Lecture- 14 Ahmed Mumtaz Mustehsan www.w3schools.com 1-8 Web Forms vs MVC The MVC programming model is a lighter alternative to traditional ASP.NET (Web Forms) MVC is a lightweight,