.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本体= $（「＃の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> 

私のWebサービスメソッドはこれです：

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

それは私が受けたんだよので、私はちょうどそれを文字列として渡すために期待していた..私は私がしかし前emailobjectのために使ってきた文字列にHTMLをたくさん入れていますこれは初めてのことですそれをAJAXに渡そうとしました。

Answer 1

HTML要素がいっぱいになったHTMLテーブル全体をWebサービスに渡そうとすると、HTML文字（例：引用、二重引用符など）の問題が発生します。あなたは文字をエスケープすることができますが、あなたがHTMLテーブルに送る特定のデータ値を見つけ出し、それらをデータオブジェクトに割り当てる方が良いと思います。これは、 "データ"と "マークアップとデータ" 。 HTMLテーブル全体をサーバーに渡した場合、HTMLドキュメントを解析して値を引き出す必要があります。

代わりの解決策として、処理できるjQueryがあるページにpost the FORMを付けることができます。

$.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(); 

標準的なjQuery AJAXリクエストをASMX/WCFサービスに対して行う方法は次のとおりです。

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

これはTableManager.asmxサービスの "プロセス" メソッドを呼び出します。文字列型の "tableContetns"という変数が渡されることを期待しています。戻り値の型はVOIDなので、何もクライアント/ページに返されませんが、これを文字列に変更して、テーブル/データが処理されたというメッセージを返すことができます。

注：サーバーに送信されるオブジェクトを正しくJSONエンコードするためにJSON.Org stringify関数も使用しています。

ここにサーバー上の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...). 
    } 
} 

の表は、あなたが自分でそれらをスローする必要がありますので、「テーブル」のタグが含まれませんクライアントから引き戻します。