Web Server Programming

Web Server Programming User Controls, Master Pages, GridView

Content • User Controls • Styles, Themes, Master Pages • Working with Data • GridView Muzaffer DOĞAN - Anadolu University

User Controls • An efficient way to reuse a block of user interface • A key tool for building modular web applications • They help you create consistent website designs and reuse your hardwork • In ASP.NET, extension of user control files are .ascx • They can use a code-behind file with event-handling logic Muzaffer DOĞAN - Anadolu University

Differences Between User Controls and Web Pages • Extensions (.ascx and .aspx) • Beginning directive (<%@ Control %> and <%@ Page %>) • User controls can't be requested directly by a web browser. Instead, they must be embedded inside other web pages Muzaffer DOĞAN - Anadolu University

Creating User Controls • In Visual Studio, use Add New Item command and select Web User Control • Design user control like a web page. Muzaffer DOĞAN - Anadolu University

Embedding a User Control • Simplest way: Drag & drop user control from Solution Explorer into a web page • Hard way: 1) Use Register directive at the top of the web page: • <%@ Register TagPrefix="apress" TagName="Footer" Src="Footer.ascx" %> • 2) Call it using the following tag: • <apress:Footer id="Footer1" runat="server" /> • Example: Display date and time (will be shown in the class) Muzaffer DOĞAN - Anadolu University

Integrated User Controls • There are two types of user controls: Independent and Integrated • Independent user controls don't interact with the page • Integrated user controls interact with the web page that hosts them • You can change the behavior or look of an integrated user control • Example: Displaying time in long date or short time formats (will be shown in the class) Muzaffer DOĞAN - Anadolu University

Changing Behavior • Create a Property in the user control and change its value by code or by control tag. • 1) Changing by code: • Footer1.Format = Footer.FooterFormat.LongDate; • Note that user control's Page_Load event runs before the click event of a button in the web page • 2) Setting initial appearance in the control tag: • <apress:FooterFormat="ShortTime" id="Footer1" runat="server" /> • Advanced: You can also use events in order to interact between user control and the web form Muzaffer DOĞAN - Anadolu University

Styles • Formatting features of HTML are limited and inconsistent. • The solution is the CSS standard. • CSS is supported by all modern browsers. • Styles allow you to add borders, set font details, change colors, add margin space and padding, and so on. Muzaffer DOĞAN - Anadolu University

Style Types • Inline style: Placed directly inside an HTML tag • Internal style sheet: Placed in the <head> section • External style sheet: Places in a separate CSS file • For more information about styles and style sheets, visit http://www.w3schools.com/css Muzaffer DOĞAN - Anadolu University

Themes • CSS rules are limited to a fixed set of style attributes. • CSS rules can't control other aspects of ASP.NET controls. • For example, CheckBoxList control includes properties that control how it organizes items into rows and columns. They are outside the scope of CSS. • The themes feature fills this gap. • Themes are processed by the server. Muzaffer DOĞAN - Anadolu University

Using Themes • Themes should be placed in the folder App_Themes • You need to create at least one skin file in the App_Themes folder • A skin file is a text file with the .skin extension • For more information, refer to the textbook Muzaffer DOĞAN - Anadolu University

Master Pages • Master pages allow you to define page templates and reuse them across your website. • Master pages define the page structure and the common ingredients. • Extension of master pages is .master. • Master pages can't be viewed by browsers. Instead, they must be used by other web pages Muzaffer DOĞAN - Anadolu University

Master Page and Content Page • To add a master page, click Add New Item and select Master Page. • ContentPlaceHolder is the portion of the master page that a content page can change. • While adding web forms into your application, don't forget to check Select master page box and select the master page you want to use. • You can use ContentPlaceHolders more than one in a master page. Muzaffer DOĞAN - Anadolu University

Working with Data • ADO.NET is the technology that .NET applications use to interact with a database. • There are two ways to work with data. • The first way is using the facilities presented by Visual Studio. • The second way is writing everything in the code by hand. • In this class, we'll see only the first way, which is easier than the other. Muzaffer DOĞAN - Anadolu University

Controls about Data Access • In Data section of Toolbox of Visual Studio, there are two types of controls: • Controls to display data • GridView, DataList, DetailsView, FormView, ListView, Repeater • Controls to access data • SqlDataSource, AccessDataSource, LinqDataSource, ObjectDataSource, XmlDataSource, SiteMapDataSource Muzaffer DOĞAN - Anadolu University

Data Access • 1) Design the database. • You can use SQL Server, Access, XML, Oracle, etc. • 2) Place appropriate data source (i.e. AccessDataSource if you are using Access, or SqlDataSource if you are using SQL Server, etc.) into your web page and configure it. • 3) Place appropriate display control (GridView, DataList, etc.) and set its DataSource property. Muzaffer DOĞAN - Anadolu University

Data Source Controls • Data source controls (AccessDataSource, SqlDataSource, etc.) have four commands: • SelectCommand to retrieve records • UpdateCommand to modify existing records • InsertCommand to add a new record • DeleteCommand to delete existing records • These commands can take parameters from controls, session state, cookies, and query strings. Muzaffer DOĞAN - Anadolu University

GridView Control • The GridView is an extremely flexible grid control that displays a multicolumn data. • Each record in your data source becomes a separate row in the grid. • Each field in the record becomes a separate column in the grid. • GridView has automatic paging, sorting, selecting and editing features. Muzaffer DOĞAN - Anadolu University

GridView Columns • GridView can automatically generate its columns based on the data. • You can hide columns, change their order, or configure some aspect of their display, such as formatting or heading text. • You can display columns as BoundField, ButtonField, CheckBoxField, CommandField, HyperLinkField, ImageField, or TemplateField • Most basic type is BoundField and you can display a field as a text in the specified column. Muzaffer DOĞAN - Anadolu University

.:. .:. Application .:. .:. • There will be an application session in the class demonstrating data access using an Access database and a GridView • If you were absent in the class, get help from one of your friends that attends to the class. Muzaffer DOĞAN - Anadolu University

References • Beginning ASP.NET 3.5 in C# 2008: From Novice to Professional • Visual Studio Muzaffer DOĞAN - Anadolu University

Web Server Programming