web-dev-qa-db-ja.com

jQueryを使用してJSONオブジェクトをasp.net WebMethodに正常に送信する

私はこれに3時間取り組んできましたが、あきらめました。私は単にjQueryを使用して、asp.net Webメソッドにデータを送信しようとしています。データは基本的に、一連のキー/値ペアです。だから私は配列を作成し、その配列にペアを追加しようとしました。

私のWebMethod（aspx.cs）は次のようになります（これは私がJavaScriptで構築しているものでは間違っている可能性があります。知りません）。

   [WebMethod]
    public static string SaveRecord(List<object> items)
    .....

これが私のサンプルJavaScriptです：

var items = new Array;

    var data1 = { compId: "1", formId: "531" };
    var data2 = { compId: "2", formId: "77" };
    var data3 = { compId: "3", formId: "99" };
    var data4 = { status: "2", statusId: "8" };
    var data5 = { name: "Value", value: "myValue" };

    items[0] = data1;
    items[1] = data2;
    items[2] = data3;
    items[3] = data4;
    items[4] = data5;

Here is my jQuery ajax call:

var options = {
        error: function(msg) {
            alert(msg.d);
        },
        type: "POST",
        url: "PackageList.aspx/SaveRecord",
        data: { 'items': items },
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false,
        success: function(response) {
            var results = response.d;
        }
    };
    jQuery.ajax(options);

エラー-Invalid JSON primitive: items.-

そう...私がこれをするなら：

var DTO = {'items'：items};

次のようにデータパラメータを設定します。

データ：JSON.stringify（DTO）

それから私はこのエラーを受け取ります：

Cannot convert object of type \u0027System.String\u0027 to type \u0027System.Collections.Generic.List`1[System.Object]\u0027
asp.netjavascriptjqueryajaxjson
20
29er

AJAX.NETを使用する場合、私は常に入力パラメーターを単純な古いオブジェクトにしてから、JavaScriptデシリアライザーを使用して、任意のタイプに変換します。少なくともその方法で、デバッグして、Webメソッドが受け取っているオブジェクトのタイプを確認できます。

JQueryを使用する場合は、オブジェクトを文字列に変換する必要があります

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="sm" runat="server" EnablePageMethods="true">
            <Scripts>
                <asp:ScriptReference Path="~/js/jquery.js" />
            </Scripts>
        </asp:ScriptManager>
        <div></div>
    </form>
</body>
</html>
<script type="text/javascript" language="javascript">
    var items = [{ compId: "1", formId: "531" },
        { compId: "2", formId: "77" },
        { compId: "3", formId: "99" },
        { status: "2", statusId: "8" },
        { name: "Value", value: "myValue"}];

        //Using Ajax.Net Method
        PageMethods.SubmitItems(items,
            function(response) { var results = response.d; },
            function(msg) { alert(msg.d) },
            null);

        //using jQuery ajax Method
        var options = { error: function(msg) { alert(msg.d); },
                        type: "POST", url: "WebForm1.aspx/SubmitItems",
                        data: {"items":items.toString()}, // array to string fixes it *
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        async: false, 
                        success: function(response) { var results = response.d; } }; 
        jQuery.ajax(options);
</script>

そして背後にあるコード

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Serialization;
using System.Web.Script.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CustomEquip
{
    [ScriptService]
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        [WebMethod]
        public static void SubmitItems(object items)
        {
            //break point here
            List<object> lstItems = new JavaScriptSerializer().ConvertToType<List<object>>(items);
        }
    }
}
9
Your Friend Ken

あなたの例では、データパラメータが次の場合に機能します。

data: "{'items':" + JSON.stringify(items) + "}"

JSON文字列をASP.NET AJAXに送信する必要があることに注意してください。実際のJSONオブジェクトをjQueryのデータパラメータとして指定すると、代わりに＆k = v？k = vペアとしてシリアル化されます。

すでにお読みになっているようですが、私の jQuery、JSON.stringify、ASP.NET AJAXでJavaScript DTOを使用する例 をもう一度見てください。それはあなたがこの仕事をするのに必要なすべてをカバーします。

注：JavaScriptSerializerを使用して、（他の人が提案したように）「ScriptService」でJSONを手動で逆シリアル化しないでください。これは、メソッドに指定されたタイプのパラメーターに基づいて、自動的にこれを行います。あなたがそれをしていることに気づいたら、あなたはそれを間違っています。

46
Dave Ward

以下は、私たちのプロジェクトのコードスニペットです。オブジェクトを文字列としてラップしないことに問題があり、日付の値もありました。

        // our JSON data has to be a STRING - need to send a JSON string to ASP.NET AJAX. 
        // if we specify an actual JSON object as jQuery's data parameter, it will serialize it as ?k=v&k=v pairs instead
        // we must also wrap the object we are sending with the name of the parameter on the server side – in this case, "invoiceLine"
        var jsonString = "{\"invoiceLine\":" + JSON.stringify(selectedInvoiceLine) + "}";

        // reformat the Date values so they are deserialized properly by ASP.NET JSON Deserializer            
        jsonString = jsonString.replace(/\/Date\((-?[0-9]+)\)\//g, "\\/Date($1)\\/");

        $.ajax({
            type: "POST",
            url: "InvoiceDetails.aspx/SaveInvoiceLineItem",
            data: jsonString,
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        });

サーバーメソッドのシグネチャは次のようになります。

    [WebMethod]
    public static void SaveInvoiceLineItem(InvoiceLineBO invoiceLine)
    {
5
AVH

[WebMethod]を別の属性で装飾します。

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]

これはSystem.Web.Services.Scriptingにあると思います...

3
Dave Markle

リンクを参照 http://www.andrewrowland.com/article/display/consume-dot-net-web-service-with-jquery

1
diwakar

これは、データ（JSON）を定義する方法です

data: { 'items': items },

これは本来あるべき姿です

data: '{ items: " '+items +' "}',

基本的には、パラメーターをシリアル化しています。

1
maxspan