asp.net mvcのドロップダウン2

Question

私はC＃言語でasp.net mvcアプリケーションを持っています。私のようなシナリオを開発したい、私のページには4つのドロップダウンコントロールがあります。最初の、2番目のアイテムの選択では、2'ndの3'rdドロップダウンのアイテムをロードする必要があります。 4'thは独立しています。しかし、4番目のドロップダウンで私はUIデザインを変更したい。私がここで使うべき戦略は何ですか？ここでこのシナリオをどのように実装できますか？

編集： Controller->アクション

[AcceptVerbs(HttpVerbs.Get)] 
     public ActionResult GetSubjects(int standardId) 
     { 
      List<Subject> subjectList = basicEntityManager.GetSubjects(standardId); 
      JsonResult result=Json(subjectList, JsonRequestBehavior.AllowGet); 
      return result; 

     } 

私はこれをデバッグすることができていますが、データをフェッチしません。

スクリプト：

<script type="text/javascript"> 

     $(function() { 
      $('#StandardId').change 
      (function() { 
        var url='/Test/GetSubjects'; 
        fetchItems(url, { standardId: $(this).val() }, $('#SubjectId') 
      ); 

      /* $('#SubjectId').change(function() { 
      fetchItems(
      '/Test/GetChapters', 
      { 
      selectedItem1: $('#SubjectId').val(), 
      selectedItem2: $(this).val() 
      }, 
      $('#SelectedItem3') 
      ); 
      });*/ 

     }); 
     }); 


     function fetchItems(url, data, ddl) { 
      $.getJSON(url, data, function(items) { 
      alert(items); 
       $.each(items, function() { 

        ddl.append 
         (
          $('<option/>').val(this.Value).text(this.Text) 
         ); 
       }); 
      }); 
     } 


     function OnStandardChange() { 
      var standard = document.getElementById("StandardId"); 
      var subject = document.getElementById("SubjectId"); 
      var ActionUrl = "/Test/GetSubjects/" 
      alert("Hi"); 
      // $.getJSON('/Test/GetSubjects', { standardId: standard.val() }, function(data) { }); 




     } 
     $('#StandardId').change(function() { 

     }); 

     function OnSubjectChange() { 

     } 

     function OnChapterChange() { 

     } 
     function addOption(selectbox, text, value) { 
      var optn = document.createElement("OPTION"); 
      optn.text = text; 
      optn.value = value; 
      selectbox.options.add(optn); 
     } 




    </script> 

Answer 1

あなたはAJAXでカスケード接続できます。

モデル：

public class MyViewModel 
{ 
    public string SelectedItem1 { get; set; } 
    public IEnumerable<SelectListItem> Items1 { get; set; } 
    public string SelectedItem2 { get; set; } 
    public string SelectedItem3 { get; set; } 
    public string SelectedItem4 { get; set; } 
} 

コントローラー：

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     var model = new MyViewModel 
     { 
      // Load initial data 
      Items1 = Enumerable.Range(1, 5).Select(x => new SelectListItem 
      { 
       Value = x.ToString(), 
       Text = "item " + x 
      }) 
     }; 
     return View(model); 
    } 

    public ActionResult Items2(string selectedItem1) 
    { 
     // invoked to populate the second DDL 
     return Json(
      Enumerable.Range(1, 3).Select(x => new { Value = x, Text = x }), 
      JsonRequestBehavior.AllowGet 
     ); 
    } 

    public ActionResult Items3(string selectedItem1, string selectedItem2) 
    { 
     // invoked to populate the third DDL 
     return Json(
      Enumerable.Range(1, 3).Select(x => new { Value = x, Text = x }), 
      JsonRequestBehavior.AllowGet 
     ); 
    } 

    public ActionResult Items4(string selectedItem1, string selectedItem2, string selectedItem3) 
    { 
     // invoked to populate the fourth DDL 
     return Json(
      Enumerable.Range(1, 3).Select(x => new { Value = x, Text = x }), 
      JsonRequestBehavior.AllowGet 
     ); 
    } 

    [HttpPost] 
    public ActionResult Index(MyViewModel model) 
    { 
     return View(model); 
    } 
} 

ビュー：

<script type="text/javascript"> 
    $(function() { 
     $('#SelectedItem1').change(function() { 
      fetchItems(
       '<%= Url.Action("items2") %>', 
       { 
        selectedItem1: $(this).val() 
       }, 
       $('#SelectedItem2') 
      ); 
     }); 

     $('#SelectedItem2').change(function() { 
      fetchItems(
       '<%= Url.Action("items3") %>', 
       { 
        selectedItem1: $('#SelectedItem1').val(), 
        selectedItem2: $(this).val() 
       }, 
       $('#SelectedItem3') 
      ); 
     }); 

     $('#SelectedItem3').change(function() { 
      fetchItems(
       '<%= Url.Action("items4") %>', 
       { 
        selectedItem1: $('#SelectedItem1').val(), 
        selectedItem2: $('#SelectedItem2').val(), 
        selectedItem3: $(this).val() 
       }, 
       $('#SelectedItem4') 
      ); 
     }); 

     $('#SelectedItem4').change(function() { 
      alert('changing UI'); 
     }); 
    }); 

    function fetchItems(url, data, ddl) { 
     $.getJSON(url, data, function (items) { 
      $.each(items, function() { 
       ddl.append(
        $('<option/>').val(this.Value).text(this.Text) 
       ); 
      }); 
     }); 
    } 
</script> 

<% using (Html.BeginForm()) { %> 
    <%= Html.DropDownListFor(x => x.SelectedItem1, new SelectList(Model.Items1, "Value", "Text")) 
    <%= Html.DropDownListFor(x => x.SelectedItem2, Enumerable.Empty<SelectListItem>()) %> 
    <%= Html.DropDownListFor(x => x.SelectedItem3, Enumerable.Empty<SelectListItem>()) %> 
    <%= Html.DropDownListFor(x => x.SelectedItem4, Enumerable.Empty<SelectListItem>()) %> 

    <input type="submit" value="OK" /> 
<% } %>