使用 C# 和 jQuery 在 ASP.NET 中动态加载用户控件后事件不会触发

Question

我正在使用 jQuery 在 aspx 页面中动态加载 UserControl。但是我在UserControl 中触发按钮（以及下拉列表）的单击事件时遇到了问题。它不会着火。

我想在 ascx.cs 文件中编写插入/更新代码（在按钮单击事件中）。 它可能有国家城市选择等等（我们可能必须去服务器获取城市信息）

请在下面找到我的 aspx、aspx.cs、ascx 和 ascx.cs 文件代码。

默认.aspx

<%@ Page Title="Home Page" Language="C#" MasterPageFile="Site.master" AutoEventWireup="true"
    Debug="true" EnableEventValidation="true" CodeFile="LoadControl.aspx.cs" Inherits="LoadControl" %>

<%@ Register Src="UserControls/Login.ascx" TagName="Login"
    TagPrefix="uc3" %>
<%@ Register Src="UserControls/PersonelInfo.ascx" TagName="PersonelInfo" TagPrefix="uc4" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

    <script type="text/javascript" src="js/blockUI.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#Button1').click(function() {
                ControlLoad("PersonelInfo.ascx");
            });
            $('#Button2').click(function() {
                ControlLoad("Login.ascx");
            });
        });
        function ControlLoad(Name) {
            $.blockUI({ message: '<h1> Processing...</h1><img src="img/loader.gif" />' });
            $.ajax({
                type: "POST",
                url: "LoadControl.aspx/Result",
                data: "{ controlName:'" + "UserControls/" + Name + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(response) {
                    $.unblockUI();                
                    $("#result").fadeOut("slow", function() { $(this).html(response.d) }).fadeIn("slow");
                },
                error: function(msg) {
                    $.unblockUI();
                    $('#result').html(msg.d);
                }
            });
        }

    </script>

    <script type="text/javascript">

        $(document).ready(function() {

            $("#loaderGif1").hide();
            $("#loaderGif2").hide();
            $("#ddl_City").html("<option value=''>Select City </option>");
            $("#ddl_Town").html("<option value=''>Select Town </option>");
            $("#ddl_City").change(function() {
                CityChange();
                }
            })
            $("#ddl_Town").change(function() {
                Change();
             })
        });


        function CityChange() {

            try {
                $("#loaderGif1").show();
                $("#ddl_Town").attr("disabled", "true").html("<option value=''> Select City</option>");
                $("#ddl_Town").attr("disabled", "true").html("<option value=''>Select Town</option>");
                var ilID = $("#ddl_City").val();
                var pagePath = window.location.pathname;
                $.ajax({
                    type: "POST",
                    url: pagePath + "/CityChange",
                    contentType: "application/json; charset=utf-8",
                    data: '{CityID:' + CityID + '}',
                    dataType: "json",
                    success: onSucceeded1,
                    error: onFailed
                });
                alert("succed");
                return false;
            }
            catch (e) {
                alert(e);
            }
        }

        function onSucceeded1(result) {
            $("#loaderGif1").hide();
            $("#ddl_City").removeAttr("disabled").html(result.d);
            $("#ddl_Town").removeAttr("disabled");
        }

        function onFailed(result) {
            alert(result.d);
        }


        function TownChange() {
            $("#loaderGif2").show();
            $("#ddl_Town").attr("disabled", "true").html("<option value=''>Select Town</option>");
            var CityID = $("#ddl_Town").val();
            var pagePath = window.location.pathname;
            $.ajax({
                type: "POST",
                url: pagePath + "/TownChange",
                contentType: "application/json; charset=utf-8",
                data: '{TownID:' + TownID + '}',
                dataType: "json",
                success: onSucceeded2,
                error: onFailed
            });
            alert("succed");
            return false;
        }
        function onSucceeded2(result) {
            $("#loaderGif2").hide();
            $("#ddl_Town").removeAttr("disabled").html(result.d);
        }
    </script>

</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>

    </h2>
    <p>  
<input type="button" id="Button2" value="Login" />
        <input type="button" id="Button1" value="Personel Info" />
        <input type="button" id="Button2" value="Login" />
.
.
.
.

        <div id="result">
        </div>
        </p>
</asp:Content>

general.ascx

[WebMethod]
    public static string CityChange(string CityID)

我想我需要在某处绑定按钮单击事件。 （可能是我错了）但不知道怎么做。

Answer 1

但您并没有动态加载用户控件。您正在从服务器获取呈现的标记，并且回调函数将其附加到某处。

这不是推荐、建议、标准和/或受支持的 ASP.NET 方法。

如果 ASP.NET 控件之前添加到控件的集合并正确注册，则这些控件将触发事件，因此引擎将呈现适当的 JavaScript 以处理客户端事件。

换句话说，您需要考虑另一种方法。也许是更新面板？我不喜欢这样，但有时可能有助于快速解决一些问题，也许这就是你要找的：

• http://msdn.microsoft.com/en-us/library/system.web.ui.updatepanel.aspx