静的なデータを使ったドロップダウンメニュー

Question

私のMVC3プロジェクトでドロップダウンリストを2つ作成する必要があります。最初のドロップダウンはDB駆動となり、最初のドロップダウンで選択したデータに基づいて2番目のドロップダウンが変わります。 2番目のドロップダウンには、ハードコードされたテキストと値があります。どのように私はこれを達成することができます。

Following is my codebased 

viewmodel 

public IEnumerable<SelectListItem> ProductTypeCode{ get; set; } 
public int? ProductID { get; set; } 


public IEnumerable<SelectListItem> ProductGroupCode; 
public int? ProductGrpID { get; set; } 

Controller 

public ActionResult Index()  {   
var model = new MyViewModel   
{    
// TODO: Fetch those from your repository , 
model.ProductTypeCode= new SelectList(obj.ProductTypeCode as     System.Collections.IEnumerable, "Value", "DispalyText"); 
return view(model); 

} 

VIEW 


@Html.DropDownListFor(m => m.ProductID , Model.ProductTypeCode, "ALL" , new { @class = "DropDownList" })</td> 

を助けてください私の質問がでProductTypeの上にあるドロップダウンに基づいており、私はハードコードされた値を持っている「ProductGroup」と呼ばれる別のドロップダウンを移入する必要があります。 ProductTypeドロップダウンに基づいてproductgroupの値が変更されます。

Answer 1

いくつかのオプションがあります。

1. あなたはonchangeイベントを処理する独自のJavaScriptを書くことができます。この正確なトピックについては、文字通り何千もの簡単なチュートリアルがあります。 This oneはおそらくあなたの質問に最善を尽くすでしょう。

2. extensions like Telerik's.これは比較的単純明快ですが、文書化されていますが、別のライブラリの重さがあります（生成するマークアップはかなりスリムです）。

オプション1を使用して独自に書き込むと、追加する必要がある2つの主なものは、追加のコントローラアクションといくつかのJavaScriptです。

javascriptは、製品IDドロップダウンの変更イベントをリッスンします。これをページ自体の文書準備機能に入れてください。

$("#ProductID").change(function() { 

    // Get the product id selected 
    var id = $(this).val(); 

    // Fire off an ajax request to get the groups 
    $.ajax({ 
     // whatever the url may be. 
     url: "@Url.Action("Groups")" + id, // Append the id to the url. 
     dataType: "json", 
     type: "POST", 
     error: function() { 
      alert("An error occurred."); 
     }, 
     success: function(data) { 
      var items = ""; 
      $.each(data, function(i, item) { 
       items += "<option value=\"" + item.Id+ "\">" + item.Name + "</option>"; 
      }); 

      // Set the secondary dropdown content to the newly created 
      // list of options. Use whatever Id your secondary is. 
      $("#ProductGroup").html(items); 
    }); 

コントローラのアクションは、適切な製品グループのリストとAJAX呼び出しに応答します。

public class ProductsController : Controller 
{ 
    public ActionResult Groups(int id) 
    { 
     // You only need the id and a name field in the response, not the 
     // entire object. 
     var groups = _myService.FindGroupsForProductId(id) 
      .Select(g => new 
      { 
       Id = g.Id, 
       Name = g.Name 
      }); 

     // Return a json result. You only need to re 
     return Json(groups); 
    } 
} 

上記のコードは、開始に役立ちます。あなたのコードに何も表示されていないことがいくつかあると想定しています。最初は、コードを投稿しなかったので、あなたの質問は下落しました。次に、あなたが投稿したコードは、自分で解決策を見つけることに何らかの努力を払っていることを実際に示していません。いくつかのjqueryチュートリアルを見つけてください。何千もの問題がある場合は、ここに持ってきてください。