Updating a ContentPlaceHolder with Ajax

I am working on a project which uses a MasterPage with one ContentPlaceHolder. I have a custom menu control on the MasterPage. When an item in the menu is clicked I need the ContentPlaceHolder to be updated with the requested content. I know this can easily be done using an iframe, but I'd rather stay away from iframes and like to do this with Ajax.

Basically my question is if this is possible at all. I've been trying a couple of things but without success and I think it may have to do by the way a MasterPage works.
If not possible, is there some kind of workaround for this? (without residing to iframes)

Thanks!

Hi Rino,

I tried also the same thing as you. I had a menu on my master page and an ContentPlaceHolder in my update panel. That didn't work. I think it isn't possible what you want to do.

Regards,

Unfortunately, no. It's just not how master pages and AJAX work. I just finished a post on the topic here:http://odetocode.com/Blogs/scott/archive/2007/01/03/9682.aspx

Thanks guys for clearing this up!
Would be great as a new .Net feature though :)

You can do it right now, actually, it's not that big of a deal. You don't really need a contentplaceholder for it, just a Div that you can hook into w/ javascript (giving it an ID, for example). You have your menu item click handler fire a javascript function that calls a web service and then have the onrequest complete handler fill the div with the stuff it gets back.

paul.vencill:

You don't really need a contentplaceholder for it, just a Div that you can hook into w/ javascript (giving it an ID, for example). You have your menu item click handler fire a javascript function that calls a web service and then have the onrequest complete handler fill the div with the stuff it gets back.

Paul: Yes, but this is an entirely different approach.

Understood. I was trying to offer something that might work for his application. is there a good reason you can think of to limit his app to using contentplaceholders?

No, my goal was just to point out that updating content place holders with content from a different page isn't how the technologies work together. It seems to be a common question these days, so I'm trying to clear that up.

The right way to achieve this would be to use a solution like you proposed!

ah, ok, cool. :D

It is very easy.

See my last post about "Handling events...".

Updating an UpdatePanel only when certain item is clicked in Datalist

I have 2 UpdatePanels each with a Datalist in them. Here is my code:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DataList2" />
</Triggers>
<ContentTemplate>
<asp:DataList ID="DataList1" runat="server" DataSourceID="Ods1"BorderStyle="Solid" GridLines="Both" RepeatDirection="Horizontal">
<ItemTemplate>
<asp:ImageButton ID="ThumbImage1" runat="server"ImageUrl='<imagepath...>' />
</ItemTemplate>
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:DataList ID="DataList2" runat="server" RepeatColumns="4"DataSourceID="Ods2" BorderStyle="Solid" GridLines="Both"RepeatDirection="Horizontal" OnItemCommand="DataList2_ItemCommand"CellPadding="5">
<ItemTemplate>
<asp:ImageButton ID="ThumbImage2" runat="server"ImageUrl='<imagepath...>' CommandName="ThumbImage"CommandArgument='<passing the id...>' />
<br />
<asp:ImageButton ID="DeleteImage" runat="server"ImageUrl="images/delete.gif" CommandName="DeleteImage"CommandArgument='<passing the id...>' />
</ItemTemplate>
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>

and the code in DataList2_ItemCommand is as follows:

protected void DataList2_ItemCommand(object source, DataListCommandEventArgs e)
{
if (e.CommandName == "DeleteImage")
{
//code to delete the image from database

...
this.DataList2.DataBind();
this.UpdatePanel2.Update();
}
else if (e.CommandName == "ThumbImage2")
{
//code to add the thumb image to the table attached to datalist1.
...
...
this.Datalist1.DataBind();
this.UpdatePanel1.Update();
}
}

As you can see in the above code, I want to update the UpdatePanel1 only when the imagebutton "ThumbImage2" is clicked and NOT when the imagebutton "DeleteImage" is clicked in Datalist2. But because Datalist2 is the cause of the AsyncPostBackTrigger for UpdatePanel1, it is updated when either one of the imagebuttons are clicked. Is there a way to change this?

Please help.

You don't want to set the datalist as the trigger, you want to set the individual ImageButtons as the triggers. Remove the triggers from UpdatePanel1, as well as the UpdateMode="Conditional".

<asp:UpdatePanelID="UpdatePanel1"runat="server">
<ContentTemplate>
...
</ContentTemplate>
</asp:UpdatePanel>

Then in the DataList2_ItemDatabound event, add the following:

ProtectedSub DataList2_ItemDataBound(ByVal senderAsObject,ByVal eAs System.Web.UI.WebControls.DataListItemEventArgs)Handles DataList2.ItemDataBound
Dim ibtnAs ImageButton =CType(e.Item.FindControl("ThumbImage2"), ImageButton)
Dim trggrAsNew AsyncPostBackTrigger
trggr.ControlID = ibtn.ClientID
trggr.EventName ="Click"
UpdatePanel1.Triggers.Add(trggr)
EndSub

