獲取切換圖像在mvc頁面上正常工作？

使用MVC 3. （下面的代碼是試圖重新創建stackoverflow的檢查答案的切換效果）當你點擊它時，我有一個ajax動作鏈接調用更新到數據庫切換標誌/圖像。然而，它有一次，如果我再次點擊它不會切換。因爲沒有回傳，所以model.IsIssue沒有更新（它的服務器代碼）。不確定解決問題的最佳方法。我是否應該在代碼中處理它，在db中檢查當前標誌並將其傳遞迴視圖。或者通過jquery，不知道如何編碼（我的偏好）？獲取切換圖像在mvc頁面上正常工作？

我在視圖（切換）代碼：

<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 />"); 

      } 
     }

來源

2013-01-03 Chaka

我只想改變CSS類來切換圖像。

因此，而不是拿着圖像img ...我會使用div並將圖像作爲背景。

因此，不要用其中的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-03 15:27:57 Romias

不知道我是否完全按照。可以給我一個模型或例子嗎？ – Chaka

添加了示例代碼...未在VS中測試...只是在編輯器中調試:) – Romias

謝謝你好東西... – Chaka

獲取切換圖像在mvc頁面上正常工作？

回答

相關問題