Javascript Asp.net局部视图-单击后设置html和css-不更改它'；s州

Asp.net局部视图-单击后设置html和css-不更改其状态

我有一个包含嵌入部分视图（拇指和计数）的父视图

局部视图有两个拇指和两个计数

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

当我点击下拇指时，我执行一个JavaScript函数，该函数调用控制器的action方法来相应地设置数据库的计数，设置会话变量并返回带有更新视图模型的部分视图。在这一点上，我希望视图改变它的状态-计数并禁用/启用适当的拇指

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

因此，我采取了第二种方法。在成功调用action方法后，我在JavaScript函数中使用会话变量来反映计数（在html中），并为拇指设置适当的视觉变化（禁用/启用和更改颜色）。我看到我被抛出并执行设置。它们都是正确的值并已应用，但局部视图上未反映任何状态更改

为什么不采用设置-刷新局部视图以反映计数并禁用/启用相应的拇指

我希望局部视图如下所示。上拇指启用且计数为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>

@model GbngWebClient.Models.LikeOrDislikeVM
法兰西{
光标：指针；
用户选择：无；
}
.fa:悬停{
颜色：蓝色；
}
/*我补充道*/
.我的尺码{
字体大小：20px；
}
.我的钮扣{
边界：无；
填充：8px 10px；
浮动：左；
字体大小：16px；
利润：4倍2倍；
背景色：白色；
}
：@Model.LikeCount
：@Model.DisLikeCount
@Scripts.Render（“~/bundles/jquery”）
@Scripts.Render（“~/bundles/bootstrap”）
@style.Render（“~/Content/css”）
$（文档）.ready（函数（）{
//对于测试：
console.log（'此处已准备就绪'）；
//JavaScript需要将其设置为“false”。因此使用这些“const”来转换它们。
常量False=False，True=True；
//设置初始禁用属性和颜色。
SetLike（@Model.LikeDisabled）；
setunlike（@Model.DisLikeDisabled）；
//用于单击博客状拇指时。
$（'.blogLike'）。在（'click'，函数（）{
//调用BlogPublishedController操作方法来设置日志的LikeCount。
$.ajax({
键入：“POST”，
数据：{likeOrDislikeIndicator:“L”}，
成功：功能（响应）{
//调用服务器端获取会话变量，然后设置HTML。
GetSessionVarAndSetHtml（“LikeDisabled”）；
GetSessionVarAndSetHtml（“不喜欢禁用”）；
GetSessionVarAndSetHtml（“LikeCount”）；
GetSessionVarAndSetHtml（“DisLikeCount”）；
},
错误：函数（xhr、ajaxOptions、thrownError）{
警报（“严重错误”）；
}
})
});
//用于单击博客时。
$（'.blogloise'）。在（'click'，函数（）{
//调用BlogPublishedController操作方法来设置日志的DisLikeCount。
$.ajax({
键入：“POST”，
url:'@url.Action（“SetBlogLikeOrDisLike”，“blogpublisted”），
数据：{likeOrDislikeIndicator:“D”}，
成功：功能（响应）{
//调用服务器端获取会话变量，然后设置HTML。
GetSessionVarAndSetHtml（“LikeDisabled”）；
GetSessionVarAndSetHtml（“不喜欢禁用”）；
GetSessionVarAndSetHtml（“LikeCount”）；
GetSessionVarAndSetHtml（“DisLikeCount”）；
},
错误：函数（xhr、ajaxOptions、thrownError）{
警报（“严重错误”）；
}
})
});
//-----------------------------------------------------------------------------------------
//调用服务器端获取会话变量。然后相应地设置Html。
//-----------------------------------------------------------------------------------------
函数GetSessionVarAndSetHtml（toBeProcessed）{
//对于测试：
log（'此处为GetSessionVarAndSetHtml'）；
$.ajax({
键入：“GET”，
url:'@url.Action（“GetSessionVar”，“BlogPublished”），
数据：{toBeProcessed:toBeProcessed}，
成功：功能（响应）{
console.log（'响应：'+响应）；
if（toBeProcessed==“LikeDisabled”）
{
//设置Html。响应将为true或false。
SetLike（反应）；
};
if（toBeProcessed==“DisLikeDisabled”）{
//设置Html。响应将为true或false。
不喜欢（回应）；
};
if（toBeProcessed==“LikeCount”）{
//设置Html。响应将是一个整数。
SetLikeCount（响应）；
};
if（toBeProcessed==“DisLikeCount”）{
    [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);
    }