Not really sure I see the logic in returning html in json, defeats the point of a lightweight response if you bloat it with html tags. Why not just have a simple template html fragment which you copy for each item returned in the ajax response, would be much quicker and response time would be better.

P.S, take a look at the inbuilt getJSON method that jquery has
http://docs.jquery.com/Ajax/jQuery.getJSON

Moses, what did you do with my comments?

This is a great application of the technique, Moses. Nice work.

@Stevef: Due to the content-type requirement for ASP.NET JSON requests, jQuery.getJSON unfortunately won't work here.

Can you please show me the one using nested update panel, which is the easist one.
Thanks,

I try to run your application but i get the error "Interface not supported" executing "this.appendChild(elem)" in jquery-1.2.3.min.js. What is the problem?
Sorry but i'm new with javascript and jquery.
Thanks

I use IE 7.0

Hi Moses, thanks for the great example! It's just what I was looking for. One thing I ran into, when you return the data on the $.ajax call, you used $(detail).html(msg); to insert the result into the div. That didn't work for me, and I ended up using $(detail).html(msg.d); (which I got from Dave's great post). What does the ".d" refer to? Thanks again.

Sir, My user control had a GridView, when call PageMethod HttpContext.Current.Server.Execute(page, writer, false);
I will get the error below,
System.Web.HttpException: Control 'xxx_WidgetGridView1' of type 'GridView' must be placed inside a form tag with runat=server.
Any one can solve it? thanks.

Do you know of a way to get a third level of detail or detail grid or repeater inside your order line?

Mosa, nice work...

Trackback from Moses's Blog

Building on demand Master/Detail grouping Grid with GridView and ASP.NET AJAX toolkit CollapsiblePanelExtender

Hi Mosa nice work ..

I have seen the demo and the score code I really like the way you are doing all this
and I want to impalement some like this in my project, but there are couple of things which are different in my project I have only one default.aspx page in my project and that contains nothing, all the stuff will be define at runtime to generate the whole page with different types of usercontrol.ascx, so I want to call the ajax from usercontrol.ascx which will load another usercontrol.ascx HTML into first one.

Can you help me out with this
King Regards

@ Ahtisam Thank you for the comment.
I see this is a bit complicated scenario. Well my idea is to create static page methods in the default.aspx or make a webservice to be used internally by your application. The methods or the webservice will be responsible to load the ASCX files as shown in my example.
Your AJAX code can then reside in your ASCX files. One thing I never tried is to make Page Methods in UserControls, but I think this will not work. So My recommended solution is build an internal webservice to serve your application. I hope that provide you with some help

That was quick replay ...

Ok then lets do is another way what if I make one more .aspx page on that I will drop the FirstUserControl.ascx and which will call the SecondUserControl.ascx with the .ajax request like you are doing in your DEMO and firstusercontrol.ascx will load all the HTML rather then the .aspx page is that make scene/possible

Regards

That was quick replay ...

Ok then lets do is another way what if I make one more .aspx page on that I will drop the FirstUserControl.ascx and which will call the SecondUserControl.ascx with the .ajax request and firstusercontrol.ascx will load all the HTML rather then the .aspx page is that make scene/possible.

Regards

Hi Moses

I am having Error # 403 which I now is for forbidden URL, but I couldn’t find what I am doing wrong here.
I have default.aspx page on the root then I have 2 usercontrols inside Controls folder and the url which I am passing from the firstusercontrol is:

POST
http://localhost:00000/GridViewDrillDownJQueryAjax/controls/ViewUserMusicUI.ascx/GetPlaylistTracks
403 61ms
Can you please help me out what I am doing wrong or am I missing some thing ?

Kind Regards

So this means that the URL request should be like this
http://localhost:00000/GridViewDrillDownJQueryAjax/controls/WebService.asmx/GetPlaylistTracks

Right..?

Hi again and thanks worked in page method and one last thing i am send you the code which is working fine in page method but not in webservice.cs


[System.Web.Services.WebMethod()]
public static string GetOrders(string CustomerOrder)
{
System.Threading.Thread.Sleep(500);
Page page = new Page();
CustomerOrder ctl = (CustomerOrder)page.LoadControl("~/controls/CustomerOrder.ascx");
ctl.CustomerOrder = CustomerOrder;
page.Controls.Add(ctl);
System.IO.StringWriter writer = new System.IO.StringWriter();
HttpContext.Current.Server.Execute(page, writer, false);
string output = writer.ToString();
writer.Close();
return output;
}

can u please tell me what is wrong!
b/c I have never used the webservice before so this is new for me and quite interesting as well

Regards

[System.Web.Services.WebMethod()]
public string GetOrders(string CustomerOrder)
{
System.Threading.Thread.Sleep(500);
Page page = new Page();
CustomerOrder ctl = (CustomerOrder)page.LoadControl("~/controls/CustomerOrder.ascx");
ctl.CustomerOrder = CustomerOrder;
page.Controls.Add(ctl);
System.IO.StringWriter writer = new System.IO.StringWriter();
HttpContext.Current.Server.Execute(page, writer, false);
string output = writer.ToString();
writer.Close();
return output;
}
========================
Still sending Error 500
========================
function showhide(master,detail,customerId)
{
//First child of master div is the image
var src = $(master).children()[0].src;
//Switch image from (+) to (-) or vice versa.
if(src.endsWith("plus.png"))
src = src.replace('plus.png','minus.png');
else
src = src.replace('minus.png','plus.png');
//if the detail DIV is empty Initiate AJAX Call, if not that means DIV already populated with data
if($(detail).html() == "")
{
//Prepare Progress Image
var $offset = $(master).offset();
$('#progress').css('visibility','visible');
$('#progress').css('top',$offset.top);
$('#progress').css('left',$offset.left+$(master).width());
//Prepare Parameters
var params = '{customerId:"'+ customerId +'"}';
//Issue AJAX Call
$.ajax({
type: "POST", //POST
url: "WebService.asmx/GetOrders", //Set call to Page Method
data: params, // Set Method Params
beforeSend: function(xhr) {
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");},
contentType: "application/json; charset=utf-8", //Set Content-Type
dataType: "json", // Set return Data Type
success: function(msg, status) {
$('#progress').css('visibility','hidden');
$(master).children()[0].src = src;
$(detail).html(msg);
$(detail).slideToggle("normal"); // Succes Callback
},
error: function(xhr,msg,e){
$('#progress').css('visibility','hidden');
alert(msg);//Error Callback
}
});
}
else
{
//Toggle expand/collapse
$(detail).slideToggle("normal");
$(master).children()[0].src = src;
}
}

ok

this js code works fine for the page method but didn't invoked on webservice.asmx call

you'll have a look

Regards

Hi Moses
thanks for all your help
I figure out what was wrong it's just this [var params = '{customerId:"'+ customerId +'"}'; ]line in JS which should be like this [var params = "{'customerId':'"+ customerId +"'}"; ]

And now every thing is working fine.

Thanks once again
keep up the Good work ;)
Best Regards

Hi Moses,
It's possible return Update Panel's AJAX Error in Global.asax's Application_AcquireRequestState? Because I write some codes FunA to check something at Global.asax's Application_AcquireRequestState, but when session timeout, user click the page (AJAX postback) it will cause FunA check false, then i want render some error message back. When HttpGET I can use Response.Write("<script...>alert('....');</script>") Response.End, But when HttpPost(AJAX) then "<script>..." will cause Client AJAX Error, It's possilbe return AJAX's Error in Application_AcquireRequestState Method?
Thanks.