没有响应局部视图的点击

Question

我有一个父视图和一个局部视图。

局部视图是 2 个伪按钮 - 拇指向上和拇指向下。一个分配了类的段落。

它没有响应点击任一拇指。也没有进入应该在“就绪”时执行的 2 个函数。

它在渲染时进入局部视图中的 jQuery。但并不完全，因为我没有看到我输入的所有控制台日志或警报。

我获得了“就绪”功能的警报和控制台日志，但没有其他功能。它不执行引用模型属性的 2 个 console.log 行，这些属性是布尔值并且每个值都为 false。

我收到此错误：jQuery.Deferred 异常：未定义 False ReferenceError：未定义 False。

但这似乎不是我的自定义代码。

---

局部视图有一个模型，其中我有我想使用 2 个布尔值以及整数的属性。

namespace GbngWebClient.Models
{
    public class LikeOrDislikeVM
    {
        public int BlogId { get; set; }
        public int UserId { get; set; }
        public int LikeCount { get; set; }
        public int DisLikeCount { get; set; }
        public bool LikeDisabled { get; set; }
        public bool DisLikeDisabled { get; set; }
    }
}

不确定是不是这个原因。我显示模型进来，false是小写进来的，这样符合JavaScript的要求。

包含部分视图的父视图（未显示所有代码）：

        @{
            // Create the variable form the LikeOrDislikeVM model.
            var likeOrDislikeVM = new GbngWebClient.Models.LikeOrDislikeVM();

            // Set the properties on the variable - most from the parent model.
            likeOrDislikeVM.BlogId = @Model.BlogPublishedByBlogId.BlogId;
            likeOrDislikeVM.UserId = Convert.ToInt32(Session["UserId"]);
            likeOrDislikeVM.LikeCount = @Model.BlogPublishedByBlogId.LikeCount;
            likeOrDislikeVM.DisLikeCount = @Model.BlogPublishedByBlogId.DisLikeCount;
            likeOrDislikeVM.LikeDisabled = @Model.BlogPublishedByBlogId.LikeDisabled;
            likeOrDislikeVM.DisLikeDisabled = @Model.BlogPublishedByBlogId.DisLikeDisabled;
        }

        <div class="row">
            <div class="col-md-1">
                @Html.Partial("_BlogLikeAndDislike", likeOrDislikeVM)
            </div>
        </div>

局部视图：

    @model GbngWebClient.Models.LikeOrDislikeVM

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

    .fa:hover {
        color: blue;
    }

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

 @* Use the values that were passed via a model. *@
 <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")

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

    console.log(@Model.LikeDisabled);
    console.log(@Model.DisLikeDisabled);

    SetLike(@Model.LikeDisabled);
    SetDisLike(@Model.DisLikeDisabled);

    $('.blogLike').on('click', function () {
        alert('Here at like');
        $.ajax({
            type: 'POST',
            url: '@Url.Action("SetBlogLikeOrDisLike", "BlogPublished")',
            data: { likeOrDislikeVM: @Model, likeOrDislikeIndicator: "L"},
            success: function (response) {

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

    $('.blogDisLike').on('click', function () {
        $.ajax({
            type: 'POST',
            url: '@Url.Action("SetBlogLikeOrDisLike", "BlogPublished")',
            data: { likeOrDislikeVM: @Model, likeOrDislikeIndicator: "D"},
            success: function (response) {

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

    function SetLike(disabledSwitch) {
        alert('Here at SetLike');
        $(".blogLike").attr('disabled', disabledSwitch);

        //if (disabledSwitch == false )
        //{
        //    $(".blogLike").color('green');
        //}
    }

    function SetDisLike(disabledSwitch) {
        alert('Here at SetDisLike');
        $(".blogDisLike").attr('disabled', disabledSwitch);

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

---

在模型属性周围加上刻度。代码现在执行，但布尔值是 False 而不是 false。然而，模型屏幕截图显示它们是错误的。 JavaScript 需要它们为假。为什么会这样？

Answer 1

为了将 False 转换为 false 并将 True 转换为 true，我添加了 const

const False = false, True = true;

并将它们传递给不带刻度的函数。

我现在得到 false 和 true 并且代码正确执行。

SetLike(@Model.LikeDisabled);
SetDisLike(@Model.DisLikeDisabled);