c# - 使用 .NET Web 服务通过 jQuery.ajax() 提交 HTML 表

Question

我对 jQuery 和 JavaScript 还很陌生，但我想向我编写的 .NET Web 服务提交电子邮件。我已经使用数据中的一些简单值测试了 Web 服务，但我希望在进行一些客户端和服务器端验证后可以提交一个填充服务器端的整个表。

这有效:

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

但是，就像我说的，我已经在这个表中填充了对表单的响应，当我执行 var body = $("#divSuccessDetails").html(); 时并将其传递给“测试主体”而不是“测试主体”，我得到一个无效的对象响应。我已经测试了我选择的表格的结果，其内容如下:

<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>

我的网络服务方法是这样的:

 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 + "\" }}";
    }
}

我收到的错误消息如下:

"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">

我只是希望将它作为字符串传递，因为这就是我收到的内容。我已经在字符串中放入了大量 HTML，这些字符串我以前用于电子邮件对象，但这是我第一次这样做尝试通过 AJAX 传递它。

Answer 1

如果您尝试将包含 HTML 元素的整个 HTML 表传递给 Web 服务，您将遇到 HTML 字符(例如引号、双引号等)的问题。您可以转义字符，但我认为您最好找到要在 HTML 表中发送的特定数据值并将它们分配给数据对象，因为这将导致仅发送“数据”而不是“标记和数据” 。如果您将整个 HTML 表传递给服务器，则必须解析 HTML 文档以提取值。

作为替代解决方案，您可以 post the FORM到一个带有 jQ​​uery 的页面，可以对其进行处理。

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

[更新]

如果您只想将表格的 HTML 标记发送到服务器，则需要对结果进行 HTML 编码，并将该值作为字符串值传递到服务器。

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

以下是如何将其与 GridView 一起使用。

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

以下是如何向 ASMX/WCF 服务执行标准 jQuery AJAX 请求。

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

这将调用 TableManager.asmx 服务的“Process”方法。它期望传递一个名为“tableContetns”的 String 类型变量。它的返回类型为 VOID，因此不会将任何内容发送回客户端/页面，但可以将其更改为字符串，以便您可以发回一条消息，表明表/数据已被处理。

注意:我还使用 JSON.Org stringify函数对发送到服务器的对象进行正确的 JSON 编码。

这是服务器上的 Web 方法。

[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...).
    }
}

从客户端拉回的表将不包含“table”标签，因此您需要自己添加这些标签。