web-dev-qa-db-ja.com

Html.Raw（Json.Encode（Model））を正しく使用するにはどうすればよいですか？

次のコードでMVCモデルをエンコードしようとしていますが、アラートメッセージにnull値が表示されます。これは作成フォームであるため、なぜnull値が返されるのかわかりません。これからモデルを作成しようとしていますが、HTMLコードの外観は次のとおりです。

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Customer</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" id="submit" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    <script type="text/javascript">
        $(document).ready(function () {
            $('#submit').click(function () {
                var JsonModel = '@Html.Raw(Json.Encode(@Model))';

                alert(JsonModel); // json as string

                var model = JSON.parse(JsonModel); // will give json
                alert(model);

                $.ajax({
                    type: "POST",
                    url: "../Home/Index",
                    data: {"cus" :  model},
                    success: function(data){
                        alert("done");
                    },
                    error:function(){
                        alert("Error!!!!");
                    }
                });
            });
        });
    </script>
}
jqueryajaxjsonasp.net-mvcasp.net-ajax
4
Dayan

私の答え ここ は（JQueryセクションで）_Json.Encode_を完全に使用して回避する方法を示しています。

その背後にある基本的な考え方は、jQuery関数を使用することで、MVCが任意の形式からデータモデルに解析できるJSONオブジェクトを構築できるということです。

機能は次のとおりです。

_$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name]) {
            if (!o[this.name].Push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].Push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};
_

あなたの場合、あなたのAJAXは

_ $.ajax({
     type: "POST",
     url: "../Home/Index",
     data: { cus : JSON.stringify($('form').serializeObject()) },
     success: function(data){
         alert("done");
     },
     error:function(){
         alert("Error!!!!");
     }
 });
_

$('form')を機能させるのに問題がある場合、おそらく同じページに多数のフォームがある場合は、クラスまたはIDを使用してフォームを一意に識別します。

0
Inspector Squirrel

is nullであるため、nullを返します。ユーザーが最終的にフォームに入力するデータは、ページがレンダリングされているとき（およびJson.Encode(Model)の呼び出しが実行されているとき）には利用できません。 JavaScriptのようなものはclient-sideを実行しますが、Razorのものはすべてserver-sideを実行してから、クライアントに送信されます。 AJAX呼び出しで使用するために、ユーザーが入力したデータをフォームから取得する場合は、@ Sippyが提案するように実行し、JavaScriptを介して取得する必要があります。

$('form').serializeObject();

また、レンダリング時にモデルを実際にエンコードする必要がある場合（Knockoutなどで使用する場合）、モデルを文字列として設定してから解析する必要はありません。通常のJavaScriptオブジェクトとして設定するだけです。とにかくJSONはこれですべてです。

var model = @Html.Raw(Json.Encode(Model));
6
Chris Pratt

このサンプルでは、​​モデルをエンコードします（つまり、List<My>）およびPOST modelという名前のJsonオブジェクトとしてアクションに変換します。

var jsonModel = '@Html.Raw(Json.Encode(Model))';
    var id = rowid;
    $.ajax({
        url: 'DeleteRows',
        contentType: 'application/json; charset=utf-8',
        type: 'POST',
        dataType: 'html',
        data: '{ "model": { "rows":' + jsonModel + '}}'
    })
    .success(function (result) { $("#grdRows").empty(); $("#grdRows").html(result); })
    .error(function (xhr, ajaxOptions, thrownError) { alert(xhr.status + ' - ' + ajaxOptions + ' - ' + thrownError); alert(xhr.responseText); });
0
Luca