How To Return A Rendered Panel Control Content From Server-side As A Result Of JQuery.ajax()

At first, I should confess that I am not sure if it is a good practice or not. I have came out with the idea due to my practice of jQuery.ajax().

What I want to achieve is depended on this design:

//Server Side; an .asmx file contains a method like this:
[WebMethod]
public string NewContent(string parameter)
{
string renderedHTML = string.Empty();
switch(parameter)
{
case ("person"):
// create an asp.net panel with
// some controls in it that has form elements to enter person data
// render control and assign its html to renderedHTML
break;
case ("department"):
// create an asp.net panel with
// some controls in it that has form elements to enter department data
// render control and assign its html to renderedHTML
break;
}
}

And from the client I want to do this:

// Some html in the page
<script type="text/JavaScript">
jQuery.post('ajax/myWebServices.asmx/NewContent'
function(returnedPanelContent) {
$('.result').html(returnedPanelContent);
});
</script>

Question is:

How can I make it work? Briefly to have a webservice method that returns different asp.net Panel control content created programmatically so that I can get this control rendered as HTML in my client-side and insert it to my web page?