使用razor动态生成DIV和CHECKBOX的唯一ID

本文关键字：CHECKBOX 唯一 ID DIV razor 动态 使用 | 更新日期: 2023-09-27 18:11:18

这是我的第一个问题，如果构造不好，请原谅。

我正在用Entity-Framework 6学习C# MVC 5。

我试图使用javascript来显示和检查checkbox，它的文本被封装在div中，这样我就可以隐藏/显示完整的checkbox和值。

我正在努力为div和checkbox创建一个独特的ID="??"，以便我的javascript可以根据需要访问DOM的每个部分。

下面是我的View代码: 
@foreach (var item in ViewBag.allDocketTypes)
    {
        <div id="DockDIV @item.DocketTypeID" style="display:none" class="col-md-6">
            <input type="checkbox" class="input" id="DockCB @item.DocketTypeID" name="selectedDocketTypes" value="@item.DocketTypeID" />@item.DocketClassification
        </div>
    }

接下来是我的javascript函数，我用它来检查checkbox，并将div的.style = "display:none"更改为.style = "display:block":

function addDocketType() {
    var e = document.getElementById("DocketClassification");
    var strDocketTypeID = e.options[e.selectedIndex].value;
    document.getElementById("DockCB " & strDocketTypeID).checked = true;
    document.getElementById("DockDIV " & strDocketTypeID).style = "display:block";
};

现在我得到以下错误时，javascript执行:

Uncaught TypeError: Cannot set property 'checked' of null

任何关于我应该如何正确设置这些对象的id的想法将不胜感激。或者我也会采取一个更好的建议，我如何显示和检查一个复选框和它的值。

使用razor动态生成DIV和CHECKBOX的唯一ID

我设法在@stephen的帮助和指点下解决了这个问题。vakil +1，如果我可以的话:)

总之，这都是关于语法的…

在视图中使用_时，尝试使用razor语法内联创建一个唯一的ID

 @foreach (var item in ViewBag.allDocketTypes)
    {
        if (item.TypeSelected)
            {
                <div id="DockDIV_@item.DocketTypeID" style="display: block" class="form-group-sm"><input type="checkbox" class="form-control" id="DockCB_@item.DocketTypeID" name="selectedDocketTypes" value="@item.DocketTypeID" checked="checked"/>@item.DocketClassification</div>
            }
        else
            {
                <div id="DockDIV_@item.DocketTypeID" style="display: none" class="form-group-sm"><input type="checkbox" class="form-control" id="DockCB_@item.DocketTypeID" name="selectedDocketTypes" value="@item.DocketTypeID" title="TEST"/>@item.DocketClassification</div>
            }
    }

javascript中的串接字符串是用+完成的。

function addDocketType() {
    var e = document.getElementById("DocketClassification");
    var strDocketTypeID = e.options[e.selectedIndex].value;
    document.getElementById("DockCB_" + strDocketTypeID).checked = true
    document.getElementById("DockDIV_" + strDocketTypeID).style.display = "block"
};
相关文章：