Solved

AJAX dropdownlist without refresh or updatepanels

Posted on 2008-10-30
10
1,590 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
  • 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
 
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

In my previous two articles we discussed Binary Serialization (http://www.experts-exchange.com/A_4362.html) and XML Serialization (http://www.experts-exchange.com/A_4425.html). In this article we will try to know more about SOAP (Simple Object Acces…
Today I had a very interesting conundrum that had to get solved quickly. Needless to say, it wasn't resolved quickly because when we needed it we were very rushed, but as soon as the conference call was over and I took a step back I saw the correct …
Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, Just open a new email message.  In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…
Here's a very brief overview of the methods PRTG Network Monitor (https://www.paessler.com/prtg) offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…

758 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now