mvcでajaxを使用して別のページ（データターゲット）をロード

Question

ページを更新せずに別のページをロードし、最初にイメージ（ロードgif）を表示してからビューをロードします。

<a id="id1" class="list-group-item" data-target="@Url.Action("LiveMatches", "home")"> 
    <span class="badge" style="font-size:10px;color:#fff" id="LiveMatchesNumber">0</span> 
    <span style="font-size:10px;font-weight: 900;">@index.Index.livematches</span> 
</a> 

$(function() { 
    $(".list-group-item").on("click", function() { 
    var thebutton = $(this); 
    var url = thebutton.attr("data-target"); 
    var target1 = $("#mainInfo"); 
    target1.empty().addClass("backgrounLoadinImage").addClass("backgrounLoadinImageSmall"); 
    $.ajax({ 
    type: "post", 
    url: url, 
    success: function (data, text) { 
    target1.empty().html(data); 
    target1.removeClass("backgrounLoadinImage").removeClass("backgrounLoadinImageSmall"); 
    }, 
    error: function (request, status, error) { 
      alert(request + error); 
     target1.removeClass("backgrounLoadinImage").removeClass("backgrounLoadinImageSmall"); 
      } 
     }); 
    }); 
}); 

Answer 1

あなたは、コールバック関数のシグネチャでclickイベントのeventパラメータを使用して、リダイレクトを停止するevent.preventDefault();を呼び出す必要があります。

Answer 2

この

$(".list-group-item").on("click", function (e) { 
 
    e.preventDefault(); 
 
    console.log('not redirected'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <a href="https://google.com" class="list-group-item">click me</a> 
 
</div>

は私がやったことで、それが働いたが、私の問題は、私は、リンクのリストを持っていることであると私は同じスクリプト

$(function(){ 
     // don't cache ajax or content won't be fresh 
     $.ajaxSetup ({ 
      cache: false 
     }); 
     var ajax_load = "<img src='http://automobiles.honda.com/images/current-offers/small-loading.gif' alt='loading...' />"; 

     // load() functions 
     var loadUrl = '@Url.Action("Index","Home")'; 
     $("#id1").click(function(){ 
      $("#mainInfo").html(ajax_load).load(loadUrl); 
     }); 
    }); 

を使用して複数のリンクを開きたいです