Как фильтровать данные на странице на основе выбора из выпадающего списка

Question

У меня есть объект Dictionary, который имеет идентификатор бизнес-типа и список вопросов. У меня выпадающий список типов бизнеса. Теперь, когда я выбираю бизнес-тип из выпадающего списка, мне нужно обновить список вопросов, который отображается на странице

HTML:

<script src="~/lib/jquery/dist/jquery.js"></script>
<div id="" class="">

    <div class="form-group">
        <label>Select a Business Type *</label>
        <select class="form-control" id="businessTypeSelectionModal">
            <option value="">--Select---</option>
            @foreach (var bt in Model.BusinessTypes)
            {
                <option value="@bt.Id">
                    @bt.Name
                </option>
            }
        </select>
    </div>

    <label>Questions *</label>

</div>

JQuery:

<script type="text/javascript">   
    var selectedBusinessTypeId;
    $(document).ready(function () {
        $("#businessTypeSelectionModal").change(function () {
            selectedBusinessTypeId = $("#businessTypeSelectionModal").val();
            LoadQuestions(selectedBusinessTypeId);
        });
    });
    function LoadQuestions(selectedBusinessTypeId)
    {
        html = '';
        alert('BT id:' + selectedBusinessTypeId);
     @foreach (var c in Model.Questions)
         {
             foreach (var q in c.Value)
             {
                 if (c.Key == selectedBusinessTypeId) {
                     html += '<label value="@c.Key" class="" />' + @q.Description;
html += '<input type="textbox" />';
                 }
             }
         }

     } 
</script>

При изменении выбора в раскрывающемся списке я пытаюсь получить идентификатор, передать его в функцию LoadQuestions (), где мне нужно проверить, равен ли идентификатор идентификатору в словаре вопросов. Если это так, мне нужно показать вопрос в виде метки и текстового поля рядом с каждым вопросом. На данный момент я получаю следующие ошибки:

Переменные selectedBusinessTypeId & html -> внутри функции LoadQuestions () не существует в текущем контексте

Любая помощь будет оценена. Есть ли лучший способ сделать это ??

Answer 1

Вы бы использовали JSON-сериализацию своей модели в переменную javascript и использовали бы эту переменную javascript для написания своего кода javascript:

function LoadQuestions(selectedBusinessTypeId)  
{
    html = '';

    var questions = @Html.Raw(Json.Serialize(Model.Questions));
    for (var type in questions) {
        if (type == selectedBusinessTypeId) {

            for (var i = 0; i < questions[type].length; i++) {
                alert( questions[type][i].description)
                //html += "<label value='" + questions[type][i].id + "' class='' />" + questions[type][i].description;
              // html += "<input type='textbox' />";
            }

        }
    }

}

Предположим, тип Model.Questions:

 public Dictionary<int, List<Question>> Questions { get; set; }

Answer 2

Как упомянул Нэн Ю, использование Json.Serialize решило проблему

Answer 3

содержит ли $("#businessTypeSelectionModal").val() значение идентификатора или тип бизнеса?
Вы можете получить идентификатор по этому
selectedBusinessTypeId = $ ("# businessTypeSelectionModal"). Find ('option: selected'). Attr ('идентификатор');