Каскадное выпадающее меню со статическими данными

Question

Мне нужно развернуть два выпадающего списка в моем проекте MVC3, где первый выпадающий список будет вестись на основе db и основываться на данных, выбранных в первом выпадающем меню, которое должно измениться во втором раскрывающемся списке. Во втором выпадающем списке есть текст и значение с жестким кодированием. как я мог это достичь. пожалуйста, помогите

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, мне нужно заполнить еще один выпадающий список под названием «Группа продуктов», который оказывает жёстко прописанные значение. на основе раскрывающегося списка ProductType значение groupgroup должно измениться.

Answer 1

У вас есть несколько вариантов.

1. Вы можете написать собственный баннер, чтобы обрабатывать событие onchange. В этой точной теме есть буквально тысячи простых учебников. This one, вероятно, ответит на ваш вопрос лучшим.

2. Вы можете использовать extensions like Telerik's. Они относительно прямые, хорошо документированы, но имеют дополнительный вес другой библиотеки (хотя разметка, которую они создают, довольно тонкая).

Если вы идете с вариантом 1 и написать свой собственный, две основные вещи, которые вы должны будете добавить в будет дополнительный контроллер действий и некоторые JavaScript.

javascript будет слушать события изменений на вашем идентификаторе продукта. Поместите это в функцию готовности документа на самой странице.

$("#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); 
    } 
} 

Код, указанный выше, должен помочь приступить к работе. Это предполагает несколько вещей, которые вы вообще не показывали в своем коде. Ваш вопрос получил downvoted, потому что сначала вы не отправляли никакого кода. Затем код, который вы опубликовали, на самом деле не показывает, что вы приложили все усилия для поиска решения самостоятельно. Найдите некоторые учебники jquery по этому вопросу, есть тысячи, а затем, если у вас есть конкретные проблемы, приведите их сюда.