如何解决Asp.net部分视图-单击后设置html和CSS-不更改其状态
Asp.net部分视图-单击后设置html和CSS-不更改其状态
我有一个带有嵌入式局部视图（拇指和数数）的父视图。
局部视图有2个拇指和2个计数。
向上的拇指已禁用，并且计数=1。绿色也表示先前已选择它。 向下的拇指已启用，并且计数=0。也可以选择黑色来指示它。
当我单击向下的拇指时，我执行一个JavaScript函数，该函数调用控制器的action方法来相应地设置数据库的计数，设置会话变量并返回具有更新视图模型的部分视图。在这一点上，我希望视图能够更改其状态-计数并禁用/启用适当的指针。
但是，事实并非如此。为什么？它不反映计数（在html中），也不返回到$（document）.ready（function（），后者执行用于对拇指进行适当的视觉更改（禁用/启用并更改颜色）的功能。 / p>
所以，我改为采用第二种方法。成功调用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" },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",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);
};
},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调用。
official documentation from jQuery指出何时使用val()：
.val（）方法主要用于获取诸如
input，select和textarea之类的表单元素的值。在空集合上调用时，它返回undefined。
由于您在val()元素中调用span，因此不会有任何改变。
您应该使用text()或html()。例如：
$(".likeCount").text(count);
祝你好运！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
