通过.NET Web服务使用jQuery.ajax（）提交HTML表

Question

I'm pretty new to jQuery and JavaScript but I'm wanting to submit an email to a .NET web service I wrote. I've tested the web service with some simple values in my data but I was hoping I could submit a whole table that I populate server side after doing some client side and server side validation.

This works:

data: '{ strFrom: "abcd@abc.edu", to: "abcd@abc.edu", cc: "abcd@abc.edu", subject: "test subject", body: "test body" }'

However, like I said I have this table I've populated with responses to the form and when I do a var body = $("#divSuccessDetails").html(); and pass that in instead of "test body" I get an invalid object response. I've tested the results of the table I'm selecting and it's along the lines of this:

<table id="ctl00_ContentPlaceHolder1_tblSuccessDetails" class="successDetails" style="width:80%;">
    <tbody><tr>
        <td class="successHeading" colspan="2">
    Reporting Category
    </td>
    </tr>
    <tr>
        <td>
        <span id="ctl00_ContentPlaceHolder1_lblBilling">Billing Provider: <b></b></span>
    </td>
        <td rowspan="1">
        <span id="ctl00_ContentPlaceHolder1_lblCategory">Reporting Category: </span></td>
    </tr>
    <tr>

My web service method is this:

 public string Email(string strFrom, string to, string cc, string subject, string body) {
    try
    {
        MailMessage objMail = new MailMessage();
        MailAddress from = new MailAddress(strFrom);
        objMail.From = from;
        objMail.To.Add(to);
        objMail.CC.Add(cc);
        objMail.Subject = subject;
        objMail.Body = body;
        SmtpClient smtp = new SmtpClient("pobox.abc.edu");
        smtp.Send(objMail);

        return "{\"form\": { \"successful\": \"true\" }}";
    }
    catch (Exception ex)
    {
        return "{\"form\": { \"successful\": \"false\" }, {\"exception\": {\"ex\": \"" + ex.Message + "\" }}";
    }
}

The error message I'm receiving is along these lines:

"Invalid object passed in, ':' or '}' expected. (176): { strFrom: "abcd@abc.edu", to: "abcd@abc.edu", cc: "abcd@abc.edu", subject: "IDX Provider Form by IDX Provider Form by abcd", body: " <table id="ctl00_ContentPlaceHolder1_tblSuccessDetails" class="successDetails" style="width:80%;"> <tbody><tr> <td class="successHeading" colspan="2">

I was just hoping to pass it in as a string because that's what I'm receiving.. I've put plenty of HTML in strings that I've used for an emailobject before but this is the first time I've tried to pass it through AJAX.

Answer 1

If you try to pass an entire HTML table full of HTML elements to a web service your going to run into issues with HTML characters (eg Quotes, Double Quotes, etc...). You can escape the characters, but I think your better off finding the specific data values you want to send in your HTML table and assigning them to a data object, since this will result in only sending "data" vs. "markup and data". If you passed an entire HTML table to the server, you would then have to parse the HTML document to pull out your values.

As an alternative solution, you could post the FORM to a page with jQuery where it could be processed.

$.post("FormProcessor.aspx", $("#testform").serialize());

[Update]

If you just want to send HTML markup of a table to the server, you'll need to HTML Encode the results, and pass the value as a string value to the server.

    jQuery.fn.EncHTML = function () {
        return String(this.html())
            .replace(/&/g, '&')
            .replace(/"/g, '"')
            .replace(/'/g, ''')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
    };

Here is how you would use this with a GridView.

var html = $('#<%= Sample.ClientID %>').EncHTML();

Here is how to do a standard jQuery AJAX request to a ASMX/WCF Service.

$.ajax({
    type: 'POST',
    url: '/TableManager.asmx/Process',
    data: JSON.stringify({ tableContents: html }),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json'
});

This calls the "Process" method of the TableManager.asmx service. It expects a variable called "tableContetns" of type String to be passed. It has a return type of VOID so nothing is sent back to the client/page, but this could be changed to string so you could send a message back that the table/data was processed.

NOTE: I'm also using the JSON.Org stringify function to properly JSON encode my object being sent to the server.

Here is the web method on the server.

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class TableManager : WebService
{
    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public void Process(string tableContents)
    {
        var table = Server.HtmlDecode(tableContents);
        // Do Something (Email, Parse, etc...).
    }
}

The table pulled back from the client will not include the "table" tags, so you'll need to throw those in yourself.