This is a migrated thread and some comments may be shown as answers.

How to: Fire Server-Side code via onclientselectedindexchanged

10 Answers 553 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

DaveP asked on 19 Feb 2010, 08:29 PM

When the index changes on the RadComboBox, how can I cause code to fire on the server?

I can do this via a PostBack (and the SelectedIndexChanged event) but that does not take advantage of AJAX.

Specifically, I want:

1. When the user changes items in the combobox, fire a sub on the server.
2. The sub on the server generates some text and places it in a <div> alread in the page.

Currently, I can do this via a "Submit" button that must be clicked once the user selects an item in the combobox.

However, a request has been made to do away with the submit button and just update the <div> as soon as the combobox value changes (which seems reasonable).

I assume I need to hook up the onclientselectedindexchanged value - but how can I reference (and cause to fire) a server-side subroutine?

Thanks-
Dave

10 Answers, 1 is accepted

answered on 20 Feb 2010, 03:05 AM

Most efficient way I've found is using the RadXmlHttpPanel :)

    
            function OnClientSelectedIndexChanged(sender, args) 
        
            { 
        
             var item = args.get_item(); 
        
             var panel = $find("RadXmlHttpPanel1"); 
        
             panel.set_value(item.get_text()); 
        
            }

So I think the RadXmlHttpPanel renders itself as a div anyway, so this would post the combo value back to the server (or webservice) and then the content inside the panel would be updated with whatever you want...it's SUPER fast too :)

http://demos.telerik.com/aspnet-ajax/xmlhttppanel/examples/windowinxmlhttppanel/defaultcs.aspx

Steve

answered on 08 Mar 2010, 04:58 PM

Ok, all I have right now is a rad combo on a page (autopostback is false):

    
            <telerik:RadComboBox ID="RadComboBox1" runat="server" Skin="Web20" OnClientSelectedIndexChanged="RatingChange">  
        
            <Items> 
        
            <telerik:RadComboBoxItem runat="server" Text="Rating: 0" Value="0" /> 
        
            <telerik:RadComboBoxItem runat="server" Text="Rating: 1" Value="1" /> 
        
            <telerik:RadComboBoxItem runat="server" Text="Rating: 2" Value="2" /> 
        
            <telerik:RadComboBoxItem runat="server" Text="Rating: 3" Value="3" /> 
        
            </Items> 
        
            </telerik:RadComboBox>

In the RatingChange event:

    
            <script language="javascript" type="text/javascript">  
        
            function RatingChange(sender, eventArgs)  
        
            {  
        
            var item = eventArgs.get_item();  
        
            alert("You selected " + item.get_text());  
        
            }  
        
            </script>

On the server, I'd like to fire an event (let's just call it MyRatingChangeEvent) and I'd like to receive the value selected in the combo box so I can process it. Let's forget about showing anything back on the client for now.

How can I cause a server-side event to fire via Ajax?

Accepted

answered on 08 Mar 2010, 05:23 PM

Ok, here's an example of BOTH methods using the XmlHttpPanel...which means they're the fastest methods. In my situation, the webservice method fires about a second faster than the servicerequest version.

