ReferenceError: 'x' 未定義 - asp.net mvc 部分視圖和 jQuery/JavaScript - 將整個 model 傳遞給操作方法

Question

在部分視圖中，我嘗試將 ENTIRE model 傳遞給控制器的操作方法，但出現錯誤。 （但是，我可以很好地傳遞 model 的單個屬性 - 見底部）：

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

我收到一個錯誤：

 GnbgWebClient is not defined ReferenceError: GnbgWebClient is not defined

如控制台所示。

我有一個斷點。 我可以看到 model 和控制器操作方法的帖子中的值。

---

注意：如果我用單引號將@Model 括起來，例如：

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

該帖子已發布，但收到的 model 不包含任何值。 它被初始化。

---

注意：我嘗試使用參數名稱並且不使用單引號：

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

但得到相同的錯誤 - 未定義 GnbgWebClient ReferenceError: GnbgWebClient is not defined

相同的標准，不同版本的帖子，但結果相同：

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

---

注意：我嘗試使用參數名稱和單引號：

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

該帖子已發布，但 model 只有 NULL。 不是我傳入的值。

相同的標准，不同版本的帖子，但結果相同：

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

---

現在我從輸入 model 創建一個 JavaScript 變量，其結構與輸入 model 相同。

我得到一個類似的參考錯誤：

 holdLikeOrDislikeVM is not defined ReferenceError: holdLikeOrDislikeVM is not defined

如控制台所示。

我有一個斷點。 我可以在控制器操作方法的帖子中看到 JavaScript 變量和值。

---

現在只需使用參數名稱傳遞 Model 的 SINGLE 屬性，不帶單引號：

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

它到達 controller 並顯示正確的值。

在這里，我只是使用參數名稱和單引號傳遞 Model 的單個屬性：

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

它到達 controller 並顯示正確的值。

---

部分視圖代碼：

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

controller動作方法：

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

        Session["likeOrDislikeVM"] = likeOrDislikeVM;
    }

Answer 1

您需要序列化 model。 如果您查看源代碼，您可以在頁面上看到正在創建的亂碼。 您將看到正在使用 c# 類型名稱。

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

Answer 2

您不應按原樣直接傳遞@Model。 你應該用單引號括起來。

幾個可行的步驟：

1. 嘗試將 HttpPost 添加到操作中。
2. 將數據發布到 controller 始終最簡單靈活的方法是使用 AJAX，因為它在發布時提供了各種選項。