如何正确使用 Html.Raw(Json.Encode(Model))？

Posted 2023-05-08

【中文标题】如何正确使用 Html.Raw(Json.Encode(Model))？

【英文标题】：How to use Html.Raw(Json.Encode(Model)) properly?

【发布时间】：2015-04-26 09:25:44

【问题描述】：

我正在尝试使用以下代码对我的 MVC 模型进行编码，但警报消息给了我一个空值。我不确定为什么它给我一个空值，因为这是一个创建表单。我正在尝试从中创建一个模型，并且我的 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>
 

【问题讨论】：

这个过程很麻烦，可以使用this method 轻松避免，它将以 MVC 理解的方式对您的表单进行编码，因此它可以隐式转换回您的模型类型。跨度>

谢谢！！！我去看看.....

【参考方案1】：

它返回空值，因为它是空值。用户最终将输入到表单中的数据在页面呈现时不可用（并且您对 Json.Encode(Model) 的调用运行）。 JavaScript 之类的东西在 client-side 运行，而所有 Razor 的东西在发送到客户端之前运行 server-side。如果您想从表单中获取用户输入的数据以用于您的 AJAX 调用，那么您需要按照@Sippy 的建议进行操作并通过 JavaScript 检索它：

$('form').serializeObject();

此外，如果您在渲染时确实需要对模型进行实际编码（可能与 Knockout 之类的东西一起使用），则无需将其设置为字符串然后解析该字符串。只需将其设置为常规 JavaScript 对象即可。无论如何，这就是 JSON：

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

【讨论】：

虽然不直观，但在这里使用 JSON.parse 会更快。例如var obj= JSON.parse('@Html.Raw(Json.Encode(Model))'); 来源：youtube.com/watch?v=ff4fgQxPaO0

【参考方案2】：

我的回答 here 显示（在 JQuery 部分中）如何完全使用 Json.Encode。

其背后的基本思想是，通过使用 jQuery 函数，您可以构建 JSON 对象，MVC 将能够将其解析为任何形式的数据模型。

函数如下：

$.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 来唯一标识您的表单。

【参考方案3】：

此示例对模型（即List<My>）进行编码并将其作为名为模型的 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); );

【参考方案4】：

对于那些想要将模型传递给操作方法（HttpGet）的人 使用 Url.Action 助手

  @model AddViewModel

   <script type="text/javascript">

        $(document).ready(function () 
            openDoc();
        );

        function openDoc() 

            var model = '@Html.Raw(Json.Serialize(Model))';
            var obj = JSON.parse(model);
            var params = $.param(obj);
            var url = '@Url.Action("GetPdf", "Declaration")?' + params;

            window.open(url);
        

    </script>