1

使用 MVC 3。（下面的代码试图重新创建 stackoverflow 已检查答案的切换效果）我有一个 ajax actionlink，当您单击它时，它会调用对 db 的更新来切换标志/图像。但是它一次有效，如果我再次单击它，它将不会切换。因为没有回发，所以 model.IsIssue 没有更新（它的服务器代码）。不确定解决问题的最佳方法。我是否应该在代码中处理它，在其中检查 db 中的当前标志并将其传递回视图。或者通过 Jquery，不确定如何编码（我的偏好）？

我在视图中的代码（切换）：

 <div>
                @Html.Raw(
                    Ajax.ActionLink("[replacethis]", 
                        "ToggleEnabled",
                                 new { questionId = question.QuestionID, reviewId = step.ReviewID, flag = question.IsIssue },
                                 new AjaxOptions { UpdateTargetId = "toggleimage" + question.QuestionID })
                   .ToHtmlString()
                   .Replace("[replacethis]",
                       string.Format("<div id='toggleimage{0}'><img src='/Content/images/{1}' border='0' alt='toggle'/></div>",
                                                                   question.QuestionID, question.IsIssue ? "issue_on.png" : "issue_off.png")
                   )
                )

我的动作控制器：

public ActionResult ToggleEnabled(int questionId, int reviewId, bool flag)
        {
            using (var db = new NexGenContext())
            {
                db.Database.ExecuteSqlCommand(
                           "EXEC SP_AddUpdateQuestionFlagged @QuestionID, @ReviewID",
                           new SqlParameter("@QuestionID", questionId),
                           new SqlParameter("@ReviewID", reviewId)
                       );
                return flag ? Content("<img src='/Content/images/issue_off.png' border=0  />") : Content("<img src='/Content/images/issue_on.png' border=0  />");

            }
        }
4

1 回答 1

0

我只想更改一个 CSS 类来切换图像。

因此，我不会将图像保存在img...中，而是使用 adiv并将图像作为背景。

因此，不要用其中的 DIV 和 IMG 替换 html（删除回调以处理点击），只需更改 div 的类。

在您看来：

<div id="myimage" class="NormalState"></div>

在 JS 中：

$('#myimage').click(function () {
     $.ajax({
         url: 'yourControllerActionURL'
         type: 'POST',
         contentType: "application/json; charset=utf-8",
         data: {'questionId': question.QuestionID, 'reviewId': step.ReviewID, 'flag': question.IsIssue },
         success: function (data) {
            if(data.isClicked == true){
                 $('#myimage').addClass('ClickState').removeClass('NormalState');
            }
            else{
                 $('#myimage').addClass('NormalState').removeClass('ClickState');
            } 
         }
     });
});

在您的 CSS 中：

.NormalState { background-color: #ABCDEF;}
.ClickState { background-color: #FF0000;}

在您的控制器中：

您需要返回 JSON 并将其isClicked设置为 true 或 false。您也可以返回 css 类以从控制器应用，但这样您的控制器就知道视图，这不是 MVC 模式的想法。所以告诉视图发生了什么更合适。

于 2013-01-03T15:27:57.390 回答