web-dev-qa-db-ja.com

JSON、jQueryを使用してASP.NET MVCコントローラーに複雑なオブジェクトの配列を投稿する方法は？

私の現在のコードは次のようになります。配列をコントローラーに渡すにはどうすればよいですか？また、コントローラーアクションはどのようなパラメーターを受け入れる必要がありますか？

function getplaceholders() {
    var placeholders = $('.ui-sortable');
    var result = new Array();
    placeholders.each(function() {
        var ph = $(this).attr('id');
        var sections = $(this).find('.sort');
        var section;

        sections.each(function(i, item) {
            var sid = $(item).attr('id');

            result.Push({ 'SectionId': sid, 'Placeholder': ph, 'Position': i });
        });
    });
    alert(result.toString());
    $.post(
        '/portal/Designer.mvc/SaveOrUpdate',
        result,
        function(data) {
            alert(data.Result);
        }, "json");
};

コントローラーのアクションメソッドは次のようになります

public JsonResult SaveOrUpdate(IList<PageDesignWidget> widgets)
c#javascriptjqueryasp.net-mvcjson
92
JSC

私は解決策を見つけました。私はSteve GentileのソリューションjQueryとASP.NET MVC – JSONをアクションに送信–再訪を使用します。

私のASP.NET MVCビューコードは次のようになります。

function getplaceholders() {
        var placeholders = $('.ui-sortable');
        var results = new Array();
        placeholders.each(function() {
            var ph = $(this).attr('id');
            var sections = $(this).find('.sort');
            var section;

            sections.each(function(i, item) {
                var sid = $(item).attr('id');
                var o = { 'SectionId': sid, 'Placeholder': ph, 'Position': i };
                results.Push(o);
            });
        });
        var postData = { widgets: results };
        var widgets = results;
        $.ajax({
            url: '/portal/Designer.mvc/SaveOrUpdate',
            type: 'POST',
            dataType: 'json',
            data: $.toJSON(widgets),
            contentType: 'application/json; charset=utf-8',
            success: function(result) {
                alert(result.Result);
            }
        });
    };

コントローラーアクションはカスタム属性で装飾されています

[JsonFilter(Param = "widgets", JsonDataType = typeof(List<PageDesignWidget>))]
public JsonResult SaveOrUpdate(List<PageDesignWidget> widgets

カスタム属性のコードを見つけることができます here （リンクは現在壊れています）。

リンクが壊れているため、これはJsonFilterAttributeのコードです

public class JsonFilter : ActionFilterAttribute
{
    public string Param { get; set; }
    public Type JsonDataType { get; set; }
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        if (filterContext.HttpContext.Request.ContentType.Contains("application/json"))
        {
            string inputContent;
            using (var sr = new StreamReader(filterContext.HttpContext.Request.InputStream))
            {
                inputContent = sr.ReadToEnd();
            }
            var result = JsonConvert.DeserializeObject(inputContent, JsonDataType);
            filterContext.ActionParameters[Param] = result;
        }
    }
}

JsonConvert.DeserializeObjectはJson.NETのものです

リンク： Json.NETでJSONをシリアル化および逆シリアル化します

84
JSC

アクションフィルター、jquery stringify、bleh ...

ピーター、この機能はMVCにネイティブです。これがMVCの優れた点の1つです。

$.post('SomeController/Batch', { 'ids': ['1', '2', '3']}, function (r) {
   ...
});

そして、アクションでは、

[HttpPost]
public ActionResult Batch(string[] ids)
{
}

チャームのように機能します：

enter image description here

JQuery 1.4+を使用している場合は、従来のモードの設定を検討します。

jQuery.ajaxSettings.traditional = true;

ここで説明されているとおり： http://www.dovetailsoftware.com/blogs/kmiller/archive/2010/02/24/jquery-1-4-breaks-asp-net-mvc-actions-with-array-パラメーター

これは複雑なオブジェクトに対しても機能します。興味がある場合は、モデルバインディングに関するMVCドキュメントを参照してください。 http://msdn.Microsoft.com/en-us/library/dd410405.aspx

22
Levitikon

.NET4.5、MVC 5ウィジェットは不要です。

Javascript：

jSのオブジェクト： enter image description here

投稿するメカニズム。

    $('.button-green-large').click(function() {
        $.ajax({
            url: 'Quote',
            type: "POST",
            dataType: "json",
            data: JSON.stringify(document.selectedProduct),
            contentType: 'application/json; charset=utf-8',
        });
    });

