Asp.net 部分视图 - 单击后设置 html 和 css - 不改变它的状态
Posted
技术标签:
【中文标题】Asp.net 部分视图 - 单击后设置 html 和 css - 不改变它的状态【英文标题】：Asp.net partial view - setting html and css after clicked - not changing it's state 【发布时间】：2020-12-23 02:06:43 【问题描述】：Asp.net 局部视图 - 点击后设置 html 和 css - 不改变它的状态
我有一个带有嵌入式局部视图（拇指和计数）的父视图。
局部视图有 2 个拇指和 2 个计数。
向上拇指已禁用并且计数 = 1。另外绿色表示它之前已被选中。 向下拇指已启用并且计数 = 0。黑色表示它可以被选中。
当我单击向下拇指时，我执行一个 javascript 函数，该函数调用控制器的操作方法来相应地设置数据库的计数，设置会话变量并返回带有更新的视图模型的局部视图。在这一点上，我希望视图改变它的状态 - 计数并禁用/启用适当的拇指。
但是，事实并非如此。为什么？它不会反映计数（在 html 中），也不会返回到 $(document).ready(function () 执行函数以设置拇指的适当视觉更改（禁用/启用和更改颜色）。
所以，我采取了第二种方法。成功调用 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>
下面是动作方法：
[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);
【问题讨论】：
您的动作/视图设计看起来有点奇怪。 HttpPostSetBlogLikeOrDisLike 应该只返回更新后的喜欢/不喜欢计数并使用 jQuery 在 HTML 中呈现计数。我认为Session 没有必要。
Li-Jyu...这里有两种方法。第一个是我期望的工作，而不必使用使用会话变量的第二个。第一个返回更新的视图模型。此时，我希望视图使用更新的视图模型刷新其自身并更改其状态 - 计数并禁用/启用适当的拇指。它不是。它没有进入 $(document).ready(function () ，它将再次开始构建视图。
Li-jyu..我听说你在第二种方法中不使用会话变量，但我和我使用 jQuery 来呈现计数并设置颜色，但 jQuery 不起作用。我看到我被抛出并执行设置。它们都是正确的值并被应用，但没有状态变化反映在局部视图上。
我不认为 val 在这种情况下可以设置计数，因为您没有设置表单元素的值（计数在跨度中）-尝试@987654332 @ 改为设置元素的innerHtml。
更改这些$(".dislikeCount").text(count); 和 $(".likeCount").text(count);
【参考方案1】：
简而言之：当您想更改 <span> 的内容时，请使用 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()：
.val()方法主要用于获取
input、select、textarea等表单元素的值。在空集合上调用时，它返回undefined。
由于您在 span 元素中调用 val()，因此不会有任何更改。
您应该使用text() 或html()。例如：
$(".likeCount").text(count);
祝你好运！
【讨论】：
以上是关于Asp.net 部分视图 - 单击后设置 html 和 css - 不改变它的状态的主要内容，如果未能解决你的问题，请参考以下文章