ASCX结果调用在ASPX中找到的javascript

Question

I have a user control (MyListSelect.ascx) that just has a list of radio buttons...

<%@ Control Language="C#" %>
<select>
    <option disabled selected>Select Options</option>
    <option>
        option 1
    </option>
    <option>
        option 2
    </option>
</select>

My ASPX page has:

<%@Register Src="~/MylistSelect.ascx" 
            TagName="listSelect" 
            TagPrefix="ListControl" %> 

<ListControl:listSelect runat="server" />

This displays in my ASPX a dropdown menu (woo hoo);

I want to be able to (form the ASPX) call a javascript function based on the selected index change event for the dropdown since the menu item selected will have different functionality in different pages. I dont' want to define all possible functionality in the ASCX.

Any suggestions? lso, Why does <ListControl:listSelect runat="server" /> have to runat server? is there a way around this too?

Answer 1

It must be runat=server because user controls are special controls processed by the .net engine on server side. An ASP.NET User Control doesn't make any sense on client side, it needs a "translation" before be sent to client.

In order to respond to selected index change event first you'll need to assign an id or a css class to the select so you can identify it more accurately trough a jQuery selector (assuming you want to use jQuery since you added it to question tags).

Something like this should do the trick

HTML

<select id="mySelect">
    <option disabled selected>Select Options</option>
    <option>
        option 1
    </option>
    <option>
        option 2
    </option>
</select>

JAVASCRIPT

// Shorthand for $( document ).ready()
$(function() {
    $('#mySelect').change(function(){
         // your logic when index changed here
    });
});

Answer 2

First, change your select to this:

<select onchange="yourJSFunction();">

When you use the control inside the page you'll also provide the yourJSFunction :

<script type="text/javascript">
    function yourJSFunction() {
        alert("yourJSFunction 1");
    }
</script>

<ListControl:listSelect runat="server" />

In another page:

<script type="text/javascript">
    function yourJSFunction() {
        alert("yourJSFunction 2");
    }
</script>

<ListControl:listSelect runat="server" />