1

MVC 3を使用します（以下のコードは、stackoverflowのチェックされた回答のトグル効果を再現する試みでした）クリックすると、フラグ/イメージを切り替えるためにdbへの更新を呼び出すajaxアクションリンクがあります。ただし、一度は機能しますが、もう一度クリックしても切り替わりません。ポストバックがないため、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...を使用してdiv、画像を背景として配置します。

したがって、htmlをDIVとIMG（クリックを処理するためのコールバックを削除するもの）に置き換える代わりに、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;}

コントローラ内：

isClickedtrueまたはfalseに設定されたJSONを返す必要があります。cssクラスを返してコントローラーから適用することもできますが、そうすれば、コントローラーはビューを認識し、MVCパターンの概念ではありません。したがって、何が起こったのかをより適切にビューに伝えることができます。

于 2013-01-03T15:27:57.390 に答える