0

クラスのレコードを表示する、厳密に型指定された Razor ビューがあります。このビューには、ユーザーがレコードを更新するために使用できるフォーム (ドロップダウン、いくつかのチェックボックス、およびいくつかのテキストボックス) が表示されます。ユーザーがコントロールの値を変更してフィールドを変更すると、すぐに ajax 呼び出しが Web API に送信され、そのフィールドが更新されます。次の Ajax 呼び出しは正常に機能します。

$(document).ready(function () {
    $(this).on("change", function (e) {
        var editRecordURL = $("#editRecordURL").val();
        var key = $("#AccessVM_Id").val();
        var mode = $("#AccessVM_AccessMode").val();
        var failLim = $("#AccessVM_LoginFailLimit").val();
        var cap = $("#AccessVM_PwdWCap").is(':checked');
        ...
        var rec = {
            Id: key,
            AccessMode: mode,
            LoginFailLimit: failLim,
            PwdWCap: cap,
            ....
        };

        $.ajax({
            type: "PUT",
            url: editRecordURL,
            data: JSON.stringify(rec),
            contentType: 'application/json; charset=utf-8',
            success: function (msg) {
                bootbox.alert("Success: Record updated successfully!");
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                bootbox.alert("Error: " + errorThrown);
            }
        });
    });
});

ただし、この関数をより一般的なものにして、他のフォーム (特に更新するデータが多いフォーム) で再利用できるようにしたいと考えています。理想的には、rec オブジェクトは次のように取り込まれます。

var rec = $("#form").serializeArray();

残念ながら、適用JSON.stringify()した後rec、期待される JSON 文字列が返されないため、これは機能しません。代わりに、次のような一連の名前と値のペアを送信します。

[{"name":"__RequestVerificationToken","value":"qVedWHJ6HIrqtLJpTxp4m5D2ehZ_AdjCOvQtz4Jyzlg0cdocsWqcTCiE2jzIEB7UsJPwuSZeZF7y1GsluHNrNCDV1wrHjU1UJO5vMMGTLB41"},{"name":"AccessVM.Id","value":"1"},{"name":"AccessVM.AccessMode","value":"1"},{"name":"AccessVM.LoginFailLimit","value":"10"},{"name":"AccessVM.PwdWCap","value":"true"},{"name":"AccessVM.PwdWCap","value":"false"},{"name":"AccessVM.PwdWNum","value":"true"},{"name":"AccessVM.PwdWNum","value":"false"},{"name":"AccessVM.PwdWSC","value":"true"},{"name":"AccessVM.PwdWSC","value":"false"},{"name":"AccessVM.PwdMinLen","value":"6"},{"name":"AccessVM.PwdMaxLen","value":"25"},{"name":"AccessVM.PwdChange","value":"90"},{"name":"AccessVM.PwdPrevUsedLimit","value":"10"}]

では、文字列が次のようになるようにこれを修正するにはどうすればよいですか。

[{"AccessVM.Id": 1, "AccessVM.AccessMode": 1, "AccessVM.LoginFailLimit": 10, "AccessVM.PwdWCap": true, "AccessVM.PwdWNum": true, "AccessVM.PwdWSC": false, "AccessVM.PwdMinLen": 6, "AccessVM.PwdMaxLen": 25, "AccessVM.PwdChange": 90, "AccessVM.PwdPrevUsedLimit": 10}]

Web API コントローラー:

public class PoliciesController : ApiController
{
    ....
    // PUT: api/policies/1
    [ResponseType(typeof(void))]
    public IHttpActionResult PutPolicy(int id, AccessItemViewModel polDto)
    {
        ....
    }
    ....
}

モデルを見る

public class PolicyViewModel
{
    public AccessItemViewModel AccessVM { get; set; }
    ....
}

public class AccessItemViewModel
{
    public int Id { get; set; }
    public int AccessMode { get; set; }  
    public int LoginFailLimit { get; set; } 
    public bool PwdWCap { get; set; }   
    ....
}

かみそりビュー:

@model App.Web.ViewModels.PolicyViewModel
....
@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary("", new { @class = "text-danger" })
    <input type="hidden" id="editRecordURL" value="@Model.ExtraVM.EditRecordUrl" />
    @Html.LabelFor(m => m.AccessVM.AccessMode, new { @class = "col-xs-5" })
    @Html.HiddenFor(m => m.AccessVM.Id)
    @Html.DropDownListFor(m => m.AccessVM.AccessMode, new SelectList(Model.AccessModes, "Mode", "Description"), null, new { @class = "input-sm col-xs-7" })
    @Html.LabelFor(m => m.AccessVM.LoginFailLimit, new { @class = "col-xs-9" })
    @Html.DropDownListFor(m => m.AccessVM.LoginFailLimit, new SelectList(Model.LoginLimits, "LoginFailLimit", "Value"), null, new { @class = "input-sm col-xs-3" })
    @Html.LabelFor(m => m.AccessVM.PwdWCap, new { @class = "col-xs-11" })
    @Html.CheckBoxFor(m => m.AccessVM.PwdWCap, new { @class = "input-xs col-xs-1" })
    ....
}
4

1 に答える 1