UpdatePanel, Placeholder, User Control loaded by Ajax post - c#

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

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

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.

Related

Could not find UpdatePanel with ID on page postback

I have below structure in my asp.net application.
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id="overlay"></div>
<asp:Panel ID="pnlMain" runat="server" Visible="true">
<asp:UpdatePanel ID="upProfile" runat="server" UpdateMode="Always">
<ContentTemplate>
<div>
<table>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="upAttachment" runat="server" UpdateMode="Always">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:Panel ID="pnlSuccessMessage" runat="server" >
<asp:Label ID="lblSuccessMessage" runat="server"></asp:Label>
</asp:Panel>
I have different textfields and dropdowns in the table of upProfile updatepanel and file upload control in upAttachment updatepanel. Now when I select one radio from the same update panel, I am getting below error and the upAttachment does not show up on page.
Uncaught Error: Sys.InvalidOperationException: Could not find UpdatePanel with ID 'MainContent_upAttachment'. If it is being updated dynamically then it must be inside another UpdatePanel.
I have searched a lot and tried below different things, but still it is not working
1. Set the upAttachment UpdateMode to Conditional.
- In this case, it does not throw error, but the file upload control which is inside that updatepanel, it does not show up
2. Place the upAttachment updatepanel inside another updatepanel, but that too is not working.
I don't know what to do in this case. Can anyone help me on this?

How to get current time of an html video in c# codebehind?

I have added video control in ASP.NET page.
<video controls id="movie" width="610" height="344" runat="server" preload="">
</video>
Javascript version is below:
var v = $("#<%=movie.ClientID%>");
var video = v.get()[0];
I can get current time with below line in Javascript.
video.currentTime
How can I get it from code behind?
You need to get it using Javascript and submit it to the codebehind:
$.get("passVideoTime.aspx?time=" + video.currentTime);
Or using a postback:
<asp:UpdatePanel runat="server" ID="UpdatePanel">
<ContentTemplate>
<asp:HiddenField Id="VideoTime" runat="server"/>
<asp:Timer runat="server" Enabled="true" Interval="1000" ID="Timer" />
</ContentTemplate>
</asp:UpdatePanel>
<script>
$('form').submit(function () {
$('#<%= VideoTime.ClientId %>').val(video.currentTime);
return true;
});
</script>
Edit: the postback example does not really work, because a postback does not cause a form.submit. It is not so easy to update something just before the updatepanel is updated.

Not using asp listbox well

All I wish to do is simply click a button and the text in a textbox is automatically added as an item in the listbox. Shouldn't this be straight forward? Whilst debugging, the item is added and I can see the text by watching ListBox1.Items[0], but nothing is displayed in the web page. I had the same problem which i did not solve, in a console application! Can some one please guide me to what I am doing wrong?
protected void Button1_Click(object sender, EventArgs e)
{
ListBox1.Items.Add(new ListItem(TextBox1.Text));
}
Many thanks
Edit:
In a past project, I used the DataSource property, which worked perfectly. I have never yet managed to use the add Items! May be there is some sort of refresh or update?
Page code:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:ListBox ID="ListBox1" runat="server" Height="150px" Width="295px"></asp:ListBox>
<asp:UpdatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
Looks like your listbox is outside of the update panel. Pop it inside the update panel:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="AddItem" />
</ContentTemplate>
</asp:UpdatePanel>
You have to move the ListBox into the UpdatePanel, otherwise it will not be updated.
The reason for that is, that ASP.NET is sending the whole HTML of the UpdatePanel back to the client. Since the ListBox is not part of the UpdatePanel, it won't be updated.

Is it normal for Page_Load to trigger upon clicking a page of a GridView inside an UpdatePanel?

I have this code in my aspx page:
<form id="form2" runat="server">
<asp:ScriptManager ID="ItemsScriptManager" runat="server" EnablePartialRendering="true" />
<asp:Button runat="server" ID="SearchButton" OnClick="ItemsSearch" Text="Search" />
<asp:UpdatePanel runat="server" ID="ItemsUpdatePanel">
<ContentTemplate>
<asp:ObjectDataSource runat="server" ID="ItemsDS"
TypeName="TemplateGridViewODSPagingSorting.ItemDAO" SelectMethod="GetItems" />
<asp:GridView runat="server" ID="ItemsGridView" DataSourceID="ItemsDS"
AllowPaging="true" AllowSorting="true" PageSize="4">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</form>
By pressing on another page of the GridView the Page_Load is triggered, is this normal behavior for a partial postback?
Partial rendering using UpdatePanel does not change or affect the whole Page life cycle in ASP.NET.
it's a small trick used to re-render only a certain region of the page in the browser (the UpdatePanel) but nothing else change, so yes, it's normal to see Page_Load and all other events to be triggered as usual; it has to be like that or it would not work :)
Yes, the during update panel update, the page_load will be called with every asynchronous postback to the server, to overcome this, you can use jquery ajax.

How can i automatically update a user control without updating the whole asp.netpage

How can i automatically update a user control after a specific time without updating the whole aspx page. I haven't done it before. Any ideas would be appreciated.
i suppose you are using asp.net ajax and it has timer control.
check this example : http://ajax.net-tutorials.com/controls/timer-control/ and this video : http://www.asp.net/ajax/videos/how-do-i-use-the-aspnet-ajax-timer-control .
If you have the AJAX extension installed, you can use an UpdatePanel and the ContentTemplate to only refresh that region of your webpage when performing a Postback. You can put any content here, as a self created Usercontrol.
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:Label ID="Label1" runat="Server"></asp:Label>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="Server">
<ContentTemplate>
<asp:Label ID="Label2" runat="server"></asp:Label>
<br />
<br />
<asp:Button ID="Button2" runat="server" Text="Click Me Again" OnClick="Button2_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
The idea would then be to use a Timer to perform a Postback of that UpdatePanel, as someone else has suggested a link for that.
I'm not really sure what you mean when you say "updating" but if you take a look at the life cycle of an active server page you will see that the whole page will be "refreshed" by the web server.
When the web server responds to a client request the entire content will be transformed to a page displayable by a browser and send to the client.

Categories