Convert a Table to HTML in ASP.NET (c#)?

Question

I have a Table object that I have created and populated in my code behind. It had to be done this way for various reasons.

I call a WebMethod via AJAX from the client side to send a variable from a dropdown list and then the table gets populated in a static method in the code behind. I need to get the Table into an ASP.Net PlaceHolder. I cannot call a PlaceHolder from a static method.

Answer 1

Instead of using an ASP.NET AJAX Page Method to return the data from your client-side AJAX call, try using an ASP.NET HTTP Handler, because it will allow you to better control the content coming back via HTTP headers instead of having to encode the result of the ASP.NET AJAX Page Method call, like this:

public class GetHtmlHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        // Grab the drop down list variable value from the query string

        // Use controls to build table or do it via StringWriter

        // Create a table row with three cells in it
        TableRow theTableRow = new TableRow();
        for (int theCellNumber = 0; theCellNumber < 3; theCellNumber++)
        {
            TableCell theTableCell = new TableCell();
            tempCell.Text = String.Format("({0})", theCellNumber);
            theTableRow.Cells.Add(theTableCell);
        }

        // Create writers to render contents of controls into
        StringWriter theStringWriter = new StringWriter();
        HtmlTextWriter theHtmlTextWriter = new HtmlTextWriter(theStringWriter);

        // Render the table row control into the writer
        theTableRow.RenderControl(theHtmlTextWriter);

        // Return the string via the StringWriter
        context.Response.Write(theStringWriter.ToString());
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

Now on the client-side, use the jQuery .ajax() function to call the HTTP Handler, like this:

$(document).ready(function() {
    $.ajax({
        type: "POST",
        url: "PATH_TO_HANDLERS/GetHtmlHandler.ashx?id=YOUR_DROP_DOWN_VALUE",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(result) {
            // Select the placeholder control by class here and put HTML into it
            $('.ThePlaceHolder').html(result);
        }
    });
}); 

---

Note: The above selector requires that you add a CssClass attribute to your PlaceHolder control, like this:

<asp:PlaceHolder id="PlaceHolder1" runat="server" CssClass="ThePlaceHolder" />

---

UPDATE:

Instead of using the class name in your jQuery selector, you can use the ID of the PlaceHolder, I had originally advised against this, because it is subject to name mangling when using master pages in ASP.NET. At any rate, there is the ClientIDMode attribute which you can use, like this:

<asp:PlaceHolder id="PlaceHolder1" runat="server" ClientIDMode="Static" />

Now your jQuery selector would look like this:

// Select the placeholder control by ID here and put HTML into it
$('#<%= PlaceHolder1.ClientID %>').html(result);

---

Note: I prefer to avoid the angle bracket (<%= %>) notation where possible.