IT533 Lectures DataBinding Controls

Installations Microsoft® SQL Server® 2012 Express Download the sample sql script files from the course’s web site CodeWeek3.zip. Run them on the SQL Server Express. In SQL Server Management Studio, open the.sql script files. Click Execute on the script files.

Data Binding How to Populate Server Controls? Specify the data in the control’s tags Not dynamic: can’t get data from a database Write code that uses the control’s object model This is okay if you need to populate a simple value or list, but quickly gets too complicated for populating sophisticated displays Data binding Create an object that holds the data ( DataSet, Array, string, int, etc.) Associate that object with the control

Data Binding What Is It? Provides a single simple yet powerful way to populate Web Form controls with data Enables clean separation of code from UI Supports binding to any data source Properties, expressions, method calls Collections ( Array, Hashtable, etc.) DataSet, DataTable, DataView, DataReader XML One way snapshot model Requires code to reapply to data model

Data Binding What Is It? Allows you to specify an expression When the appropriate DataBind method is called, the expression is evaluated and bound Page.DataBind DataBind for a single control (and subcontrols) Works for scalars, e.g. Label control Works for lists, e.g. DropDown control, ListBox control, etc. Enables the use of templates

Data Binding Scalar Expressions Data binding expression: Expression is evaluated when DataBind() is called <asp:Label id=label1 Text=<%# “The result is “ + (1 + 2) + “, the time is “ + DateTime.Now.ToLongTimeString() %> runat="server" /> public void Page_Load(object s, EventArgs e) { if (! Page.IsPostBack) Page.DataBind(); }

Data Binding Scalar Expressions Demo: DataBinding1.aspx Data binding to simple, scalar expressions

Data Binding Simple Lists Data binding can be used to populate list controls, e.g.

Data Binding Simple Lists Steps to data bind a list control Declare the list control Optionally set DataValueField and DataTextField Set its DataSource Call DataBind() method

Data Binding Simple Lists Demo: DataBinding2.aspx Data binding to simple lists

Introduction to ADO.NET.NET’s Database Framework A data-access technology that enables applications to connect to data stores and manipulate data contained in them in various ways.

ADO.NET Architecture

ADO.NET Core Objects ObjectDescription Connection Establishes a connection to a specific data source. (Base class: DbConnection) Command Executes a command against a data source. Exposes Parameters and can execute within the scope of a Transaction from a Connection. (The base class: DbCommand) DataReader Reads a forward-only, read-only stream of data from a data source. (Base class: DbDataReader) DataAdapter Populates a DataSet and resolves updates with the data source. (Base class: DbDataAdapter) DataTable Has a collection of DataRows and DataColumns representing table data, used in disconnected model DataSet Represents a cache of data. Consists of a set of DataTables and relations among them

Connected Data Access Model

Disconnected Data Access Model

Pros and Cons ConnectedDisconnected Database Resources -+ Network Traffic -+ Memory Usage +- Data Access -+

Steps of Data Access: Disconnected Environment Defining the connection string Defining the connection Defining the command Defining the data adapter Creating a new DataSet object SELECT -> fill the dataset object with the result of the query through the data adapter Reading the records from the DataTables in the datasets using the DataRow and DataColumn objects UPDATE, INSERT or DELETE -> update the database through the data adapter

Steps of Data Acces : Connected Environment Create connection Create command (select-insert-update-delete) Open connection If SELECT -> use a DataReader to fetch data If UPDATE, DELETE, INSERT  use command object’s methods Close connection