The other method would be to set the RadCombo to autopostback=true (with a server selectedindexchanged event), and put in a RadAjaxManager and link the combo to whatever control you want the results to go to. The reason I didnt suggest that method is that it should fire a full postback where the below methods just call the single method to return some data (faster)

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="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></title> 
        
                <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" /> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                    <Scripts> 
        
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
        
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
        
                    </Scripts> 
        
                </telerik:RadScriptManager> 
        
                <div> 
        
                    <telerik:RadComboBox ID="RadComboBox1" runat="server" Skin="Web20" OnClientSelectedIndexChanged="RatingChange">   
        
                        <Items>  
        
                            <telerik:RadComboBoxItem runat="server" Text="Rating: 0" Value="0" />  
        
                            <telerik:RadComboBoxItem runat="server" Text="Rating: 1" Value="1" />  
        
                            <telerik:RadComboBoxItem runat="server" Text="Rating: 2" Value="2" />  
        
                            <telerik:RadComboBoxItem runat="server" Text="Rating: 3" Value="3" />  
        
                        </Items>  
        
                    </telerik:RadComboBox>  
        
                    <br /> 
        
                    <telerik:RadXmlHttpPanel ID="serverResultsPanel" runat="server" onservicerequest="resultsPanel_ServiceRequest"> 
        
                        <asp:Label ID="resultsLabel" runat="server" /> 
        
                    </telerik:RadXmlHttpPanel> 
        
                    <br /> 
        
                    <telerik:RadXmlHttpPanel ID="webServiceResultsPanel" runat="server" WebMethodPath="WebService.asmx" WebMethodName="HelloWorld"> 
        
                    </telerik:RadXmlHttpPanel> 
        
                </div> 
        
                <script type="text/javascript"> 
        
                    function RatingChange(sender, args) { 
        
                        var panel1 = $find('<%= serverResultsPanel.ClientID %>'); 
        
                        var panel2 = $find('<%= webServiceResultsPanel.ClientID %>'); 
        
                        var text = args.get_item().get_text(); 
        
                        panel1.set_value(text); 
        
                        panel2.set_value(text); 
        
                    } 
        
                </script> 
        
                </form> 
        
            </body> 
        
            </html>

CODE BEHIND

    
            using System; 
        
            using System.Web; 
        
            using System.Web.UI; 
        
            using System.Web.UI.WebControls; 
        
            using System.Data; 
        
            using System.Configuration; 
        
            using System.Web.Security; 
        
            using System.Web.UI.WebControls.WebParts; 
        
            using System.Web.UI.HtmlControls; 
        
            using Telerik.Web.UI; 
        
            public partial class Default : System.Web.UI.Page  
        
            { 
        
                protected void Page_Load(object sender, EventArgs e) 
        
                { 
        
                } 
        
                protected void resultsPanel_ServiceRequest(object sender, RadXmlHttpPanelEventArgs e) { 
        
                    resultsLabel.Text = "This is the value sent back from the Partial postback: " + e.Value; 
        
                } 
        
            }

WEB SERVICE CODE IN APP_CODE

    
            using System; 
        
            using System.Collections.Generic; 
        
            using System.Linq; 
        
            using System.Web; 
        
            using System.Web.Services; 
        
            /// <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] 
        
            public class WebService : System.Web.Services.WebService { 
        
                [WebMethod] 
        
                public string HelloWorld(object context) { 
        
                    IDictionary<string, object> contextDictionary = (IDictionary<string, object>)context; 
        
                    string passedValue = ((string)contextDictionary["Value"]); 
        
                    return "This is the value sent back from the webservice: " + passedValue; 
        
                } 
        
            }

answered on 09 Mar 2010, 07:05 PM

If you want performance, go with webservices, fire the value up to the service and let it handle the data...skip the postbacks, it adds lag to the site! :)

So now the RadXmlHttpPanel obviously is what i'd recomment becasue of the ease of implimentation and the great clientside functions...however you can do the same thing with the embedded jQuery...here's http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/an example

The RadXmlHttpPanel really isnt adding much overhead to a page, and it's super easy to use! You don't NEED to have it return data...

answered on 11 Mar 2010, 02:19 PM

Hi ,

As I understand you are trying to perform asynchronous request to the server and after that to update content on the page upon results of this request.

May I suggest you one very simple way to achieve this?
You can use AjaxManager to ajaxify the controls and perform asynchronous postback.

Simply handle OnClientSelectedIndexChanged event of the RadComboBox and raise an AjaxRequest through AjaxManager, passing the selected text as event argument.

<script language="javascript" type="text/javascript">

function OnClientSelectedIndexChanged(sender, eventArgs) {

var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");

var item = eventArgs.get_item();

ajaxManager.ajaxRequest(item.get_text());

}

</script>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

<telerik:RadAjaxManager ID="RadAjaxManager1"

runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="lblSelectedItem">

</telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadComboBox ID="RadComboBox1" runat="server"

EnableLoadOnDemand="true"

OnItemsRequested="RadComboBox1_ItemsRequested"

OnClientSelectedIndexChanged="OnClientSelectedIndexChanged">

</telerik:RadComboBox>

<asp:Label ID="lblSelectedItem" runat="server"></asp:Label>

</div>

</form>

</body>

Kind regards,
Kalina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.