javascript - Asp.net 部分 View - 单击后设置 html 和 css - 不更改其状态

Question

Asp.net 部分 View - 单击后设置 html 和 css - 不更改其状态

我有一个带有嵌入部分 View (拇指和计数)的父 View 。

局部 View 有 2 个拇指和 2 个计数。

向上拇指被禁用，并且计数 = 1。同时绿色表示它之前已被选择。 向下拇指已启用且计数 = 0。同时黑色表示可以选择它。

当我单击向下拇指时，我会执行一个 JavaScript 函数，该函数调用 Controller 的操作方法来相应地设置数据库上的计数、设置 session 变量并返回具有更新的 View 模型的部分 View 。此时，我希望 View 能够更改其状态 - 计数并禁用/启用适当的拇指。

然而，事实并非如此。为什么？它不会反射(reflect)计数(在 html 中)，也不会返回 $(document).ready(function () ，该 $(document).ready(function () 执行函数以设置拇指的适当视觉更改(禁用/启用和更改颜色)。

所以，我采取了第二种方法。成功调用操作方法后，我在 JavaScript 函数中使用 session 变量来反射(reflect)计数(在 html 中)并为拇指设置适当的视觉更改(禁用/启用和更改颜色)。我看到我被抛出并执行设置。它们都是正确的值并已应用，但没有状态更改反射(reflect)在部分 View 上。

为什么不进行设置 - 刷新部分 View 以反射(reflect)计数并禁用/启用适当的拇指。？

我希望部分 View 如下所示。向上拇指启用且计数 = 0，向下拇指计数 = 1 且禁用。

---

这是部分 View :

@model GbngWebClient.Models.LikeOrDislikeVM

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

    .fa:hover {
        color: blue;
    }

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

.my-button {
    border: none;
    padding: 8px 10px;
    float: left;
    font-size: 16px;
    margin: 4px 2px;
    background-color: white;
}
</style>


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

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

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

        // JavaScript needs it as 'false'. So using these 'const' to convert them.
        const False = false, True = true;

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

        // For when clicking the BlogLike thumb.
        $('.blogLike').on('click', function () {
            // Call the BlogPublished controllers action method to set the blog's LikeCount.
                 
            $.ajax({
                type: 'POST',
                data: { likeOrDislikeIndicator: "L" },
                success: function (response) {
                    // Call to the server side to get the session variable and then set the HTML.
                    GetSessionVarAndSetHtml("LikeDisabled");
                    GetSessionVarAndSetHtml("DisLikeDisabled");
                    GetSessionVarAndSetHtml("LikeCount");
                    GetSessionVarAndSetHtml("DisLikeCount");
                },
                error: function (xhr, ajaxOptions, thrownError) {
                   alert("Critical Error");
                }
            })
        });

        // For when clicking the BlogDisLike.
        $('.blogDisLike').on('click', function () {
            // Call the BlogPublished controllers action method to set the blog's DisLikeCount.
        
            $.ajax({
                type: 'POST',
                url: '@Url.Action("SetBlogLikeOrDisLike", "BlogPublished")',
                data: { likeOrDislikeIndicator: "D" },
                success: function (response) {
                    // Call to the server side to get the session variable and then set the HTML.
                    GetSessionVarAndSetHtml("LikeDisabled");
                    GetSessionVarAndSetHtml("DisLikeDisabled");
                    GetSessionVarAndSetHtml("LikeCount");
                    GetSessionVarAndSetHtml("DisLikeCount");
                },
                error: function (xhr, ajaxOptions, thrownError) {
                   alert("Critical Error");
                }
            })
        });

        //-----------------------------------------------------------------------------------------
        // Call to the server side to get the session variables. Then set the Html accordingly.
        //-----------------------------------------------------------------------------------------
        function GetSessionVarAndSetHtml(toBeProcessed) {
            // For testing:
            console.log('Here at GetSessionVarAndSetHtml. ');

             $.ajax({
                type: 'GET',
                url: '@Url.Action("GetSessionVar", "BlogPublished")',
                data: { toBeProcessed: toBeProcessed },
                success: function (response) {
                   console.log('Response:  ' + response);

                    if (toBeProcessed == "LikeDisabled")
                    {
                       // Set the Html. Response will be either true or false.
                       SetLike(response);
                    };

                    if (toBeProcessed == "DisLikeDisabled") {
                        // Set the Html. Response will be either true or false.
                        SetDisLike(response);
                    };

                    if (toBeProcessed == "LikeCount") {
                        // Set the Html. Response will be an integer.
                        SetLikeCount(response);
                    };

                    if (toBeProcessed == "DisLikeCount") {
                        // Set the Html. Response will be an integer.
                        SetDisLikeCount(response);
                    };
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("Critical Error");
             }
           })
        }

        //--------------------------------------------------------------------------------------
        // Set the disabled attribute to true or false and set color.
        //--------------------------------------------------------------------------------------
        function SetLike(disabledSwitch) {
            // For testing:
            console.log('Here at Setlike. ' + disabledSwitch);

            $(".blogLike").attr('disabled', disabledSwitch);

            if (disabledSwitch == true )
            {
                // Show by color that it was liked.
                $(".blogLike").css('color', 'green');
            }

            if (disabledSwitch == false)
            {
                // Show by color that it can be clicked.
                $(".blogLike").css('color', 'black');
            }
        }

        //--------------------------------------------------------------------------------------
        // Set the disabled attribute to true or false and set color.
        //--------------------------------------------------------------------------------------
        function SetDisLike(disabledSwitch) {
            // For testing:
            console.log('Here at SetDisLike. ' + disabledSwitch);

            $(".blogDisLike").attr('disabled', disabledSwitch);

            if (disabledSwitch == true)
            {
                // Show by color that it was disliked.
                $(".blogDisLike").css('color', 'green');
            }

            if (disabledSwitch == false)
            {
                // Show by color that it can be clicked.
                $(".blogDisLike").css('color', 'black');
            }
        }

        //--------------------------------------------------------------------------------------
        // Set the like count.
        //--------------------------------------------------------------------------------------
        function SetLikeCount(count) {
            // For testing:
            console.log('Here at SetLikeCount. ' + count);

            $(".likeCount").val(count);
        }

        //--------------------------------------------------------------------------------------
        // Set the dislike count.
        //--------------------------------------------------------------------------------------
        function SetDisLikeCount(count) {
            // For testing:
            console.log('Here at SetDisLikeCount. ' + count);

            $(".dislikeCount").val(count);
        }
    });