In the ItemCommand event, I am executing some server side code for the imagebutton that was clicked in that specific row of datalist based on its id (which I retrieve using e.CommandArgument).

If I use the approach that you mentioned above, how do i retrieve the database id of the image clicked?

Thanks

DataList2.DataKeys.Item(e.Item.ItemIndex)

The solution you suggested works like a charm. I removed the datalist as the trigger & added the imagebutton as trigger in ItemDataBound event. Also, I still execute the server side code in ItemCommand event based on the which button clicked & everything works fine.

Thanks a ton.

Updating DetailsView Control with AJAX

I have a ListBox, and when I click on an item in the ListBox I want to populate my DetailsView control with that item. How do I do this with AJAX?

Pretty simply actually.

You will want to put AutoPostBack="true" on your ListBox declaration.

Youll then want to wrap your DetailsView inside an UpdatePanel, set the Updatemode to conditional. Also add 1 trigger to it with the ControlID pointing to your listbox, and the eventName as SelectedIndexChanged(the event your listbox will fire when selected is change).

in your code behind you're going to have an eevent fired with the listbox has it's index changed. In that event you will do the work to populate your detailsview based on what was selected.

I'm getting an error that says 'Sys' is undefined when I run this in IE now. Here's the code that it's erroring on...

<script type="text/javascript">
<!--
Sys.Application.initialize();
// -->
</script

Can you show more of your script/markup?

Do you have extra client side functionality in your page?

Sure, here's the entire source code of the page...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title></head>
<body>
<form name="form1" method="post" action="EmpOrderInfo.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjAyNTkzODI1MQ9kFgICAw9kFgQCAw8QDxYEHg1EYXRhVGV4dEZpZWxkBQdHcm91cElkHgtfIURhdGFCb3VuZGdkEBUFBDczNzcENzM3OAQ3MzgxBDczODIENzM4ORUFBDczNzcENzM3OAQ3MzgxBDczODIENzM4ORQrAwVnZ2dnZxYAZAIFD2QWAmYPZBYCAgEPPCsADwEADxYEHwFnHgtfIUl0ZW1Db3VudAIBZBYCZg9kFiRmDw8WAh4HVmlzaWJsZWhkZAIBD2QWAgIBDw8WAh4EVGV4dAUENzM3N2RkAgIPZBYCAgEPDxYCHwQFCTIyMzA2MjY1NGRkAgMPZBYCAgEPDxYCHwQFBVdISVRFZGQCBA9kFgICAQ8PFgIfBAUHR1JFR09SWWRkAgUPZBYCAgEPDxYCHwQFATFkZAIGD2QWAgIBDw8WAh8EBQExZGQCBw9kFgICAQ8PFgIfBAUVMS8xMS8yMDA3IDEyOjAwOjAwIEFNZGQCCA9kFgICAQ8PFgIfBAUGJm5ic3A7ZGQCCQ9kFgICAQ8PFgIfBAUKMDAwMTY3OTMwNmRkAgoPZBYCAgEPDxYCHwQFCjAwMDE2NzkzMDZkZAILD2QWAgIBDw8WAh8EBQUxNS4wMGRkAgwPZBYCAgEPDxYCHwQFBTU1LjAwZGQCDQ9kFgICAQ8PFgIfBAUEMC4wMGRkAg4PZBYCAgEPDxYCHwQFBDAuMDBkZAIPD2QWAgIBDw8WAh8EBQEwZGQCEA9kFgICAQ8PFgIfBAUUMS8xLzAwMDEgMTI6MDA6MDAgQU1kZAIRDw8WAh8DaGRkGAEFEG9yZGVyRGV0YWlsc1ZpZXcPZ2SqwxUXyPNrKdRopgFCgoT+NqtULg==" />
</div
<script type="text/javascript">
<!--
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// -->
</script
<script src="http://pics.10026.com/?src=/WebResource.axd?d=FpwRBZ96xZ5ud99miA75mw2&t=633202882958381326" type="text/javascript"></script
<script src="http://pics.10026.com/?src=/ScriptResource.axd?d=LdKoE2V7baQxgZi5qJWDJL19jIzUAhV9R9vHBQErnKHQwiApaevwRqa0lkzD8pUgnd1f2nCFAiPcZKH9m548d5BH2dJtnoaxfupo3UPI0DE1&t=633270221986802216" type="text/javascript"></script>
<script src="http://pics.10026.com/?src=/ScriptResource.axd?d=LdKoE2V7baQxgZi5qJWDJL19jIzUAhV9R9vHBQErnKHQwiApaevwRqa0lkzD8pUgnd1f2nCFAiPcZKH9m548d-Ek16dyKFudPIusY3WzCMCytLJROrx7r4IKoGi2fnci0&t=633270221986802216" type="text/javascript"></script>
<div>
<div>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tUpdatePanel1'], ['orderListBox'], [], 90);
//]]>
</script
<table border="1" style="; height: 500px">
<tr>
<td style="width: 200px; height: 500px" valign="top">
<select size="4" name="orderListBox" onchange="javascript:setTimeout('__doPostBack(\'orderListBox\',\'\')', 0)" id="orderListBox" style="height:100%;width:100%;">
<option value="7377">7377</option>
<option value="7378">7378</option>
<option value="7381">7381</option>
<option value="7382">7382</option>
<option value="7389">7389</option
</select></td>
<td align="left" style="width: 400px; height: 500px" valign="top">
<div id="UpdatePanel1">

