使用带有.NET Web服务的jQuery.ajax()提交HTML表

时间:2011-09-09 19:37:55

标签: c# asp.net web-services jquery

我对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传递它。

1 个答案:

答案 0 :(得分:6)

如果您尝试将整个HTML表格传递给Web服务,那么您将遇到HTML字符问题(例如引号,双引号等)。您可以转义字符,但我认为您最好找到要在HTML表格中发送的特定数据值并将它们分配给数据对象,因为这样只会发送“数据”与“标记和数据” 。如果您将整个HTML表传递给服务器,则必须解析HTML文档以提取您的值。

作为替代解决方案,您可以post the FORM使用jQuery来处理它。

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

<强> [更新]

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

    jQuery.fn.EncHTML = function () {
        return String(this.html())
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .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”方法。它期望传递一个名为String的类型为“tableContetns”的变量。它的返回类型为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...).
    }
}

从客户端撤回的表格不会包含“表格”标签,因此您需要自己投放这些标签。