</script>

---

这里是操作方法:

    [HttpPost]
    public async Task<ActionResult> SetBlogLikeOrDisLike(string likeOrDislikeIndicator)
    {
        BLL_BlogPublished bll_BlogPublished = new BLL_BlogPublished();

        SetBlogLikeOrDisLikeResult setBlogLikeOrDisLikeResult = new SetBlogLikeOrDisLikeResult();

        LikeOrDislikeVM likeOrDislikeVM = new LikeOrDislikeVM();

        try
        {
            // Update the 'like count' or 'dislike count' in the Blog table and (update/insert) a corresponding entry in the UserBlogPreference table.
            setBlogLikeOrDisLikeResult = await bll_BlogPublished.SetBlogLikeOrDisLike(Convert.ToInt32(Session["BlogId"]), Convert.ToInt32(Session["UserId"]), Session["UserName"].ToString(), likeOrDislikeIndicator);

            // Check if an error occurred in the web api.
            if (setBlogLikeOrDisLikeResult.ApiErrorMessage == null)
            {
                 if (setBlogLikeOrDisLikeResult.Status == 1)
                {
                    //  Set these view model properties model from session variables.
                    likeOrDislikeVM.BlogId = Convert.ToInt32(Session["BlogId"]);
                    likeOrDislikeVM.UserId = Convert.ToInt32(Session["UserId"]);

                    // Set these view model properties from what was returned.
                    likeOrDislikeVM.LikeCount = setBlogLikeOrDisLikeResult.LikeCount;
                    likeOrDislikeVM.DisLikeCount = setBlogLikeOrDisLikeResult.DisLikeCount;
                    likeOrDislikeVM.LikeDisabled = setBlogLikeOrDisLikeResult.LikeDisabled;
                    likeOrDislikeVM.DisLikeDisabled = setBlogLikeOrDisLikeResult.DisLikeDisabled;

                    // Set the session variables that will be used in the partial view.
                    SetIntegerSessionVar("LikeCount", setBlogLikeOrDisLikeResult.LikeCount);
                    SetIntegerSessionVar("DisLikeCount", setBlogLikeOrDisLikeResult.DisLikeCount);
                    SetBooleanSessionVar("LikeDisabled", setBlogLikeOrDisLikeResult.LikeDisabled);
                    SetBooleanSessionVar("DisLikeDisabled", setBlogLikeOrDisLikeResult.DisLikeDisabled);
                }
                else if (setBlogLikeOrDisLikeResult.Status == 2)
                {
                    ViewBag.errormessage = "Process Violation: The blog does not exist.";
                }
                else if (setBlogLikeOrDisLikeResult.Status == 3)
                {
                    ViewBag.errormessage = "Process Violation: The user does not exist.";
                }
                else if (setBlogLikeOrDisLikeResult.Status == 4)
                {
                    ViewBag.errormessage = "Process Violation: An invalid value for the preference type.";
                }
            }
            else
            {
                 ViewBag.errormessage = setBlogLikeOrDisLikeResult.ApiErrorMessage;
            }
        }
        catch (Exception ex1)
        {
            exceptionMessage = "Server error on setting the blog like count. Please contact the administrator.";

            try
            {
                ...
            }
            catch (Exception ex2)
            {
                ...
            }
        }

        // Return the partial view with the view model.
        // - This will contain valid data, an error or a web api error message.            
        return PartialView("~/Views/BlogPublished/_BlogLikeAndDislike.cshtml", likeOrDislikeVM);
    }

Answer 1

简而言之:使用text()但不是val()当您想要更改 <span> 的内容时.

这是你的 js 代码:

function SetLikeCount(count) {
  // For testing:
  console.log('Here at SetLikeCount. ' + count);
  $(".likeCount").val(count);
}

这是相应的html:

<span class="my-size, likeCount"> : @Model.LikeCount </span>

如果你能得到正确的count在console.log()但不在 .val() 中函数，这就是 .val() 的问题功能。不是您的 API 调用。

official documentation from jQuery说明何时使用val() :

The .val() method is primarily used to get the values of form elements such as input, select and textarea. When called on an empty collection, it returns undefined.

自从您调用val()在 span元素，什么都不会改变。

相反，您应该使用 text()或html() 。例如:

$(".likeCount").text(count);

祝你好运!