How to populate Combobox in silverlight ?



Hi

Here all process are same as datagrid filling, only we have to do few changes

step1:Configure the combobox like this

<ComboBox Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="comboBox1"
VerticalAlignment="Top" Width="120" >

</ComboBox>

Step2:Create one Silverlight enable WCF and write the code like this

using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;

namespace SilverlightApplication16.Web
{
[ServiceContract(Namespace = “”)]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service1
{

SqlConnection con = new SqlConnection(“Data Source=.\\SQLEXPRESS;AttachDbFilename=|DataDirectory|\\Database1.mdf;Integrated Security=True;User Instance=True”);
[OperationContract]
public List GetEmpName()
{
List Emps = new List();
//items.Add(new Product() { Name = “Select”, Id = 0 });
Emps.Add(new Emp { EmpName = “Select”, EmpSal = “0”, Id = 0 });

con.Open();
SqlCommand cmd = new SqlCommand(“Select Id,EmpName,EmpSal from tblEmp”, con);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
Emp emp1 = new Emp();
emp1.Id = Convert.ToInt32(dr[“Id”]);
emp1.EmpName = dr[“EmpName”].ToString();
emp1.EmpSal = dr[“EmpSal”].ToString();
Emps.Add(emp1);
}
con.Close();
return Emps;
}

}
}

Step3: Compile the WCF and Consume the service in silverlight application

step4: Change codebehind file like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using SilverlightApplication1.ServiceReference1;

namespace SilverlightApplication1
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
FillDataGrid();

}

private void FillDataGrid()
{
Service1Client client = new Service1Client();
client.GetAllEmpCompleted += new EventHandler<GetAllEmpCompletedEventArgs>(client_GetAllEmpCompleted);
client.GetAllEmpAsync();

}

void client_GetAllEmpCompleted(object sender, GetAllEmpCompletedEventArgs e)
{
//GridTest.ItemsSource = e.Result;
Combo1.ItemsSource = e.Result;

}
}
}

Now compile the code.

How to consume WCF Service and fill datagrid from database in Silverlight?


Step 1.Create one table i.e tblEmp with Id,EmpName,EmpAddress field

Step2:Create one class file Emp.cs
and declare property field like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace SilverlightApplication1.Web
{
public class Emp
{
public int Id { get; set; }
public string EmpName { get; set; }
public string EmpAddress { get; set; }

}
}

step3:Create one SilverlightEnabled WCF File like this image and write this code

using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.Collections.Generic;
using System.Text;
using System.Data;
using System.Data.SqlClient;

namespace SilverlightApplication1.Web
{
[ServiceContract(Namespace = “”)]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service1
{
SqlConnection con = new SqlConnection(“Data

Source=.\\SQLEXPRESS;AttachDbFilename=|DataDirectory|\\Database1.mdf;Integrated Security=True;User

Instance=True”);
[OperationContract]
public List<Emp>  GetAllEmp()
{
List<Emp> Emps=new List<Emp>();
con.Open();
SqlCommand cmd = new SqlCommand(“Select *from tblEmp”, con);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
Emp emp1 = new Emp();
emp1.Id = int.Parse(dr[“Id”].ToString());
emp1.EmpName = Convert.ToString(dr[“EmpName”]);
emp1.EmpAddress = Convert.ToString(dr[“EmpAddress”]);
Emps.Add(emp1);
}
con.Close();
return Emps;
}

}
}

Step4: Consume the WCF like this image

Step5: In silverlight page, drag and drop datagrid control and give some name like this

<data:DataGrid x:Name=”GridTest” Height=”150″ Width=”250″ Background=”LightGray”
RowBackground=”LightYellow” AlternatingRowBackground=”LightBlue”  />

Step6: add the namespace in codebehind file

using SilverlightApplication1.ServiceReference1;

Step7: write this code in code behind file and fill the datagrid

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using SilverlightApplication1.ServiceReference1;

namespace SilverlightApplication1
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
FillDataGrid();

}

