为什么@Model还没有通过jquery脚本传递给控制器​​的动作参数？

Question

我想将Person @Model（{/ 1 / Details / id）视图中的Details.cshtml对象传递给{{1}中的Test操作}}返回部分视图PersonController。

部分视图可以通过按钮扩展/折叠，因此我使用脚本。除了我Test.cshtml我试图传递给@Model动作未通过的所有内容都有效 - ＆gt;它在Test操作

中为空

为什么它（模型）没有通过以及如何通过它？

完整代码：

脚本：

Test

详细信息视图：

<script>
    function BtnOnclick() {
        $.ajax({
            type: 'POST',
            url: '@Url.Content("~/Person/Test")', 
            data: {
                person: '@Model' //HERE I TRY TO PASS PERSON
            },
            success: function (data) {
                $('#divpopup').css("display", "block");
                $('#btnExpand').css("display", "none");
                $('#divpopup')[0].innerHTML = data;
            }
        });
    }
    function CollapseDiv() {
        $('#divpopup').css("display", "none");
        $('#btnExpand').css("display", "block");
    }
</script>

控制者的行动：

@model WebApplication2.Models.Person
[...]
<p>
    <input type="button" value="Expand" id="btnExpand"
           onclick="javascript:BtnOnclick();" />
</p>
<div id="divpopup" style="display:none">

</div>

部分观点：

        [HttpPost]
        public ActionResult Test(Person person) {
           // ViewBag.Chk = parentEls;
            System.Diagnostics.Debug.WriteLine("PASSED: ");
            System.Diagnostics.Debug.WriteLine(person.FirstName); // IT IS NULL
            return PartialView(person);
        }

COLLAPSED：

EXPANDED：

修改

如果我这样做是不是很糟糕：

脚本中的

：

@model WebApplication2.Models.Person
<hr />
<h2>Survey 1</h2>

<input type="button" id="Coll" value="Collapse" onclick="javascript:CollapseDiv()" />
<dt>
    @Html.DisplayNameFor(model => model.Notes)
</dt>
<dd>
    @Html.DisplayFor(model => model.Notes)
</dd>
<hr />

行动中：

 data: {
               id: '@Model.Id'
            },

Answer 1

尝试替换

data: { person: '@Model' },

到

data: { person: @Html.Raw(JsonConvert.SerializeObject(Model)) },

JsonConvert.SerializeObject是来自Newtonsoft.Json的方法

Answer 2

根据注释，在渲染主视图时，似乎没有必要进行AJAX调用以获取您已有权访问的数据。另一种方法是在Notes中呈现<div>值并使用<button>切换可见性，因此在主视图中

@model WebApplication2.Models.Person

... // other display properties for Person

<button id="toggle"></button>
<span id="survey">Survey</span>
<div id="notes">@Html.DisplayFor(m => m.Notes)</div>

和脚本

$('#toggle').click(function() {
  $('#notes').toggle();
  $(this).toggleClass('expanded');
});

请注意，该按钮的班级名称也会切换为更改“扩展”按钮的外观。到了'倒塌'＃39; （类似于树视图控件）

Refer fiddle