ASP.NET MVCでAJAXトグルイメージを作成する

Question

テーブルのトグルボタンを作成して、データベースレコードを更新するための非同期呼び出し（有効/無効）を作成したかったのです。いくつかの試行錯誤の後

img http://i41.tinypic.com/os4vua.jpg

、私はそれが働いて得るために管理している - しかし、よりエレガントな方法がなければならないようにそれは感じています。

• 私のコントローラーでイメージタグを繰り返しているのは好きではありません...どうすればわかりやすくそれを避けることができますか？
• 私がやったことに、これに全体的にアプローチする方法がありますか？ここで

コントローラでの私のコードです：

public ActionResult ToggleEnabled(int id) 
    { 
     if (Request.IsAjaxRequest()) 
     { 
      var p = this.PageRepository.GetPage(id); 
      p.Enabled = p.Enabled != true; 
      this.PageRepository.Edit(p); 
      return p.Enabled ? Content("<img src='/Content/icons/tick.png' border=0 />") : Content("<img src='/Content/icons/tick_grey.png' border=0 />"); 
     } 
     return Content("Error"); 
    } 

とビュー...：

<% var img = Model.Enabled ? "tick.png" : "tick_grey.png"; %> 
<% foreach (var item in Model) 
     { %> 
... 
<td align="center"> 
    <%=Ajax.ActionLink("[replacethis]", 
     "ToggleEnabled", 
       new { id = Model.ID }, 
       new AjaxOptions { UpdateTargetId = "toggleimage" + Model.ID }).Replace("[replacethis]", 
       string.Format("<div id='toggleimage{0}'><img src='/Content/icons/{1}' border='0' alt='toggle'/></div>", 
       Model.ID, Model.Enabled ? "tick.png" : "tick_grey.png"))%> 
</td> 
... 
<% } %> 

トリックは/発見された画像を使用してAjax.Actionlinkとハックhere 。

Answer 1

モデルが有効かどうかに基づいてレンダリングチェックボックスを設定する方法について説明します。

jQueryでは、これらのチェックボックスを画像に置き換えることができます。

あなたのdocument.readyコードのようなものは、あなたは彼らにあなたが考える可能性のある派手なスタイリングを与えることjquery-checkboxのようなプラグインを使用することができ、また、同様に

$(document).ready(
function() 
{ 
    $('.enabledCheckbox').each(
     function() 
     { 
      var image = $(this).checked ? 'tick.png' ? 'tick_grey.png'; 
      $(this).parent.click(
       function() 
       { 
        if($(this).is('image')) 
         toggleEnabledStatus(); //write code in toggleEnabledStatus to toggle the state of the model on server side. 
       }  
       ); 
      $(this).parent.html('<img src=' + image + '/>'); 
     } 
    ); 
} 
); 

て見える場合があります。

Answer 2

エレガンスが欲しい場合は、jQuery Webサービスリクエストを使用して、基礎となるASPXページにAJAXリクエストを送信します。 ASPXページで必要なのは、実際のアクションを実行するための静的な[WebMethod]と、jQueryからの$ .ajax（）呼び出しです。これはかなりエレガントです。