<div>
<table cellspacing="0" cellpadding="4" align="Left" border="0" id="orderDetailsView" style="color:#333333;height:100%;width:100%;border-collapse:collapse;">
<tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">GroupId</td><td>7377</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">SSN</td><td>223062654</td>
</tr><tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">LastName</td><td>WHITE</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">FirstName</td><td>GREGORY</td>
</tr><tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">OrderTypeId</td><td>1</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">IssueTypeId</td><td>1</td>
</tr><tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">IssueDate</td><td>1/11/2007 12:00:00 AM</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">CaseName</td><td> </td>
</tr><tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">CaseId</td><td>0001679306</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">CaseNum</td><td>0001679306</td>
</tr><tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">WeeklyDedAmt</td><td>15.00</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">WeeklyDedPct</td><td>55.00</td>
</tr><tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">MaxMonDedAmt</td><td>0.00</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">OriginalBalance</td><td>0.00</td>
</tr><tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">LifeOfOrder</td><td>0</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">DedExpDate</td><td>1/1/0001 12:00:00 AM</td>
</tr>
</table>
</div>

</div>
</td>
</tr>
</table>
</div>

</div>

<div
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBwL5ica2AQLIgsfhCgKojMF/AqiM9ZQGAoPm+eMMAoPm7cYHAoPmmboBzmXMwzecNn5uwbSob2JtclG3CR8=" />
</div
<script type="text/javascript">
<!--
Sys.Application.initialize();
// -->
</script>
</form>
</body>
</html

The "Sys is undefined" error asside, does your page do what you need it to do? ASP.NET creates that section of JavaScript, so for some reason the rest of the scripts are not being loaded.

Try looking at this post - http://forums.asp.net/p/1040236/1446560.aspx they had the same issues that you have.

Looks like it's related to anonymous user access. I'm checking into it now. Thanks!

Nevermind, this was it...

<httpHandlers>
<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
</httpHandlers>

Now I have a problem with the 'SelectedIndexChanged' event. It's executing code that sets the DataSource of the DetailsView Control and then calls the DataBind() method again and it's not doing anything on the page. Any idea why?

I did some more research and it looks like the ListItem.Selected value isn't being set when I click on that item in the list. Why is this? The DataSource for my ListBox is an array of user-defined objects and the DataTextField is set to the name of one of the properties in the object. This is my code in the 'SelectedIndexChanged' event on the ListBox...

int index = 0;

foreach (ListItem i in orderListBox.Items) {
if (orderListBox.Items[index].Selected) {
loadDetails(index);
}
index++;
}

None of the items in the ListBox are 'Selected'.

It's working now. Not sure what I did though :)

I'm glad you got it working :)

Ok, now it stopped working and I have no idea why. The 'SelectedIndexChanged' event is firing, but none of the items in the ListBox are 'Selected' in the Item array. Help?

Do you have code that is interacting with the listbox at all? Any javascript?

Changing anything on the listbox (Clicking on an option in it or having an option chance) will invoke taht even.t

Not that I know of. Here's my code...

protected void orderListBox_SelectedIndexChanged(object sender, EventArgs e) {
int index = 0;

foreach (ListItem i in orderListBox.Items) {
if (orderListBox.Items[index].Selected && orderListBox.SelectedIndex != selectedIndex) {
loadDetails(index);
}
index++;
}
}

private void loadDetails(int listIndex) {
OrderInfo tmpOrderInfo = new OrderInfo();

try {
pdfButton.Attributes.Remove("OnClick");
pdfButton.Attributes.Add("OnClick", "javascript:window.open('OrderView.aspx?id=" + orderInfo[listIndex].OrderId.ToString() + "')");

orderDetailsView.DataSource = tmpOrderInfo.GetOrderInfo(orderInfo[listIndex]);
orderDetailsView.DataBind();
} catch (Exception ex) {
string tmp = ex.Message;
}
}