private void FillDataGrid()
{
Service1Client client = new Service1Client();
client.GetAllEmpCompleted += new

EventHandler<GetAllEmpCompletedEventArgs>(client_GetAllEmpCompleted);
client.GetAllEmpAsync();

}

void client_GetAllEmpCompleted(object sender, GetAllEmpCompletedEventArgs e)
{
GridTest.ItemsSource = e.Result;

}
}
}

How to Change the color of gridview rows on basis of Click?


Step1: Write this javascript code in Default.aspx page

<script language=”javascript”>

function ChangeStyle(rowId, linkId)
{
switch (document.getElementById(linkId).innerHTML)
{
case “Select”:

document.getElementById(rowId).style.background = “#CCFFCC”;
document.getElementById(linkId).innerHTML = “DeSelect”;

break;

case “DeSelect”:

document.getElementById(rowId).style.background = “#FFFFFF”;
document.getElementById(linkId).innerHTML = “Select”;

break;
}

return false;
}

</script>

Step 2: Click on RowDataBound Event and write this code in code behind file

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
//refrence control inside gridview
LinkButton LinkButton1 = (LinkButton)e.Row.FindControl(“LinkButton1”);

//add onclick attributes to linkbutton
LinkButton1.Attributes.Add(“onclick”, “return ChangeStyle(‘” + e.Row.ClientID + “‘,'” + LinkButton1.ClientID + “‘)”);
}
}

Complete Html code is like this

<%@ Page Title=”” Language=”C#” MasterPageFile=”~/MasterPage.master” AutoEventWireup=”true” CodeFile=”Default2.aspx.cs” Inherits=”Default2″ %>

<asp:Content ID=”Content2″ ContentPlaceHolderID=”ContentPlaceHolder1″ Runat=”Server”>

<center>

<asp:GridView ID=”GridView1″ runat=”server” AutoGenerateColumns=”False”
onrowdatabound=”GridView1_RowDataBound” Width=”70%”>
<Columns>
<asp:TemplateField HeaderText=”Select”>
<ItemTemplate>
<asp:LinkButton ID=”LinkButton1″ runat=”server”>Select</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”Name”>
<ItemTemplate>
<asp:Label ID=”Label1″ runat=”server” Text='<%# Eval(“EmpName”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”Checkbox”>
<ItemTemplate>
<asp:CheckBox ID=”CheckBox1″ runat=”server” />
</ItemTemplate>
<ItemStyle HorizontalAlign=”Center” />
</asp:TemplateField>

</Columns>
</asp:GridView>
</center>

<script language=”javascript”>

function ChangeStyle(rowId, linkId)
{
switch (document.getElementById(linkId).innerHTML)
{
case “Select”:

document.getElementById(rowId).style.background = “#CCFFCC”;
document.getElementById(linkId).innerHTML = “DeSelect”;

break;

case “DeSelect”:

document.getElementById(rowId).style.background = “#FFFFFF”;
document.getElementById(linkId).innerHTML = “Select”;

break;
}

return false;
}

</script>

</asp:Content>

Complete Code behind is like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;

public partial class Default2 : System.Web.UI.Page
{
SqlConnection con = new SqlConnection(“Data Source=Test;Initial Catalog=Test;Integrated Security=True”);
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{

fillGrid();
}
}

protected void fillGrid()
{
SqlDataAdapter da = new SqlDataAdapter(“Select EmpName from tblEmp1”, con);
DataTable dt = new DataTable();
da.Fill(dt);
GridView1.DataSource = dt;
GridView1.DataBind();

}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
//refrence control inside gridview
LinkButton LinkButton1 = (LinkButton)e.Row.FindControl(“LinkButton1”);

//add onclick attributes to linkbutton
LinkButton1.Attributes.Add(“onclick”, “return ChangeStyle(‘” + e.Row.ClientID + “‘,'” + LinkButton1.ClientID + “‘)”);
}
}
}

how to display PopUp with in poup using Ajax?


Step1: Code for Default.aspx page

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”ModalPopUp.aspx.cs” Inherits=”ModalPopUp” %>

<%@ Register assembly=”AjaxControlToolkit” namespace=”AjaxControlToolkit” tagprefix=”cc1″ %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head runat=”server”>
<title></title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>