Data Binding Data Source Example DataView GetSampleData() { DataSet ds; SqlConnection cxn; SqlDataAdapter adp; cxn = new SqlConnection("server=localhost; " + "uid=sa;pwd=;database=Northwind"); adp = new SqlDataAdapter( "select CategoryID, CategoryName from Categories", cxn); ds = new DataSet(); adp.Fill(ds, "Categories"); return ds.Tables["Categories"].DefaultView; // Work on the data in memory using the DataSet (ds) object }

Data Binding Data Source Example // Databind the list box to a data reader SqlConnection cxn = new SqlConnection("Data Source=.\\SQLEXPRESS;database=Northwind; integrated security=true; Trusted_Connection=True"); SqlCommand cmd = new SqlCommand("select CategoryID, CategoryName from Categories", cxn); cxn.Open(); SqlDataReader dr = cmd.ExecuteReader(); CheckBoxList1.DataSource = dr; CheckBoxList1.DataValueField ="CategoryID"; CheckBoxList1.DataTextField="CategoryName"; CheckBoxList1.DataBind(); cxn.Close();

Data Binding Database Data binding can be used to populate server controls with data from a database Bind to a DataView of a DataSet Specify value and text with DataValueField and DataTextField, respectively

Data Binding List Binding Examples void Page_Load(object s, EventArgs e) { ListBox1.DataSource = GetSampleData(); ListBox1.DataValueField = "CategoryID"; ListBox1.DataTextField = "CategoryName"; ListBox1.DataBind(); } void Page_Load(object s, EventArgs e) { ListBox1.DataBind(); } <asp:ListBox id="ListBox1" runat="server" DataSource= DataValueField=“CategoryID” DataTextField=“CategoryName” />

Data Binding Binding to a Database Demo: DataBinding3.aspx Data binding to a database

Choosing a DataReader or a Dataset The type of functionality application requires should be considered Use a DataSet to: Cache data locally in your application so that you can manipulate it Remote data between tiers or from an XML Web service Interact with data dynamically such as combining and relating data from multiple sources Perform extensive processing on data without requiring an open connection to the data source, which frees the connection to be used by other clients If readonly data is needed use DataReader to boost performance

Best Practices Don’t create a new connection string for every code connecting to DB Use web.config file to keep your connection strings through the application scope <add name="NorthwindConnectionString" connectionString="Data Source=.\SQLEXPRESS; database=Northwind; integrated security=true; Trusted_Connection=True" providerName="System.Data.SqlClient" /> Use WebConfigurationManager.OpenWebConfiguration, ConnectionStringSettings to access settings at runtime. Let’s modify DataBinding3.aspx.cs You can keep any other variable to reach at runtime using this technique

Data Binding GridView Full-featured list output Default look is a grid Columns can be formatted with templates AutoFormat is available Optional paging Updateable

Data Binding Binding to All Columns void Page_Load(object s, EventArgs e) { myGridView.DataSource = GetEmployeeData (); myGridView.DataBind(); } Binding all columns in the datasource Declare an Set its DataSource Call DataBind()

Data Binding Binding to Specific Columns By default, GridView will display all columns To control columns to display: Set AutoGenerateColumns=“false” Specify Columns property Add column definition BoundField TemplateField ButtonField, CheckBoxField HyperlinkField, ImageField CommandField

Data Binding Binding to Specific Columns <asp:GridView id=myGridView autogeneratecolumns=false runat=server> <asp:BoundField DataField="fname" HeaderText="Name" /> <asp:BoundField DataField="lname" HeaderText="LastName" /> Binding to specific columns in the datasource Declare an Declare its Columns collection Set its DataSource Call its DataBind() method

Data Binding Templates Templates provide a powerful way to customize the display of a server control Customize structure – not just style Can use controls or other HTML within a template 3 rd party controls can expose new templates With data binding, templates specify a set of markup (HTML or server controls) for each bound piece of data Not just specifying formatting and style for a column However, templates are not limited to data binding No fixed set of templates Controls may define their own and expose any number of them

Data Binding Templates Standard templates for list-bound controls HeaderTemplate : rendered once before all data bound rows ItemTemplate : rendered once for each row in the data source AlternatingItemTemplate : like ItemTemplate, but when present is used for every other row SeparatorTemplate : rendered between each row FooterTemplate : rendered once, after all data bound rows

Data Binding Data Binding in Templates Templates need to access the bound data Container is an alias for the template’s containing control DataItem is an alias for the current row of the datasource DataBinder.Eval is a utility function provided to retrieve and format data within a template

Data Binding Repeater Control Provides simple output of a list of items No inherent visual form Templates provide the visual form No paging Can provide templates for separators Not updateable

Data Binding Repeater Control Title Type

Data Binding DataList Control Provides list output with editing Default look is a table Customized via templates Directional rendering (horizontal or vertical) Single and multiple selection Alternate item Updateable No paging

Data Binding DataList Control void Page_Load(object s, EventArgs e) { myDataList.DataSource = GetSampleData(); myDataList.DataBind(); } Title id: Title:

Data Binding Repeater and DataList Demo Demo: DataBinding6.aspx Using templates and data binding to a database with Repeater and DataList controls

Data Binding Deciding When to Use the GridView, DataList or Repeater GridView provides the greatest feature set and simplest Allow the end-user to sort, page, and edit DataList provides more control over the look and feel of the displayed data than the GridView Requires more development time Repeater allows for complete and total control of the rendered HTML markup No built-in editing, sorting, or paging support The best performance of the three data Web controls

ASP.NET 3.5 introduces two new server-side data controls, the ListView and the DataPager. The ListView is highly customizable control for displaying data. You can define an assortment of templates such as ItemsTemplate, SelectedItemTemplate, ItemSeparatorTemplate, and GroupTemplate to customize how to display data. Includes styling with CSS, flexible pagination, and sorting, inserting, deleting, and updating features. New ASP.NET 3.5 Data Binding Controls ListView and DataPager

The DataPager control works alongside a data control, such as GridView or ListView, and customizes how it pages through data. With a data pager, you can customize the combination of page-navigation buttons (such as next, previous, or page numbers) that are displayed. New ASP.NET 3.5 Data Binding Controls ListView and DataPager

Newest DataBinding Control ListView Let’s do it: ListViewDataBinding.aspx

ASP.NET MVC Framework MVC is one of three ASP.NET programming models. MVC is a framework for building web applications using a Model View Controller design. MVC forces you to separate web3 different applications into 3 components: Models for data Ex: a list of database records Views for displaying the data Ex: a GridView or an HTML table control Controllers for handling the input Ex: update or insert a new record into a database

MVC Framework Advantages The MVC separation helps you manage complex applications, because you can focus on one aspect a time. For example, you can focus on the view without depending on the business logic. It also makes it easier to test an application. The MVC separation also simplifies group development. Different developers can work on the view, the controller logic, and the business logic in parallel. Integrated with all existing ASP.NET features such as Master Pages, Security, and Authentication. Full control over HTML, CSS, and JavaScript.

MVC Framework Model Models both hold and manipulate application data. Database might exist or can be created automatically. Model MovieDB.cs: using System.Web; using System.Data.Entity; namespace MvcDemo.Models { public class MovieDB { public int ID { get; set; } public string Title { get; set; } public string Director { get; set; } public DateTime Date { get; set; } } public class MovieDBContext : DbContext { public DbSet Movies { get; set; } } }

MVC Framework View Lets you select any of the following View options: Internet Application template Razor Engine HTML5 Markup Razor is a new markup "Index", "Index", "About",

MVC Framework Controller MVC maps URLs to methods. These methods are in classes called "Controllers". Controllers are responsible for processing incoming requests, handling input, saving data, and sending a response to send back to the client. The Home controller defines the two controls Index and About: using System.Web; using System.Web.Mvc; namespace MvcDemo.Controllers { public class HomeController : Controller { public ActionResult Index() {return View();} public ActionResult About() {return View();} } }

MVC Demo 1 : MVCTest Model: Employee View: Home\Index.cshtml Controller: HomeController

MVC Demo 2 : MVCTest Model: Employee, Department View: All.cshtml, Index.cshtml Controller: EmployeeController