Friday, July 20, 2012

How to pass contextKey value dynamically for AutoCompleteExtender in ASP.Net


 Generally we use AJAX AutoCompleteExtender for a TextBox to show data from database through Webservice. Here I faced a problem that to set contextKey  value dyanamically from '.CS' file without fix it in AutoCompleteExtender's  property  that is  ContextKey="value" in design view.
  
Nb : before using this we should have appropriate AjaxControlToolkit.dll for our .Net version.




 Design Code:-
 

<body>
    <form id="form2" runat="server">
    <asp:ToolkitScriptManager runat="server">
        <Services>
            <asp:ServiceReference Path="~/WebService/WebService.asmx" />
        </Services>
    </asp:ToolkitScriptManager>
    <div>
        <fieldset style="height: 200px; width: 365px;">
            <table class="style1">
                <tr>
                    <td style="text-align: right">
                        <asp:Label ID="Label18" runat="server" Text="Designation"></asp:Label>
                    </td>
                    <td>
                        <asp:DropDownList ID="DropDownList1" runat="server" Height="22px" Width="142px" AutoPostBack="True"
                            OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                            <asp:ListItem>Select</asp:ListItem>
                            <asp:ListItem>Software Engineer</asp:ListItem>
                            <asp:ListItem>Designer</asp:ListItem>
                        </asp:DropDownList>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right">
                        <asp:Label ID="Label19" runat="server" Text="Employee"></asp:Label>
                    </td>
                    <td style="text-align: left">
                        <asp:TextBox ID="TxtEmployee" runat="server" autocomplete="off"></asp:TextBox>
                        <asp:AutoCompleteExtender ID="TxtEmployee_AutoCompleteExtender" runat="server" DelimiterCharacters=""
                            Enabled="True" ServicePath="~/WebService/WebService.asmx" ServiceMethod="GetEmployee"
                            CompletionInterval="100" MinimumPrefixLength="0" TargetControlID="TxtEmployee"
                            UseContextKey="true">
                        </asp:AutoCompleteExtender>
                    </td>
                </tr>
            </table>
        </fieldset>
    </div>
    </form>
</body>


  C#  Code:-




     private void SetContextKey()
        {

            AjaxControlToolkit.AutoCompleteExtender modal = (AjaxControlToolkit.AutoCompleteExtender)TxtEmployee.FindControl("TxtEmployee_AutoCompleteExtender");
            modal.ContextKey = DropDownList1.SelectedItem.ToString();// Any constant value
        }

        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            SetContextKey();
        }



  WebService Code :-




using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
            
/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService] // This line should Uncomment
public class WebService : System.Web.Services.WebService {

    public WebService () {

        //Uncomment the following line if using designed components
        //InitializeComponent();
    }

    [WebMethod]
    public string HelloWorld() {
        return "Hello World";
    }

    [WebMethod]
    public string[] GetEmployee(string prefixText,int count,string contextKey)
    {
        string sql = "Select * from emp_demo Where EmpName like '"+ prefixText +"%' and Designation='"+ contextKey +"' ";
        SqlDataAdapter da = new SqlDataAdapter(sql, ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString);   
        DataTable dt = new DataTable();
        da.Fill(dt);

        string[] country= new string[dt.Rows.Count];
        int i = 0;
        foreach (DataRow dr in dt.Rows)
        {
            country.SetValue(dr["EmpName"].ToString(), i);
                i++;
        }
        return country;
    }
 
}

Saturday, July 14, 2012

Accordian Pane Example in ASP.Net


     If our page contains many controls and the page does not look good. That time we have to take the AJAX  Accordion Pane  and our all controls should group wise.
 
     Before use of AJAX we must have "AjaxControlToolkit.dll"  and it should attached to our project. We can download the  "AjaxControlToolkit.dll" . 


  Steps: 1 to Add the  "AjaxControlToolkit.dll" . 
   
     Rirgt click on any Tab of  of ToolBox -> Add new Tab -> Rename the tab to 'Ajax Client-Tool Kit ' ->
Again Right click on this tab -> Choose Items -> Browse the location where the "AjaxControlToolkit.dll" has saved -> Ok


  Steps: 2
  

    Design the page like this 

   NB: After adding the Accordian Pane to our page the proporties and events of controls  should write by us in ASPX page. Double click on control  can not create event in ASPX page


    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AccordianPaneExample.aspx.cs"
    Inherits="Projects_Ajax_AccordianPaneExample" %>


