下拉菜單在asp.net mvc 2

Question

我有asp.net mvc應用程序在C＃語言。我想開發這樣的場景，我的頁面將擁有4個下拉控件。在選擇第一，第二的項目時應該加載，選擇第二，第三的下拉應該加載它的項目。第四節是獨立的。但在4日下拉我想改變UI設計。我必須在這裏使用什麼策略？我如何在這裏實現這個場景。？

編輯： 控制器 - >行動

[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" /> 
<% } %>