Ajax.ActionLinkは同じ正確なGETリクエストを複数回繰り返します

Question

私はMVCを学習していますが、私は現在、単純なSCRUMトラッキングシステムを作っています。

問題は、Ajax.ActionLinkをクリックすると、ページに表示されるすべてのスクラムカードに対して同じAjaxアクションを1回実行することです。

あなたが見ることができるように、私は表示された9枚のカードを持っていると私は9つの同じGETリクエストを取得します。 （アクションリンクは、実際にはカードの右下にあるカラーホイールイメージです）。

SingleCard.cshtml（表示） - 「ColorPicker」は自分の操作の名前です。

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 

... 

<div class="card_footer" id="card_footer_id_@(Model.ID)"> 
    <div class="card_tags"> 
     [Tag1] [Tag2] [Tag3] 
    </div> 
    <div class="card_colorwheel_icon"> 
    @Ajax.ImageActionLink("../Content/Images/color_wheel.png", "Color Wheel", "ColorPicker", new { cardid = Model.ID }, new AjaxOptions { UpdateTargetId = "ColorPickerDisplay" }) 
    </div> 
</div> 

ImageActionLinkは、私が使用しているヘルパーですが、このコードが実行されている理由、それは正確に通常のActionLinkの

HomeController.cs（コントローラ）

public ActionResult ColorPicker(int cardid) 
    { 
     var currentcard = db.Cards.Single(x => x.ID == cardid); 

     var colors = new List<CardRGB>(); 
     var cards = db.Cards.ToList(); 
     foreach (var card in cards) 
     { 
      colors.Add(new CardRGB 
       { 
        CardId = card.ID, 
        Red = (int)card.BG_Red, 
        Blue = (int)card.BG_Blue, 
        Green = (int)card.BG_Green 
       }); 
     } 

     // disctint 

     var model = new ColorPickerViewModel() 
     { 
      Colors = colors, 
      Red = (int) currentcard.BG_Red, 
      Green = (int) currentcard.BG_Green, 
      Blue = (int) currentcard.BG_Blue 
     }; 

     return PartialView(model); 
    } 

は誰もが知っているように動作しますカードごとに1回ですか？

編集：リクエストに応じて！

public static class ImageActionLinkHelper 
{ 
    public static MvcHtmlString ImageActionLink(
     this AjaxHelper helper, 
     string imageUrl, 
     string altText, 
     string actionName, 
     object routeValues, 
     AjaxOptions ajaxOptions) 
     { 
      var builder = new TagBuilder("img"); 
      builder.MergeAttribute("src", imageUrl); 
      builder.MergeAttribute("alt", altText); 
      builder.MergeAttribute("title", altText); 
      var link = helper.ActionLink("[replaceme]", actionName, routeValues, ajaxOptions); 
      var html = link.ToHtmlString().Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing)); 
      return new MvcHtmlString(html); 
     } 
} 

Answer 1

ページのHTMLを確認してください。再びJavaScriptを含め、すべてのカードについては

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 

ので、9回に含まれている：あなたのsinglecard.cshtmlであっラインです。したがって、9つの要求がサーバーに送信されます。

解決策：カードレベルではなく、ページレベルでscript-includeを配置します。