ReferenceError: 'x' is not defined - asp.net mvc partial view and jQuery/JavaScript - passing the entire model to an action method

Question

In a partial view, I attempt to pass an ENTIRE model to the post to the controller's action method but get an error. (However, I can pass a single property of the model just fine - see at the bottom):

$.post("/BlogPublished/SetModelSessionVar", @Model);     

I get an error:

 GnbgWebClient is not defined ReferenceError: GnbgWebClient is not defined

as seen in the console.

I have a break point. I can see the model and the values fine in the post to the controller's action method.

---

Note: If I surround the @Model WITH single quotes such as:

    $.post("/BlogPublished/SetModelSessionVar", '@Model');

The post is made but the model received does not contain any values. It is initialized.

---

Note: I tried with using the argument name and WITHOUT the single quotes:

  $.post("/BlogPublished/SetModelSessionVar", { likeOrDislikeVM: @Model } );

but get the same error - GnbgWebClient is not defined ReferenceError: GnbgWebClient is not defined

Same criteria, a different version of the post but same result:

        $.ajax({
        type: 'POST',
        url: '@Url.Action("SetModelSessionVar", "BlogPublished")',
        data: { likeOrDislikeVM: @Model},
        success: function (response) {

        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("Critical Error: something is wrong in the call to SetModelSessionVar! Status: " + xhr.status + ". Error: " + thrownError.toString() + ". Response Text: " + xhr.responseText);
        }
    })

---

Note: I tried with using the argument name and WITH the single quotes:

  $.post("/BlogPublished/SetModelSessionVar", { likeOrDislikeVM: '@Model' } );

The post is made but the model just has NULL. Not the values I am passing in.

Same criteria, a different version of the post but same result:

        $.ajax({
        type: 'POST',
        url: '@Url.Action("SetModelSessionVar", "BlogPublished")',
        data: { likeOrDislikeVM: '@Model'},
        success: function (response) {

        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("Critical Error: something is wrong in the call to SetModelSessionVar! Status: " + xhr.status + ". Error: " + thrownError.toString() + ". Response Text: " + xhr.responseText);
        }
    })

---

Now I create a JavaScript variable from the input model and the structure the same as the input model.

I get a similar reference error:

 holdLikeOrDislikeVM is not defined ReferenceError: holdLikeOrDislikeVM is not defined

as seen in the console.

I have a break point. I can see the JavaScript variable and the values fine in the post to the controller's action method.

---

Now just passing a SINGLE property of the Model using the argument name and WITHOUT the single quotes:

  $.post("/BlogPublished/SetCountSessionVar", { value: @Model.LikeCount});

and it gets to the controller and shows the correct value.

Here, I am just passing a single property of the Model using the argument name and WITH the single quotes:

  $.post("/BlogPublished/SetCountSessionVar", { value: '@Model.LikeCount'});

and it gets to the controller and shows the correct value.

---

The partial view code:

@model GbngWebClient.Models.LikeOrDislikeVM

<style>
.fa {
    cursor: pointer;
    user-select: none;
}

    .fa:hover {
        color: blue;
    }

/* I added. */
.my-size {
    font-size: 20px;
}
</style>

<div class="row">
<p><span class="blogLike my-size fa fa-thumbs-up"></span><span class="my-size"> : @Model.LikeCount</span> <span class="my-size"> | </span><span class="blogDisLike my-size fa fa-thumbs-down"></span><span class="my-size"> : @Model.DisLikeCount</span></p>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")

<script type="text/javascript">
$(document).ready(function () {
    console.log('here at ready');

    const False = false, True = true;

    // Set the disabled attributes.
    SetLike(@Model.LikeDisabled);
    SetDisLike(@Model.DisLikeDisabled);

    $.post("/BlogPublished/SetModelSessionVar", @Model);

    function SetLike(disabledSwitch) {
        console.log('here at SetLike');
        $(".blogLike").attr('disabled', disabledSwitch);

        if (disabledSwitch == true )
        {
            $(".blogLike").css('color', 'green');
        }
    }

    function SetDisLike(disabledSwitch) {
        console.log('here at SetDisLike');
        $(".blogDisLike").attr('disabled', disabledSwitch);

        if (disabledSwitch == true)
        {
            $(".blogDisLike").css('color', 'green');
        }
    }
});
</script> 

The controller action method:

    public void SetModelSessionVar(LikeOrDislikeVM likeOrDislikeVM)
    {
        // Sets a model session variable according to the argument passed in.

        Session["likeOrDislikeVM"] = likeOrDislikeVM;
    }

Answer 1

You need to serialize the model. You can see the gibberish being created on the page if you view source. You will see that the c# type name is being used.

@Html.Raw(Json.Encode(Model));