Привязать список к выпадающему списку для

Question

Я хочу сделать два каскадных dropdownlists. Когда пользователь выбирает элемент в DropDownList это действие пожары:

public SelectList myFunc(string item) 
    { 
     var query = //Query 

     var sItems = new SelectList(query); 
     ViewBag.StagesList2 = sItems; 
     return ViewBag.StagesList2; 
    } 

и это мой сценарий:

<script> 
    var isChanged = false; 
    $(function() { 
     $('#stageOne').change(function() { 
       $.ajax({ 
        url: "/Shop/myFunc/", 
        data: { item: $("#stageOne option:selected").text() }, 
        type: 'post', 
        success: function() { 
        document.getElementById("stageTwo").options.add(ViewBag.StagesList2); 
       } 
      }); 

     }); 
    }); 
</script> 

Пожары действие успешно. Но ни в коем случае не добавляйте мой второй выпадающий список за:

<div class="drop-down-list"> 
     <%: Html.DropDownListFor(model => model.StageId, Enumerable.Empty<SelectListItem>(),new { id="stageTwo"})%> 
     <%: Html.ValidationMessageFor(model => model.StageId) %> 
    </div> 

В чем проблема?

Answer 1

Вы можете использовать сумку просмотра только при построении страницы. После того, как браузер отобразит страницу, больше нет камеры просмотра. Предположим, вы делаете следующее:

ViewBag.MyName = "John Doe"; 

А когда страница загружена:

<h2>Welcome, <%: ViewBag.MyName %> ! </h2> 

Единственное браузер видит:

<h2>Welcome, John Doe ! </h2> 

браузер не имеет ни малейшего представления о том, как страницы был построен. Он не знает о Viewbag, потому что это функция ASP.NET, она не имеет ничего общего с браузером.

Что вам нужно сделать, это передать данные StagesList2 в операторе return, а затем обработать эти данные в обратном вызове a121.

Так что ваш код станет чем-то вроде этого:

public JsonResult myFunc(string item) 
{ 
    var query = //Query, let's assume this passes a list of items with an ID and a Name field. 


    return Json(query, JsonRequestBehavior.AllowGet); //This sends your query result back as a JSON object 
} 

Затем success обратное вызова вашего Аякса будет:

success: function (myJSONdata) { 
    //first, clear the current contents 
    $("#stageTwo").html(""); 

    //Now proces the new items piece by piece   
    var items = myJSONdata.items; 

    for(var i=0; i < items.length; i++) { 
     var item = items[i]; 
     var optionhtml = '<option value="' + item.ID + '">' + item.Name + '</option>'; 

     $("#stageTwo").append(optionhtml); //Appends the above option to the selectlist 
    } 

    //Done! 
    alert("Everything is now correctly processed!"); 
} 

you'l должен проверить имена полей, я просто использовал некоторые примеры, но я надеюсь, что вы получите общее представление о том, как обрабатывать данные:

Не стесняйтесь спрашивать, недостаточно ли это достаточно.