为什么 jquery 脚本没有将 @Model 传递给控制器的操作参数？答案

【问题标题】：Why @Model haven't been passed to controller's action parameter by jquery script?为什么 jquery 脚本没有将 @Model 传递给控制器的操作参数？
【发布时间】：2014-08-22 23:02:35
【问题描述】：

我想将@Model 中的Details.cshtml(.../Person/Details/id) 视图中的Person 对象传递给PersonController 中的Test 操作，该操作返回部分视图Test.cshtml。

部分视图可通过按钮展开/折叠，因此我使用脚本。除了@Model 我尝试传递给Test 操作未通过-> 它在Test 操作中为空

为什么it(model)没有通过，怎么通过的？

完整代码：

脚本：

<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);
        }

局部视图：

@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'
            },

在行动：

 [HttpPost]
        public ActionResult Test(int id) {
            System.Diagnostics.Debug.WriteLine(id);
            Person person = db.Persons.Find(id);
            System.Diagnostics.Debug.WriteLine("PASSED: ");
            System.Diagnostics.Debug.WriteLine(person.FirstName);

            return PartialView(person);
        }

【问题讨论】：

如果您不需要任何其他数据，只需传递 id 没有任何问题。这完全取决于您的需求和要求。
“只传递 id 是不是很糟糕？”。可以说是更好了。为什么要通过发回大量不必要的数据来降低网站的性能。但问题是为什么你需要这样做。在您的详细信息视图中，您正在渲染包含属性Notes 的Person 的属性，那么为什么不直接在隐藏的<div> 中渲染Notes 并使用脚本来切换可见性？
如果Notes 的值在用户查看页面时没有动态变化，那么再次调用服务器似乎没有意义。您可以渲染一个button，后跟一个包含Notes 值的div，然后在按钮click 事件上，切换div 和button 文本的可见性
从链接的问题中，如果Notes 是说您在获取Person 时没有填充的大型集合，那么ajax 调用可能是有效的，在这种情况下您可能会通过@ 987654351@，调用GetNotesForUser(int Id)之类的方法并传回IEnumerable<Notes>的部分视图，但是从您发布的代码来看，您所做的似乎没有必要。
好的，给我 15 分钟

标签： javascript jquery .net asp.net-mvc asp.net-mvc-5.1

【解决方案1】：

基于 cmets，似乎没有必要通过 AJAX 调用来获取您在渲染主视图时已经可以访问的数据。另一种方法是在<div> 中呈现Notes 值并使用<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');
});

注意按钮的类名也被切换以将按钮的外观从“展开”更改为“折叠”（类似于树视图控件）

Refer fiddle

【讨论】：

【解决方案2】：

尝试替换

data: { person: '@Model' },

到

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

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

【讨论】：

我是 jquery 的新手。不应该是：person: '@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model))'？如果是，我得到：s3.postimg.org/wte2svopf/expanded.png
它应该不带引号 '' 因为你应该传递 JSON 对象而不是字符串。您还应该依赖 Newtonsoft.Json（第三方）。将此库添加到您的项目中，并在 DetailsView 顶部添加“@using Newtonsoft.Json;”
如果您还没有声明@using Newtonsoft.Json，那么您需要指定全名。
我可能在某些语法点上出错））主要思想是将模型序列化为json，然后将其传递给服务器
@ne4istb 我更正了语法并将错误发布在您帖子第一条评论的链接中。谢谢你的帮助。