2017-04-03 12 views
0

コントローラへのJavaScript/ajaxコールバックを実行するマークアップがあります。私がしようとしているのは、このクリック機能を使ってタブコンポーネントをアクティブにし、コントローラ内のアクションを実行させることです。Ajaxコールでコントローラを呼び出すときにページが更新されないのはなぜですか?

<ul class="nav nav-tabs"> 
    <li class="active"><a href="#tab1" onclick="setCert(0);" data-toggle="tab">Registered</a></li> 
    <li><a href="#tab2" onclick="setCert(1);" data-toggle="tab">Certified</a></li> 
</ul> 

ここではJavaScript

function setCert(cert){ 
     $.ajax({ 
      url: '/Home/CommunitiesLanding/' + cert, 
      type: "GET", 
      traditional: true, 
      contentType: "application/json", 

      success: function() { 

       console.log('success!!'); 
      } 
     }); 

そして最後に、ここでは私のコントローラです。

public ActionResult CommunitiesLanding(int id) 
    { 
     var model = new CommunitiesViewModel(); 
     var comm = new List<CommunityPoints>(); 
     var mapPoints = new List<CommunityPoints>(); 
     var mapPoints2 = new List<CommunityPoints>(); 
     var regComm = new List<Registered>(); 
     var certComm = new List<Certified>(); 
     var locationService = new GoogleLocationService(); 
     var communites = db.Communities.Where(x => x.Certified != true).OrderBy(x => x.CommunityState).ToList(); 
     var certCommunities = db.Communities.Where(x => x.Certified == true).OrderBy(x => x.CommunityState).ToList(); 
     var statecd = communites[0]; 
     var statecd2 = statecd.CommunityState; 

     if (id == 0) 
     { 

      // Collect the Registered communites data 
      foreach (var c in communites) 
      { 
       if (statecd2 != c.CommunityState) 
       { 
        var reg = new Registered(); 
        reg.state = statecd2; 
        reg.points = comm; 
        regComm.Add(reg); 
        comm = new List<CommunityPoints>(); 
        statecd2 = c.CommunityState; 
       } 

       var communityPts = new CommunityPoints(); 
       var points = locationService.GetLatLongFromAddress(c.CommunityZip); 
       communityPts.CommunityId = c.CommunityId; 
       communityPts.CommunityName = c.ComunityName; 
       communityPts.latitude = points.Latitude.ToString(); 
       communityPts.longitude = points.Longitude.ToString(); 
       communityPts.state = c.CommunityState; 
       comm.Add(communityPts); 
       mapPoints.Add(communityPts); 

      } 

      // Collect the very last collection of state data 
      var Lastreg = new Registered(); 
      Lastreg.state = statecd2; 
      Lastreg.points = comm; 
      comm = new List<CommunityPoints>(); 
      regComm.Add(Lastreg); 

     } 
     else 
     { 
      // Collect Data For the Certified Communites 
      statecd = certCommunities[0]; 
      statecd2 = statecd.CommunityState; 
      foreach (var c in certCommunities) 
      { 
       if (statecd2 != c.CommunityState) 
       { 
        var cert = new Certified(); 
        cert.state = statecd2; 
        cert.points = comm; 
        certComm.Add(cert); 
        comm = new List<CommunityPoints>(); 
        statecd2 = c.CommunityState; 
       } 

       var communityPts = new CommunityPoints(); 
       var points = locationService.GetLatLongFromAddress(c.CommunityZip); 
       communityPts.CommunityId = c.CommunityId; 
       communityPts.CommunityName = c.ComunityName; 
       communityPts.latitude = points.Latitude.ToString(); 
       communityPts.longitude = points.Longitude.ToString(); 
       communityPts.state = c.CommunityState; 
       comm.Add(communityPts); 
       mapPoints2.Add(communityPts); 
      } 

      // Collect the very last collection of state data 
      var Lastcert = new Certified(); 
      Lastcert.state = statecd2; 
      Lastcert.points = comm; 
      comm = new List<CommunityPoints>(); 
      certComm.Add(Lastcert); 
     } 

     model.regCommunities = regComm; 
     model.cerCommunities = certComm; 
     model.regPoints = mapPoints; 
     model.certPoints = mapPoints2; 
     return View(model); 
    } 
+0

あなたはどのようなMVCフレームワークを使用していますか? –

+0

ページを更新するのはなぜですか?あなたはAJAX呼び出しを行っています(これはブラウザがユーザをどこにでもナビゲートすることを伴わず)。成功したときにのみ 'console.log'を実行します。 –

+0

これは.NETフレームワークを使用しています –

答えて

1

あなたの目標は、いくつかのデータを初期化し、ユーザーをリダイレクトするAJAX要求を行う場合にはサーバーが処理を完了したら、新たに初期化されたページに、AJAX関数を更新して、成功すればリダイレクトすることができます:

あなたがデータを初期化し、それが事前に完了するのを待つ必要がない場合には、ちょうどかかわらず、直接ユーザーをリダイレクトするために多くの意味をなすかもしれない
function setCert(cert) { 
    var url = '/Home/CommunitiesLanding/' + cert; 
    $.ajax({ 
     url: url, 
     type: "GET", 
     traditional: true, 
     contentType: "application/json", 
     success: function() { 
      // redirect user to URL 
      location.href = url; 
     } 
    }); 
} 

function setCert(cert) { 
    location.href = '/Home/CommunitiesLanding/' + cert; 
} 
+0

結果がページのある部分で何らかの種類のSPAを実行しようとしている場合にも、私はこれらの同じ点を疑問に思っていました... –

+0

それはうまくいきませんでした。それはコントローラー –

+0

を発射しなかったが、あなたの助けに感謝する –

関連する問題