<asp:ScriptManager ID=”ScriptManager1″ runat=”server”/>

<cc1:ModalPopupExtender
ID=”ModalPopUpExtender”
runat=”server”
TargetControlID=”Button”
PopupControlID=”Panel1″
CancelControlID=”btnCancel” />

<cc1:ModalPopupExtender
ID=”ModalPopUpExtender1″
runat=”server”
TargetControlID=”Hidden1″
PopupControlID=”Panel2″
CancelControlID=”BtnCancel2″ />

<asp:Button
ID=”Button”
runat=”server”
Text=”Click Here”
onclick=”Button_Click” />

<br />

<asp:HiddenField ID=”Hidden1″ runat=”server” />
<br />

<asp:Panel ID=”Panel1″ BackColor=”Wheat”
runat=”server”
Height=”400px”
Width=”625px”
BorderColor=”blue”
BorderWidth=”10px”>

<asp:RadioButtonList
ID=”RadioButtonList1″
runat=”server”>

<asp:ListItem Value=”1″>Asp.net</asp:ListItem>

<asp:ListItem Value=”2″>C#</asp:ListItem>

<asp:ListItem Value=”3″>SQL Server</asp:ListItem>

</asp:RadioButtonList>

<br />

<asp:Button
ID=”btnCancel”
runat=”server”
Text=”Cancel” />

<asp:Button
ID=”Button1″
runat=”server”
Text=”ClickHere” onclick=”Button1_Click” />

</asp:Panel>

<asp:Panel ID=”Panel2″  BackColor=”AntiqueWhite”
runat=”server”
Height=”200px”
Width=”225px”
BorderColor=”blue”
BorderWidth=”10px”>

<br />
<b> This is the second popup</b><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
&nbsp;<asp:Button
ID=”BtnCancel2″
runat=”server”
Text=”Cancel” />

</asp:Panel>

</div>
</form>
</body>
</html>

Step2: Write this code in Code behind page

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class ModalPopUp : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button_Click(object sender, EventArgs e)
{
ModalPopUpExtender.Show();
}
protected void Button1_Click(object sender, EventArgs e)
{
ModalPopUpExtender.Show();
ModalPopUpExtender1.Show();
}
}

How to use Ajax ModalPopUpExtender control ?


Hi

Here is the simple steps to configure this control

Step 1: Take a ScriptManager ajax control

step 2: Take a ModalPopupExtender  ajax control

Step 3:Configure the ModalPopupExtender like this

<cc1:ModalPopupExtender
ID=”ModalPopUpExtender”
runat=”server”
TargetControlID=”Button”
PopupControlID=”Panel1″
CancelControlID=”btnCancel” />

The complete asp.net html page is like this

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”ModalPopUp.aspx.cs” Inherits=”ModalPopUp” %>

<%@ Register assembly=”AjaxControlToolkit” namespace=”AjaxControlToolkit” tagprefix=”cc1″ %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head runat=”server”>
<title></title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>

<asp:ScriptManager ID=”ScriptManager1″ runat=”server”/>

<cc1:ModalPopupExtender
ID=”ModalPopUpExtender”
runat=”server”
TargetControlID=”Button”
PopupControlID=”Panel1″
CancelControlID=”btnCancel” />

<asp:Button
ID=”Button”
runat=”server”
Text=”Click Here”
onclick=”Button_Click” />

<asp:Panel ID=”Panel1″
runat=”server”
Height=”100px”
Width=”125px”
BorderColor=”blue”
BorderWidth=”10px”>

<asp:RadioButtonList
ID=”RadioButtonList1″
runat=”server”>

<asp:ListItem Value=”1″>Asp.net</asp:ListItem>

<asp:ListItem Value=”2″>C#</asp:ListItem>

<asp:ListItem Value=”3″>SQL Server</asp:ListItem>

</asp:RadioButtonList>

<asp:Button
ID=”btnCancel”
runat=”server”
Text=”Cancel” />

</asp:Panel>

</div>
</form>
</body>
</html>

Now Compile the page. You will see page like this