MVC 3 Appの自動データロード

Question

私は、jquery/ajaxロード関数を使用してデータをドロップダウンから動的にロードするページを用意しています。これにより、ドロップダウン選択が変更されると、部分ビューにすべてのデータを含むグリッドを動的に表示することができます。

この問題は、ページが最初に読み込まれたときにデータがロードされるため、jQueryロード関数にID選択が送信されていないことを意味します。私は、ドロップダウンリスト自体のロード機能を追加することでこれを解決しようとしました。ロードされると、データビューがリロードされますが、無駄になります。データがロードされる前にコントロールが読み込まれるためです。しかし、私は何をすべきか迷っています。ここに私がこれまで持っていたコードがあります。

<script> 
$(document).ready(function() { 
    $.ajax({ 
      type: 'GET', 
      url: '@Url.Action("SessionsPartial", "Sessions")', 
      data: 'id=' + $("#ScheduleTypeId").value, 
      success: function (data) { 
       $('#SessionData').fadeOut().html(data).fadeIn(); 
      } 
     }); 
    $(function() { 
    $("#ScheduleTypeId").change(function() { 
     $.ajax({ 
      type: 'GET', 
      url: '@Url.Action("SessionsPartial", "Sessions")', 
      data: 'id=' + this.value, 
      success: function (data) { 
       $('#SessionData').fadeOut().html(data).fadeIn(); 
      } 
     }); 
    }); 
      }); 

    $(function() { 
     $("#ScheduleTypeId").load(function() { 
      $.ajax({ 
        type: 'GET', 
        url: '@Url.Action("SessionsPartial", "Sessions")', 
        data: 'id=' + this.value, 
        success: function(data) { 
         $('#SessionData').fadeOut().html(data).fadeIn(); 
        } 
       }); 
     }); 
    }); 
}); 

私が言ったように、負荷部との最後の部分は、私が追加したばかりなので、批評して自由に感じるものです。

Answer 1

問題は、Ajaxの機能が実際にあったことだった。一部だけを更新するには、ドロップダウンの.change()イベントをサブスクライブ、その後

<div id="SessionData"> 
    @Html.Partial("SessionsPartial") 
</div> 

と：あなたは、単にグリッドが含まれている部分を含めることができますデータを部分的にロードするアクション関数を呼び出しますが、ドロップダウンのIDとは対照的に初期ロード時にモデルのIDを送信していたため、データが空にロードされていました。

値が0であるかどうかをチェックして、それがどんな速度でも最初に表示されるアイテムのIDで強制的に読み込まれるように修正しました。魅力的に働いた。

Answer 2

最初にページをロードするときに、データをロードするためにAJAX呼び出しを実際に実行する必要はありません。

<script type="text/javascript"> 
$(function() { 
    $('#ScheduleTypeId').change(function() { 
     $.ajax({ 
      type: 'GET', 
      url: '@Url.Action("SessionsPartial", "Sessions")', 
      cache: false, 
      data: { id: $(this).val() }, 
      success: function (data) { 
       $('#SessionData').fadeOut().html(data).fadeIn(); 
      } 
     }); 
    }); 
}); 
</script>