基于DropDownList动态创建一个DIV，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。但是，当我渲染页面时，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

目前，我创建了一个动态div 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>

我想这个脚本还可以更新，做得更动态，但现在已经足够了。