基于DropDownList动态创建一个DIV,MVC(MVC3.)

我试图基于一个下拉列表动态创建一个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)

先谢谢你

解决方案:

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

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

给TA打赏
共{{data.count}}人
人已打赏
未分类

moment js:奇怪的UTC转换为时区。Kiritimati岛,UTC+14

2022-9-9 3:07:18

未分类

从2个mysql数据库中拉取数据,类型错误。

2022-9-9 3:07:20

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索