Solved

AJAX dropdownlist without refresh or updatepanels

Posted on 2008-10-30
10
1,597 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Copy/Clone an object. 9 29
XML & .net 5 40
Need to pass a connection through class/Method 1 39
Entity Framework 7 28
For those of you who don't follow the news, or just happen to live under rocks, Microsoft Research released a beta SDK (http://www.microsoft.com/en-us/download/details.aspx?id=27876) for the Xbox 360 Kinect. If you don't know what a Kinect is (http:…
A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
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…
Concerto provides fully managed cloud services and the expertise to provide an easy and reliable route to the cloud. Our best-in-class solutions help you address the toughest IT challenges, find new efficiencies and deliver the best application expe…

914 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

12 Experts available now in Live!

Get 1:1 Help Now