2014-09-11 3 views
0

У меня есть страница с двумя drop downs (DropDownListFor), которые заполняются при загрузке. Одна категория, а другая - предметы, соответствующие этой категории. Ниже приведен заголовок (TextAreaFor), который обновляется, чтобы отразить текст во втором раскрывающемся списке.Каскадирование DropDownListFor ASP.NET MVC

<div class="form-group"> 
    @Html.LabelFor(model => model.BLL_ID, htmlAttributes: new { @class = "control-label col-md-2" }) 
    <div class="col-md-6"> 
     @Html.DropDownListFor(model => model.BLL_ID, Model.BLL_Categories, new { @style = "max-width: 500px;" }) 
    </div> 
</div> 


<div class="form-group"> 
    @Html.LabelFor(model => model.BLL_2, htmlAttributes: new { @class = "control-label col-md-2" }) 
    <div class="col-md-6">  
     @Html.DropDownListFor(model => model.BLL_2, SessionManager.CurrentBLL.OriginalBLL, new { @style = "max-width: 500px;" }) 
     @Html.ValidationMessageFor(model => model.BLL_2, "", new { @class = "text-danger" }) 
    </div> 
</div> 

<div class="form-group"> 
    @Html.LabelFor(model => model.Note, htmlAttributes: new { @class = "control-label col-md-2" }) 
    <div class="col-md-6"> 
     @Html.TextAreaFor(model => model.Note, htmlAttributes: new { @class = "form-control", @rows = "3", @readonly = "true" }) 
    </div> 
</div> 

Первая выпадающая дата имеет событие изменения, зарегистрированное в JS, которое заполняет второе падение. Второй снимок имеет событие изменения, которое обновляет заголовок.

var categories = $("#BLL_ID"); 
var requests = $("#BLL_2"); 

$("#BLL_2").change(function() { 
    updateTitle(); 
}); 

categories.change(function() { 
    requests.find('option').remove(); 
    $.getJSON('_Some_Page', { Category: 
     $("#BLL_ID>option:selected").val() }, function (data) { 
     $(data).each(function (index) { 
       $("<option value=" + this.Value + ">" + this.Text + " 
         </option>").appendTo(requests); 
     }); 
    }); 
    updateTitle(); 
}); 

function updateTitle() { 
    var title = $("#BLL_2>option:selected").text(); 
    $("#Note").val(title); 
} 

Вопрос касается обновления названия во время первого события смены даты. Если я использую отладчик JS, я замечаю, что второе выпадающее меню еще не заполнено, когда вызывается функция updateTitle(). Есть ли способ подождать, пока выпадающее меню не будет заполнено, чтобы вызвать функцию?

+0

попробуйте переместить updateTitle внутри getJSON (поставить его после того, как каждый, и мы надеемся, это будет удар последовательно и дать результат, который вы хотите. Еще менее идеальным вариантом было бы поставить обновление внутри задержка и отсрочка –

+0

Функция updateTitle() уже выполняется как записано. Проблема заключается в том, что $ ("BLL_2> option: selected"). text() возвращает пустую строку. При использовании отладчика выпадающий список имеет еще не заметно обновляется, когда вызывается updateTitle(). Я предполагаю, что выбранный оператор возвращает пустую строку. Я продолжаю читать о привязке данных, но я не уверен, что это значит. Должен ли я ждать, пока данные привязана к раскрывающемуся списку, прежде чем пытаться определить выбранный элемент? – Johnny

+0

Я так думаю, да. th поэтому я предложил переместить его в getJSON. С его помощью это, вероятно, вызывает getJSON, а затем вызывает ваше обновление до того, как get закончил. Я надеюсь, что переезд внутри будет решаться с учетом времени. –

ответ

0

Я обнаружил, что путем помещения вызовов внутри они будут запускаться последовательно. Если они находятся снаружи, это вызовет базу данных и попытается вызвать обновление до завершения вызова базы данных и вызовет проблемы. Попробуйте изменить свой код, как этот

categories.change(function() { 
    requests.find('option').remove(); 
    $.getJSON('_Some_Page', { Category: 
     $("#BLL_ID>option:selected").val() }, function (data) { 
      $(data).each(function (index) { 
       $("<option value=" + this.Value + ">" + this.Text + " 
        </option>").appendTo(requests); 
      }); 
     updateTitle(); //move the update here so it is inside the getJSON 
    }); 
}); 
Смежные вопросы