使用 razor 为 DIV 和 CHECKBOX 动态生成唯一 ID答案

【问题标题】：Dynamically generate unique ID for DIV and CHECKBOX using razor使用 razor 为 DIV 和 CHECKBOX 动态生成唯一 ID
【发布时间】：2015-11-30 22:49:48
【问题描述】：

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

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

我正在尝试使用javascript 来显示和检查checkbox，它是封装在div 中的文本，以便我可以隐藏/显示完整的checkbox 和值。

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

下面是我的查看代码：

@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>
    }

接下来是我用来检查checkbox 并将.style = "display:none" 的div 更改为.style = "display:block" 现在的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";
};

现在我在执行 javascript 时收到以下错误：

Uncaught TypeError: Cannot set property 'checked' of null

任何关于我应该如何正确设置这些对象的id 的想法都将不胜感激。或者我也会就如何显示和检查复选框及其价值提出更好的建议。

【问题讨论】：

你确定它在这里得到了正确的strDocketTypeID 吗？此外，请考虑在 ID 中使用下划线 _ 而不是空格。该空间可能会导致问题。最后，如果使用在 MVC 中相当标准的 jQuery，这段代码会变得更简单。你考虑过/能用吗？
我没有考虑过jQuery。关于如何工作的任何建议？
_ 似乎已经解决了。我还发现我需要将& 更改为+，最后我需要更改将.style 设置为.style.display = "block" 的方式感谢@stephen.vakil 的帮助

标签： javascript c# html razor model-view-controller

【解决方案1】：

如果可以的话，我设法在@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"
};

我们有它...

【讨论】：