Создать DIV динамически на основе DropDownList MVC (MVC3 ..)

Question

Я пытаюсь создать DIV динамически на основе раскрывающегося списка.

Раскрывающийся список:

<div class="form-group col-md-2">
@Html.LabelFor(model => model.AvailableProcesTypes, "Procestype *")
@Html.DropDownListFor(model => model.ProcesTypeId, Model.AvailableProcesTypes, String.Empty, new { @id = "dropDownListId", @class = "form-control", required = "required" })
@Html.ValidationMessageFor(model => model.ProcesTypeId)
</div>

Поэтому я хочу установить MVC Model.ProcesTypeId с раскрывающимся списком список, а затем визуализировать DIV с кодом ниже. Однако ofcourse ProcesTypeId равен нулю, когда я отображаю страницу и выдает ошибку.

foreach (var item in Model.ProcesTypes.Where(item => item.Id == Model.ProcesTypeId).Select(item => 
item.ProcesTypeWebappConfig).FirstOrDefault())
{
<div class="form-group col-md-2">
@Html.DisplayFor(modelItem => item.DisplayNaam)
@Html.TextBoxFor(modelItem => item.DisplayNaam, new { @class = "form-control" })
</div>
}

Следовательно, есть ли способ заставить код работать? Или для этого нужно использовать jQuery? (Я уже попробовал это, но я не могу заставить это работать, например, динамически создавать div)

Заранее спасибо!

Answer 1

На данный момент я создал динамический c идентификатор id с:

@foreach (var procesType in Model.ProcesTypes)
{
foreach (var webAppConfig in procesType.ProcesTypeWebappConfig)
{

string divId = "procesType" + procesType.Id + webAppConfig.Id;

<div class="form-group col-md-2" id="@divId">
@Html.DisplayFor(modelItem => webAppConfig.DisplayNaam)
@Html.TextBoxFor(modelItem => webAppConfig.DisplayNaam, new { @class = "form-control" 
})
</div>
}
}

И еще javascript, который изменяет div в зависимости от выбранного элемента в раскрывающемся списке:

<script>
function hideOnLoad() {
    // Hide all divs where id contains 'procesType'
    $('div[id*="procesType"]').hide();
}

$(document).ready(function () {
    // Hide all divs on page load
    hideOnLoad();

    // Function which gets value on page load
    $('#dropDownListId').change(function () {
        var value = $(this).val();

        // First hide all divs, then show divs containing value
        if (value == '1') {
            hideOnLoad();
            $('div[id*="procesType1"]').show();
        } else if (value == '2') {
            hideOnLoad();
            $('div[id*="procesType2"]').show();
        } else {
            // If none is found, hide all
            hideOnLoad();
        }
    });
});
</script>

Я думаю, что этот сценарий можно обновить и сделать более динамичным c, но пока он достаточен.