Asp.net 局部视图 - 点击后设置 html 和 css - 不改变它的状态

Question

我有一个带有嵌入式局部视图（拇指和计数）的父视图。

局部视图有 2 个拇指和 2 个计数。

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

当我点击向下拇指时，我执行一个 JavaScript 函数，它调用控制器的操作方法来相应地设置数据库上的计数，设置会话变量和 returns 部分视图更新的视图模型。在这一点上，我希望视图改变它的状态——计数和 disable/enable 适当的拇指。

然而，事实并非如此。为什么？它不反映计数（在 html 中），也不返回到 $(document).ready(function () 执行函数以设置拇指的适当视觉变化（disable/enable 和改变颜色）。

因此，我采用了第二种方法。成功调用操作方法后，我在 JavaScript 函数中使用会话变量来反映计数（在 html 中）并为缩略图（disable/enable 和改变颜色）。我看到我被扔了并执行设置。它们都是正确的值并已应用，但局部视图上未反映任何状态变化。

为什么不采用设置 - 刷新局部视图以反映计数和 disable/enable 适当的缩略图。？

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

这是局部视图：

@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

简而言之：当你想改变<span>.[=31=的内容时，使用text()而不是val() ]

所以这是你的 js 代码：

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

这是对应的html:

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

如果在console.log()中可以得到正确的count，而在.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.

由于您在 span 元素中调用 val()，因此不会有任何改变。

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

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

祝你好运！

Asp.net 局部视图 - 点击后设置 html 和 css - 不改变它的状态

Asp.net partial view - setting html and css after clicked - not changing it's state

javascript

jquery

asp.net-mvc

partial-views