Solved

AJAX dropdownlist without refresh or updatepanels

Posted on 2008-10-30
10
1,611 Views
Last Modified: 2013-12-17
I have a page where a person can use a dropdownlist to choose employees.  If the employee is not found in the dropdownlist, then I provide a popupbox where they can add the new employees information.  After they close this box, I would like the new employee data to show up in the dropdownlist without the page refreshing.  Im using Visual Studio 2005, but my company has not approved any of the AJAX toolkit stuff so I cant use update panels for this.  What is the easiest way to do this considering my limitations?
0
Comment
Question by:clintfield
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
10 Comments
 
LVL 25

Accepted Solution

by:
apeter earned 500 total points
ID: 22844890
One way you can do this is using a "client callback".

The following code example is in two parts. The first part of the example shows an ASP.NET Web page (the .aspx page). The second part shows the corresponding code-behind file (the .aspx.cs file).


<%@ Page Language="C#" AutoEventWireup="true" 
  CodeFile="ClientCallback.aspx.cs" Inherits="ClientCallback" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 
  1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
  <title>Client Callback Example</title>
  <script type="text/ecmascript">
    function LookUpStock()
    {
        var lb = document.getElementById("ListBox1");
        var product = lb.options[lb.selectedIndex].text;
        CallServer(product, "");
    }
 
    function ReceiveServerData(rValue)
    {   
        document.getElementById("ResultsSpan").innerHTML = rValue;
 
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <asp:ListBox ID="ListBox1" Runat="server"></asp:ListBox>
      <br />
      <br />
      <button type="Button" onclick="LookUpStock()">Look Up Stock</button>
      <br />
      <br />
      Items in stock: <span id="ResultsSpan" runat="server"></span>
      <br />
    </div>
  </form>
</body>
</html>
 
 
<<<<<<<<<<<<<<< CODE BEHIND >>>>>>>>>>>>>>>>>>>>>>>>
 
 
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
 
public partial class ClientCallback : System.Web.UI.Page,
     System.Web.UI.ICallbackEventHandler
{
    protected System.Collections.Specialized.ListDictionary catalog;
    protected String returnValue;
    protected void Page_Load(object sender, EventArgs e)
    {
        String cbReference =
            Page.ClientScript.GetCallbackEventReference(this,
            "arg", "ReceiveServerData", "context");
        String callbackScript;
        callbackScript = "function CallServer(arg, context)" +
            "{ " + cbReference + ";}";
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
            "CallServer", callbackScript, true);
 
        catalog = new System.Collections.Specialized.ListDictionary();
        catalog.Add("monitor", 12);
        catalog.Add("laptop", 10);
        catalog.Add("keyboard", 23);
        catalog.Add("mouse", 17);
 
        ListBox1.DataSource = catalog;
        ListBox1.DataTextField = "key";
        ListBox1.DataBind();
 
    }
 
    public void RaiseCallbackEvent(String eventArgument)
    {
        if (catalog[eventArgument] == null)
        {
            returnValue = "-1";
        }
        else
        {
            returnValue = catalog[eventArgument].ToString();
        }
    }
    public String GetCallbackResult()
    {
        return returnValue;
    }
}

Open in new window

0
 
LVL 1

Author Comment

by:clintfield
ID: 22849013
Hmmm...let me play with this some and see what happens.  I'll post back here in a couple of hours.
0
 
LVL 1

Author Comment

by:clintfield
ID: 22849121
apeter:
I like the example...but Im a little slow as to how to adapt it for my example.  My user will have a popup where they enter new employee information.  When they click the save button or close the pop up, how do I force the opener window to modify its contents without a refresh?  Ive done similar stuff in javascript where the pop up can refresh the opener, but how do I get the pop up to refill the dropdownlist on the opener?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 25

Expert Comment

by:apeter
ID: 22850765
1. So on close of the the pop up window, u can call the parent javascript fuction "LookUpStock()" as in example.
2. This will invoke the server side code behind method "RaiseCallbackEvent". Here you set the return value to new employee name.
3. Next framework invokes "GetCallbackResult" to send result to javascript funtion "ReceiveServerData", and here you to have populate the drop down.
3. Methods(RaiseCallbackEvent, GetCallbackResult) in code behind are the methods of interface "ICallbackEventHandler" that you have implement since you have inhertied it.

Below link has many more details.
http://www.codeproject.com/KB/aspnet/clientcallback.aspx

Let me know if you need any more info.
0
 
LVL 1

Author Comment

by:clintfield
ID: 22850817
Ok.  Thanks.  Give me some time to experiment with the concept.
0
 
LVL 1

Author Comment

by:clintfield
ID: 22870297
apeter:
I like this concept, but Im having some trouble with populating a dropdownlist.  Could you possibly give an example where a textbox field has its contents dynamically added to the dropdown contents?
Sorry for being obtuse, but this is pretty new to me.  I like the way it works though and it seems more powerful than using regular AJAX xmlhttp stuff.
0
 
LVL 25

Expert Comment

by:apeter
ID: 22870995
Kindly let me know which step Number is giving problem ? We can then elborate on that.
0
 
LVL 25

Expert Comment

by:apeter
ID: 22871362
This is what i tried with the sample.
Take a value from one textbox and assign to another textbox(you can upgrade to dropdown)  by clicking a button.

Let me know further details.
ASPX File: Code behind is below
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApp35._Default" %>
 
<!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>Untitled Page</title>
    <script language="javascript">
        //set the destination texbox value.  
        function ServerFeeding(args,  context)
           {
             var s = document.getElementById('DestTextBox');
             s.value = args
           }
           //calls the server side method
           function callServer()
            {
              args = document.getElementById('SrcTextBox').value;
              callBack (args,"ClientContext");
              return false
            }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="CallDupSvc" runat="server" Text="Call Dup Svc" 
            onclick="CallDupSvc_Click" />
        <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>
    </div>
    <asp:Label ID="Label1" runat="server" Text="Enter name"></asp:Label>
    <asp:TextBox ID="SrcTextBox" runat="server"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="Move Src to Dest" OnClientClick="return callServer();" />
    <asp:TextBox ID="DestTextBox" runat="server"></asp:TextBox>
    </form>
</body>
</html>
 
--------------CODE BEHIND------------
public partial class _Default : System.Web.UI.Page, ICallbackEventHandler
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            
            string callBackInitiater = Page.ClientScript.GetCallbackEventReference(this, "args", "ServerFeeding", "context");
 
            
            string Jsblock = "function callBack(args, context){" + callBackInitiater + "}";
 
            
            Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
                                 "callBack", Jsblock, true);
 
 
        }
 
 
        #region ICallbackEventHandler Members
        //calls the event handler in the javascript
        public string GetCallbackResult()
        {
            //the value to be sent is set in below method
            return _enteredValue;
        }
        string _enteredValue;
        //this funtion is called first with the valued enter there.
        public void RaiseCallbackEvent(string eventArgument)
        {
            //update to database 
            //set the value which has to be sent to the eventhandler method in javascript
            _enteredValue = eventArgument as string;
        }
 
        #endregion
    }

Open in new window

0
 
LVL 1

Author Comment

by:clintfield
ID: 22875387
Id really like an example with a dropdownlist if possible.  I appreciate the direction youve given, but some interaction with a db call and a dropdown would be very helpful.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
This article shows how to deploy dynamic backgrounds to computers depending on the aspect ratio of display
In this video we outline the Physical Segments view of NetCrunch network monitor. By following this brief how-to video, you will be able to learn how NetCrunch visualizes your network, how granular is the information collected, as well as where to f…
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…

724 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question