Why @Model haven't been passed to controller's action parameter by jquery script?

问题

I wanted to pass Person object which is @Model in Details.cshtml(.../Person/Details/id) view to the Test action in PersonController which returns partial view Test.cshtml.

The partial view is expandable/collapsable by the button so I use script. Everything works beside that @Model I try to pass to Test action is not passed-> it is null inside the Test action

Why it(model) hasn't been passed and how pass it?

Full code:

Script:

<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>

Details View:

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

</div>

Controller's action:

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

Partial view:

@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 />

COLLAPSED:

EXPANDED:

EDIT:

Is it bad if I just do:

in script:

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

in action:

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

回答1:

Based on comments, it seems unnecessary to make AJAX calls to get data that you already have access to when rendering the main view. An alternative could be to render the Notes value in a <div> and toggle the visibility using a <button>, so in the main view

@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>

and the script

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

Note the class name of the button is also toggled to change the appearance of the button from 'expanded' to 'collapsed' (similar to a treeview control)

Refer fiddle

回答2:

Try to replace

data: { person: '@Model' },

to

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

JsonConvert.SerializeObject is method from Newtonsoft.Json

来源：https://stackoverflow.com/questions/25456733/why-model-havent-been-passed-to-controllers-action-parameter-by-jquery-script