ansaurus

Question

asp.net dropdownlist - C#.NET and javascript

Answer 1

A:

Updated based on comments:

Here's a sample page on using an UpdatePanel to do what you need to do. Please keep in mind though that there is a full postback happening, even though it is transparent to the user.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UpdatePanelMadness._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:DropDownList ID="ColorsDropDownList" runat="server" AutoPostBack="true" 
                    onselectedindexchanged="ColorsDropDownList_SelectedIndexChanged">
                    <asp:ListItem Text="Red" Value="Red" />
                    <asp:ListItem Text="Green" Value="Green" />
                    <asp:ListItem Text="Blue" Value="Blue" />
                </asp:DropDownList>
                <div id="ColorDiv" runat="server">
                    <p>
                        Hello World!
                    </p>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

code behind:

namespace UpdatePanelMadness
{
    using System;

    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }

        protected void ColorsDropDownList_SelectedIndexChanged(object sender, EventArgs e)
        {
            ColorDiv.InnerText = this.ColorsDropDownList.SelectedValue;
        }
    }
}

Aaron Daniels 2009-12-08 22:13:17

can I make javascript to call my C# function though? So like maybe inside UpdateMyDiv, I call that C# funciton and pass the selected value to it? Do you have any sample code for that? How do I refer to the selectedvalue inside the UpdateMyDiv function?

progtick 2009-12-08 22:18:15

You C# function will execute on the web server, and therefore requires a postback. If you want to appear as if you're not posting back, then you can use an UpdatePanel. Be aware though that a full postback is occurring, even though it doesn't appear to be from the user's standpoint.

Aaron Daniels 2009-12-08 22:25:39

Answer 2

+2 A:

Use OnChange client side event of the dropdownlist control. Here is a sample that updates a div's inner text with the selected value of the dropdown list :

<asp:DropDownList runat="server" ID="myDDL" 
  OnChange="document.getElementById('myDiv').innerText=this.value;">
</asp:DropDownList>
<div id="myDiv"></div>

Canavar 2009-12-08 22:14:04

I need to call a C# function though, but through javascript so that I do not have to use AutoPostBack feature.

progtick 2009-12-08 22:19:09

You should use an Ajax library or an UpdatePanel.

Canavar 2009-12-08 22:34:17

Answer 3

A:

As people have said, you cannot access the C# codebehind code without performing a postback.

One way of accomplishing what you want is to use PageMethods. This is the Microsoft idiom for accomplishing this but there are lots of other Ajax libraries that will do it.

Provide a static method in your codebehind that is what will get called form your dropdownlist OnChange event.

[WebMethod]
public static string MyMethod()
{
    // Your code goes here
    return "The text for the div"    
}

You then call this PageMethod from your .aspx page:

You need to add a scriptmanager (after the form tag)

<asp:ScriptManager ID="scriptmanager1" EnablePageMethods="true" EnablePartialRendering="true" runat="server" ></asp:ScriptManager>

Then in the OnChange event (or a function called from it) you have:

<asp:DropDownList id="ddl" runat="server" OnChange="PageMethods.MyMethod(OnComplete);" />

Where OnComplete is a javascript function that handlers the PageMethod response:

<script language="javascript">
    function OnComplete(result, userContext, methodName) {
        document.getElementById(yourDivId').innerText=result;
    }
</script>

You can also have a paramaterised webmethod if needed:

[WebMethod]
public static string MyMethod(string myNeatParam)
{
    // Your code goes here
    return "The text for the div"    
}

And call it with:

PageMethods.MyMethod('SomeValue', OnComplete)

David Hall 2009-12-08 22:47:34

ansaurus

tags:

views:

answers:

asp.net dropdownlist - C#.NET and javascript

related questions