Friday, November 23, 2007

asp.net: DropDownList and SQLDataSource In a User Control

this is a great way to reduce code in an asp.net form. using a user control, which encapsulates all the functionality of the dropdownlist, including the data binding (sqldatastource or objectdatasource).

here's the sample code for the ascx file:

   1: <%@ Control Language="C#" AutoEventWireup="true" CodeFile="ddlPhaseEnglish.ascx.cs" Inherits="Controls_Lists_ddlPhaseEnglish" %>
   2: <asp:DropDownList ID="ddlPhases" runat="server" DataSourceID="sqldatasource1"
   3:     Width="183px" DataTextField="Phase" DataValueField="PhaseID" AppendDataBoundItems="true">
   4:     <asp:ListItem Text="Select a phase" Value="0" />
   5: </asp:DropDownList>
   6:  
   7: <asp:SqlDataSource ID="sourcePhases" runat="server" ConnectionString="<%$ ConnectionStrings:CnString %>"
   8:     SelectCommand="Select PhaseID, Phase From Phase"></asp:SqlDataSource>
   9:    

until now, it's all normal. what we add to make it the user control a DropDownList is a property to the ascx.cs file of this user control  for the code behind (ascx.cs) file:



   1: public String SelectedValue
   2:     {
   3:         get { return this.ddlPhase.SelectedValue; }
   4:         set { this.ddlPhase.SelectedValue = value; }
   5:     }

This property gives access to the dropdownlist, directly from the user control. Combining all these (the property SelectedValue in the code behind file and the ascx, we can have the following two line to define are dropdownlist:



   1: <%@ Register Src="Controls/Lists/ddlPhase.ascx" TagName="ddlPhase" TagPrefix="uc8" %>
   2:  
   3: <uc8:ddlPhase ID="DdlPhase1" runat="server" />
 




the above code is a lot cleaner and developer friendly than having the sqldatasource syntax included in every page. This method is just simpler than using a custom control, although the ideal is always a custom control in the bin folder.

Here's a screen shot of what the dropdownlists folder looks like in one of the applications where this technique is applied :


image
I hope this helps. Regards to web developpers

1 comment:

mathieu_cupryk@hotmail.com said...

Need a full example of what properties are need in the dropdownlist control. The follow is one I built. I am looking how other people are doing this.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using KORE.SIDWebClient.BLL;
using System.ComponentModel;

namespace KORE.SIDWebClient.UI.Controls
{
public partial class uxLookupFieldTicketType : System.Web.UI.UserControl
{
private string _keyField;
private string _valueField;
private string _defaultValue;

public uxLookupFieldTicketType()
{

}

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
LookupTypeTicket lookup = new LookupTypeTicket();

this.LookupTypeTicketDropDown.Items.AddRange(lookup.getLookupListItemGroup(this.KeyField, this.ValueField));

ListItem selected = this.LookupTypeTicketDropDown.Items.FindByValue(this.DefaultValue);

this.LookupTypeTicketDropDown.SelectedIndex = this.LookupTypeTicketDropDown.Items.IndexOf(selected);
}
}



[Category("Data"), Description("Selected Index of the DropDownList"), Browsable(true)]
public int SelectedIndex
{
get
{
return LookupTypeTicketDropDown.SelectedIndex;
}
}

[Category("Data"), Description("Selected Text of the DropDownList"), Browsable(true)]
public string SelectedText
{
get
{
return LookupTypeTicketDropDown.SelectedItem.Text;
}
}

[Category("Data"), Description("Selected Valueof the DropDownList"), Browsable(true)]
public string SelectedValue
{
get
{
return LookupTypeTicketDropDown.SelectedValue;
}
set
{
this.LookupTypeTicketDropDown.SelectedValue = value;
}
}


[Category("Data"), Description("The dataset column that will be display field in the dropdown"), Browsable(true)]
public string KeyField
{
get
{
return _keyField;
}
set
{
_keyField = value;
}
}

[Category("Data"), Description("The dataset column that will be value field in the dropdown"), Browsable(true)]
public string ValueField
{
get
{
return _valueField;
}
set
{
_valueField = value;
}
}

public string DefaultValue
{
get
{
return _defaultValue;
}
set
{
_defaultValue = value;
}
}


}
}


Please get back to me..