Блог

Asp.net частичный просмотр — настройка html и css после нажатия — не изменение его состояния

У меня есть родительский вид со встроенным частичным видом (большие пальцы и графы).

Частичный просмотр имеет 2 больших пальца и 2 счета.

Большой палец вверх отключен и имеет значение count = 1. Также зеленый, чтобы указать, что он был ранее выбран. Палец вниз включен и имеет значение count = 0. Также черный, чтобы указать, что он может быть выбран.

Когда я нажимаю на палец вниз, я выполняю функцию JavaScript, которая вызывает метод действия контроллера для соответствующей настройки счетчиков в базе данных, устанавливает переменные сеанса и возвращает частичное представление с обновленной моделью представления. На этом этапе я бы ожидал, что представление изменит свое состояние — количество и отключит / включит соответствующие большие пальцы.

Однако это не так. Почему? Это НЕ отражает количество (в html) и не возвращается в $ (document).ready(функция (), которая выполняет функции для установки соответствующих визуальных изменений для больших пальцев (отключить / включить и изменить цвет).

Итак, вместо этого я выбрал 2-й подход. После успешного вызова метода action я использую переменные сеанса в функциях JavaScript для отражения количества (в html) и для установки соответствующих визуальных изменений для больших пальцев (отключить / включить и изменить цвет).). Я вижу, что я бросил и выполнил настройки. Все они являются правильными значениями и применяются, но изменение состояния не отражается на частичном представлении.

Почему он не принимает настройки — обновите частичный просмотр, чтобы отразить количество и отключить / включить соответствующий thumb.?

Я бы ожидал, что частичный просмотр будет выглядеть так, как показано ниже. Большой палец вверх включен и количество = 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);
    }
  

Короче говоря: используйте, 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.

В официальной документации от jQuery указано, когда использовать val() :

Метод .val() в основном используется для получения значений элементов формы, таких как input , select и textarea . При вызове пустой коллекции он возвращается undefined .

Поскольку вы вызываете val() в span элементе, ничего не изменится.

Вместо этого вы должны использовать text() или html() . Например:

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

Удачи!