Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1616
  • Last Modified:

AJAX dropdownlist without refresh or updatepanels

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
clintfield
Asked:
clintfield
  • 5
  • 4
1 Solution
 
apeterCommented:
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
 
clintfieldAuthor Commented:
Hmmm...let me play with this some and see what happens.  I'll post back here in a couple of hours.
0
 
clintfieldAuthor Commented:
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
Industry Leaders: 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!

 
apeterCommented:
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
 
clintfieldAuthor Commented:
Ok.  Thanks.  Give me some time to experiment with the concept.
0
 
clintfieldAuthor Commented:
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
 
apeterCommented:
Kindly let me know which step Number is giving problem ? We can then elborate on that.
0
 
apeterCommented:
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
 
clintfieldAuthor Commented:
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!

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now