asp.net dropdownlist - C#.NET and javascript_问答_开发者

asp.net dropdownlist - C#.NET and javascript

开发者 https://www.devze.com 2022-12-13 18:03 出处：网络

I have a drop down and a div right next to it. The text contained inside the div should be updated based on value selected in the dropdown.

I do NOT want to use AutoPostBack feature. 开发者_StackOverflow

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>

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 which 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)

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">

<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;
        }
    }
}