<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
   <style type="text/css">
        .accordionContent
        {
            background-color: #CCFF66;
            border-color: -moz-use-text-color #2F4F4F #2F4F4F;
            border-right: 1px dashed #2F4F4F;
            border-style: none dashed dashed;
            border-width: medium 1px 1px;
            padding: 10px 5px 5px;
            width: 60%;
        }
        .accordionHeaderSelected
        {
            background-color: Orange;
            border: 1px solid #2F4F4F;
            color: white;
            cursor: pointer;
            font-family: Arial,Sans-Serif;
            font-size: 12px;
            font-weight: bold;
            margin-top: 5px;
            padding: 5px;
            width: 60%;
        }
        .accordionHeader
        {
            background-color:#669900;
            border: 1px solid #2F4F4F;
            color: white;
            cursor: pointer;
            font-family: Arial,Sans-Serif;
            font-size: 12px;
            font-weight: bold;
            margin-top: 5px;
            padding: 5px;
            width: 60%;
        }
        .href
        {
            color: White;
            font-weight: bold;
            text-decoration: none;
        }
        #Body1
        {
            font-weight: 700;
        }
    </style>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Accordion ID="Accordion1" runat="server" SelectedIndex="0" SuppressHeaderPostbacks="false"
                AutoSize="None" RequireOpenedPane="false" FadeTransitions="true" TransitionDuration="250" HeaderCssClass="accordionHeader" 
                ContentCssClass="accordionContent"  FramesPerSecond="40">
                <Panes>
                    <asp:AccordionPane ID="Acc1" runat="server">
                        <Header>
                            Personal Information
                        </Header>
                        <Content>
                            <table class="style1">
                               
                                <tr>
                                    <td>
                                        <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
                                        &nbsp;
                                    </td>
                                    <td>
                                        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                                        &nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td width="40%">
                                        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                                        &nbsp;
                                    </td>
                                    <td width="60%">
                                        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                                        &nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
                                        &nbsp;
                                    </td>
                                    <td>
                                        <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
                                        &nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
                                        &nbsp;
                                    </td>
                                    <td>
                                        <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
                                        &nbsp;
                                    </td>
                                </tr>
                            </table>
                        </Content>
                    </asp:AccordionPane>
                    <asp:AccordionPane ID="AccordionPane1" runat="server">
                     <Header>
                            Address Details
                        </Header>
                        <Content>
                            <table class="style1">
                               
                                <tr>
                                    <td>
                                        <asp:Label ID="Label5" runat="server" Text="Label"></asp:Label>
                                        &nbsp;
                                    </td>
                                    <td>
                                        <asp:TextBox ID="TextBox7" runat="server"></asp:TextBox>
                                        &nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td width="40%">
                                        <asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
                                        &nbsp;
                                    </td>
                                    <td width="60%">
                                        <asp:TextBox ID="TextBox8" runat="server"></asp:TextBox>
                                        &nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Label ID="Label7" runat="server" Text="Label"></asp:Label>
                                        &nbsp;
                                    </td>
                                    <td>
                                        <asp:TextBox ID="TextBox9" runat="server"></asp:TextBox>
                                        &nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Label ID="Label8" runat="server" Text="Label"></asp:Label>
                                        &nbsp;
                                    </td>
                                    <td>
                                        <asp:TextBox ID="TextBox10" runat="server"></asp:TextBox>
                                        &nbsp;
                                    </td>
                                </tr>
                            </table>
                        </Content>
                    </asp:AccordionPane>
                </Panes>
            </asp:Accordion>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>



   

Monday, July 9, 2012

How to work File Upload Control inside Update panel in AJAX and Accordian Pane with Master Page


    Generally we use master page in our project and as it is a template we take common controls inside it. if we are using AJAX then we take update panel in master page. Or we can take update panel in our page individually. Now the problem is some controls are not work. Ex: FileUpload control doesnot work .

                if (FileUpDigitalSignature.HasFile)
                {
                    newCompInfo.UpDigitalSignature = Path.GetFileName(FileUpDigitalSignature.FileName);
                    FileUpArticle.SaveAs(Server.MapPath("~/images/") + newCompInfo.UpDigitalSignature);
                    StatusLabel.Text = "Upload status: File uploaded!";                
                }

 so here we have to control the flow through  a Trigger

          #region Method to Add Trigger to UpdatePanel
        public void AddTrigger()
        {
            UpdatePanelControlTrigger trigger = new PostBackTrigger();
            trigger.ControlID =  BtnAttachedSave .UniqueID;
            UpdatePanel panel = (UpdatePanel)this.Page.Master.FindControl("UpdatePanel1");
            panel.Triggers.Add(trigger);
        }
        #endregion

Now call this method in the page load event

       protected void Page_Load(object sender, EventArgs e)
        {

             AddTrigger();
       //or
              ScriptManager.GetCurrent(this).RegisterPostBackControl(BtnAttachedSave);
            if (IsPostBack == false)
            {
             
            }

        }


After using this trigger the file upload control will work.