CODEWITHSUNDEEP
c#asp.netupdatepanel
Sebarry
Sebarry

Reputation: 1

UpdatePanel, Placeholder, User Control loaded by Ajax post

I can successfully add a user control dynamically using the following code.

ASPX:

<asp:PlaceHolder ID="PlaceHolder1" runat="server" />

Code Behind:

UserControl uc = (UserControl)Page.LoadControl
("~/App_Controls/Site/Player/PlayerProfile2.ascx");
PlaceHolder1.Controls.Add(uc);

Now I want to load the user in response to a button click. I have code that submits a form by doing an ajax post.

$(document).ready(function () {
    var options =
    {
        success: showResponse,
        url: "/Default.aspx",
        type: "post"
    };

    $('#btnClick').click(function () {
        $("form").ajaxSubmit(options);
        return false;
    });
});

function showResponse(responseText, statusText, xhr, $form) 
{
    alert(responseText);
}

<asp:Button ID="btnClick" ClientIDMode="Static" runat="server" Text="Click" />

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:PlaceHolder ID="PlaceHolder1" runat="server" />
<asp:Literal ID="litText" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>

I am a newbie to C#. When the placeholder or the literal are changed I w

Upvotes: 0

Views: 3141

Answers (2)

msigman
msigman

Reputation: 4524

Instead of using jQuery AJAX, I would use the built in ASP.NET AJAX; it will provide a simpler experience for you. http://weblogs.asp.net/sanjeevagarwal/archive/2008/07/22/Dynamically-create-ASP.NET-user-control-using-ASP.NET-Ajax-and-Web-Service.aspx. By moving the button inside the UpdatePanel, any PostBack that the button generates will be intercepted by the .NET framework and submitted as a partial postback (using AJAX). This should give you a solid starting point for how to achieve what you're after using the .NET AJAX style.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnClick" ClientIDMode="Static" runat="server" Text="Click" />
<asp:PlaceHolder ID="PlaceHolder1" runat="server" />
<asp:Literal ID="litText" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>

In the CodeBehind file, you can use IsPostBack to conditionally show or hide your user control.

However, if you'd prefer to stick with your current approach, this blog has a good example that's more complete than what I could type here: http://www.aspsnippets.com/Articles/Dynamically-load-and-display-ASPNet-UserControl-using-jQuery-AJAX-and-WebMethod.aspx

Upvotes: 2

Coltech
Coltech

Reputation: 1710

UserControls (ASCX) get attached to the page during server-side rendering and cannot be created with Javascript the way standard HTML elements can. I would suggest using a div containing standard HTML elements as opposed to a user control and using a Javascript library such as Jquery to create copies of this div when applicable.

Upvotes: 0

Related Questions