Download Validation Controls Master Pages

DataBinding Controls
IT533 Lectures
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 %>
 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.
 <asp:ListBox>
 <asp:DropDownList>
 <asp:RadioButtonList>
 <asp:CheckBoxList>
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
Object
Description
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
Connected
Disconnected
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();
}
<asp:ListBox id="ListBox1" runat="server" />
void Page_Load(object s, EventArgs e) {
ListBox1.DataBind();
}
<asp:ListBox id="ListBox1" runat="server"
DataSource=<%# GetSampleData() %>
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
<connectionStrings>
<add name="NorthwindConnectionString"
connectionString="Data Source=.\SQLEXPRESS;
database=Northwind; integrated security=true;
Trusted_Connection=True"
providerName="System.Data.SqlClient" />
</connectionStrings>
•
•
•
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
 Binding all columns in the datasource
 Declare an <asp:GridView>
 Set its DataSource
 Call DataBind()
void Page_Load(object s, EventArgs e) {
myGridView.DataSource = GetEmployeeData ();
myGridView.DataBind();
}
<asp:GridView id=myGridView runat="server" />
Data Binding
Binding to Specific Columns
http://www.asp.net/learn/data-access/tutorial-12-cs.aspx
 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
 Binding to specific columns in the datasource
 Declare an <asp:GridView>
 Declare its Columns collection
 Set its DataSource
 Call its DataBind() method
<asp:GridView id=myGridView
autogeneratecolumns=false runat=server>
<Columns>
<asp:BoundField DataField="fname"
HeaderText="Name" />
<asp:BoundField DataField="lname"
HeaderText="LastName" />
</Columns>
</asp:GridView>
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
 3rd 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
<%# DataBinder.Eval(Container.DataItem, "price", "$ {0}") %>
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
<asp:Repeater id="repList" runat="server">
<template name="HeaderTemplate">
<table>
<tr><td>Title</td><td>Type</td></tr>
</template>
<template name="ItemTemplate">
<tr>
<td><%# DataBinder.Eval(Container.DataItem,"title_id") %></td>
<td><%# DataBinder.Eval(Container.DataItem,"type") %></td>
</tr>
</template>
<template name="FooterTemplate">
</table>
</template>
</asp:Repeater>
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();
}
<asp:datalist id=myDataList runat=server>
<template name="itemtemplate">
<b>Title id:</b>
<%# DataBinder.Eval(Container.DataItem, "title_id") %>
<br> <b>Title:</b>
<%# DataBinder.Eval(Container.DataItem, "title") %>
</template>
</asp:datalist>
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
http://msdn.microsoft.com/en-us/library/aa479015.aspx
New ASP.NET 3.5 Data Binding Controls
ListView and DataPager
 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.
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 web
3 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<MovieDB> 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 with .cshtml extension
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css"/>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"></script>
</head>
<body>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Movies", "Index", "Movies")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
<section id="main">
@RenderBody()
</section>
</body>
</html>
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