Events not fire after loading usercontrols dynamically in ASP.NET with C# and jQuery

Question

I am loading UserControl Dynamically in aspx page by using jQuery. But I am facing problem while firing a click event of button (as well as dropdownlist) within the UserControl. It does not get fire.

I want to write insert/upadate code, in ascx.cs file (on button click event). It may have Country City selection so on (we have to go server to get city info maybe )

Please find below herewith my aspx, aspx.cs, ascx and ascx.cs file code.

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)

I think I need to bind button click event somewhere. (May be I am wrong) But don't know how.

Answer 1

But you're not dynamically loading user controls. You're getting the rendered markup from the server and callback function appends it somewhere.

This isn't a recommended, suggested, standard and/or supported ASP.NET approach.

ASP.NET controls would fire events if these are previously added to controls' collection and properly registered so engine will render the appropiate JavaScript to handle client-side events.

In other words, you'll need to think another approach. Maybe an update panel? I don't like that but sometimes could be useful in order to quickly solve some problems, and maybe this is what you're looking for:

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