C＃

オブジェクト：

public class WillsQuoteViewModel
{
    public string Product { get; set; }

    public List<ClaimedFee> ClaimedFees { get; set; }
}

public partial class ClaimedFee //Generated by EF6
{
    public long Id { get; set; }
    public long JourneyId { get; set; }
    public string Title { get; set; }
    public decimal Net { get; set; }
    public decimal Vat { get; set; }
    public string Type { get; set; }

    public virtual Journey Journey { get; set; }
}

コントローラ：

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Quote(WillsQuoteViewModel data)
{
....
}

受け取ったオブジェクト：

enter image description here

これで時間を節約できることを願っています。

11
Matas Vaitkevicius

の後半に向けて 作成REST JSONとプレーンXMLの両方を話すASP.NET MVCを使用したAPI、引用するには：

HTTP POSTを介して配信されるJSONおよびXMLペイロードを受け入れる必要があります。クライアントがバッチ処理のためにオブジェクトのコレクションをワンショットでアップロードしたい場合があります。そのため、JSON形式またはXML形式を使用してオブジェクトをアップロードできます。 ASP.NET MVCには、投稿されたJSONまたはXMLを自動的に解析し、アクションパラメーターに自動的にマッピングするネイティブサポートはありません。そこで、それを行うフィルターを作成しました。」

次に、JSONをC＃オブジェクトにマップするコードを表示したアクションフィルターを実装します。

8
anonymous

まず、このJavaScriptコード JSON2.js をダウンロードします。これは、オブジェクトを文字列にシリアル化するのに役立ちます。

私の例では、Ajax経由で jqGrid の行を投稿しています。

    var commissions = new Array();
    // Do several row data and do some Push. In this example is just one Push.
    var rowData = $(GRID_AGENTS).getRowData(ids[i]);
    commissions.Push(rowData);
    $.ajax({
        type: "POST",
        traditional: true,
        url: '<%= Url.Content("~/") %>' + AREA + CONTROLLER + 'SubmitCommissions',
        async: true,
        data: JSON.stringify(commissions),
        dataType: "json",
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            if (data.Result) {
                jQuery(GRID_AGENTS).trigger('reloadGrid');
            }
            else {
                jAlert("A problem ocurred during updating", "Commissions Report");
            }
        }
    });

コントローラー上で：

    [HttpPost]
    [JsonFilter(Param = "commissions", JsonDataType = typeof(List<CommissionsJs>))]
    public ActionResult SubmitCommissions(List<CommissionsJs> commissions)
    {
        var result = dosomething(commissions);
        var jsonData = new
        {
            Result = true,
            Message = "Success"
        };
        if (result < 1)
        {
            jsonData = new
            {
                Result = false,
                Message = "Problem"
            };
        }
        return Json(jsonData);
    }

JsonFilterクラスを作成します（JSCリファレンスのおかげ）。

    public class JsonFilter : ActionFilterAttribute
    {
        public string Param { get; set; }
        public Type JsonDataType { get; set; }
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            if (filterContext.HttpContext.Request.ContentType.Contains("application/json"))
            {
                string inputContent;
                using (var sr = new StreamReader(filterContext.HttpContext.Request.InputStream))
                {
                    inputContent = sr.ReadToEnd();
                }
                var result = JsonConvert.DeserializeObject(inputContent, JsonDataType);
                filterContext.ActionParameters[Param] = result;
            }
        }
    }

別のクラスを作成して、フィルターがJSON文字列を実際の操作可能なオブジェクトに解析できるようにします。このクラスcomissionsJSは、jqGridのすべての行です。

    public class CommissionsJs
    {
        public string Amount { get; set; }

        public string CheckNumber { get; set; }

        public string Contract { get; set; }
        public string DatePayed { get; set; }
        public string DealerName { get; set; }
        public string ID { get; set; }
        public string IdAgentPayment { get; set; }
        public string Notes { get; set; }
        public string PaymentMethodName { get; set; }
        public string RowNumber { get; set; }
        public string AgentId { get; set; }
    }

この例が、複雑なオブジェクトの投稿方法を説明するのに役立つことを願っています。

7
Sanchitos

何てことだ。特別なことをする必要はありません。投稿セクションでのみ次のようにします。

    $.post(yourURL,{ '': results})(function(e){ ...}

サーバーではこれを使用します：

   public ActionResult MethodName(List<yourViewModel> model){...}

このリンク お手伝いします...

0
mahdi moghimi