События не запускаются после динамической загрузки пользовательских элементов управления в ASP.NET с C # и jQuery

Question

Я загружаю UserControl Динамически в aspx-странице с помощью jQuery.Но я сталкиваюсь с проблемой при запуске события нажатия кнопки (а также раскрывающегося списка) в пределах UserControl.Он не срабатывает.

Я хочу написать код вставки / обновления в файле ascx.cs (по событию нажатия кнопки).Он может иметь выбор страны города и т. Д. (Возможно, мы должны пойти на сервер, чтобы получить информацию о городе)

Ниже приведен код моего файла aspx, aspx.cs, ascx и ascx.cs.* Default.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