在带有 bootbox 的自定义对话框中添加选项以选择表单控件.js在 ASP.NET MVC 中

Adding Options to Select form-control in a custom dialog with bootbox.js in ASP.NET MVC

本文关键字：表单 选择 控件 js MVC NET ASP 添加 bootbox 对话框 自定义      更新时间：2023-09-26

目前我正在尝试显示一个对话框，您可以在单击按钮时删除"架子"。

<button type="button" class="btn btn-default" id="deleteButton">Delete</button>

在引导盒.js示例页面上，它们链接到此文件作为示例。

这段代码对我有用，只是我不知道如何从我的 ASP.NET MVC 模型中动态添加选项。

<script>
    $(document).ready(function () {
        $('#deleteButton').click(function () {
            bootbox.dialog({
                title: "Delete Shelf.",
                message: '<div class="row">  ' +
                    '<div class="col-md-12"> ' +
                    '<form class="form-horizontal"> ' +
                    '<div class="form-group"> ' +
                    '<label class="col-md-4 control-label" for="shelfSelection">Shelf</label> ' +
                    '<div class="col-md-4"> ' +
                    '<select id="shelfSelection" id="shelfSelection" class="form-control">' +
                        '<option value="one">One</option>  <option value="two">Two</option><option value="three">Three</option> ' +
                        '</select> ' +
                        '<span class="help-block">Select the shelf to delete.</span> </div> ' +
                        '</div> ' +
                        '<div class="form-group"> ' +
                        '<label class="col-md-4 control-label" for="awesomeness">Confirmation</label> ' +
                        '<div class="col-md-4"> <div class="checkbox"> <label for="deleteConfirmation"> ' +
                        '<input type="checkbox" name="deleteConfirmation" id="deleteConfirmation"> ' +
                        'I confirm the deletion of the selected shelf.</label> ' +
                        '</div></div> </div>' +
                        '</form> </div>  </div>',
                buttons: {
                    cancel: {
                        label: "Cancel",
                        className: "btn-default",
                    },
                    success: {
                        label: "Delete",
                        className: "btn-danger",
                        callback: function () {
                            var name = $('#name').val();
                            var answer = $("input[name='deleteConfirmation']:checked").val()
                        }
                    }
                }
            });
        });
    });
</script>

工具架存储在集合中：

@foreach (Shelf shelf in Model.Shelves)
{
    string shelfName = @shelf.Name;
}

现在我的问题：如何将货架作为"选项"添加到"选择"元素中？

谢谢！

好吧，我解决了它，我使用StringBuilder来创建消息。

@{
string deleteFormString = string.Empty;
StringBuilder builder = new StringBuilder();
builder.Append(@"<div class=""row"">");
builder.Append("<div class='"col-md-12'">");
builder.Append("<form class='"form-horizontal'">");
builder.Append("<div class='"form-group'">");
builder.Append("<label class='"col-md-4 control-label'" for='"shelfSelection'">Shelf</label>");
builder.Append("<div class='"col-md-4'">");
builder.Append("<select id='"shelfSelection'" id='"shelfSelection'" class='"form-control'">");
foreach (Shelf shelf in Model.Shelves)
{
    string optionString = string.Format("<option value='"{0}'">{0}</option>", shelf.Name);
    builder.Append(optionString);
}
builder.Append("</select><span class='"help-block'">Select the shelf to delete.</span> </div></div>");
builder.Append("<div class='"form-group'">");
builder.Append("<label class='"col-md-4 control-label'" for='"deleteConfirmation'">Confirmation</label>");
builder.Append("<div class='"col-md-4'"> <div class='"checkbox'"> <label for='"deleteConfirmation'">");
builder.Append("<input type='"checkbox'" name='"deleteConfirmation'" id='"deleteConfirmation'">");
builder.Append("I confirm the deletion of the selected shelf.</label>");
builder.Append("</div></div> </div>");
builder.Append("</form> </div>  </div>");
deleteFormString = builder.ToString();
}

我使用 @Html.Raw（@deleteFormString） 将字符串添加到脚本中。

$('#deleteButton').click(function () {
            bootbox.dialog({
                title: "Delete Shelf.",
                message: '@Html.Raw(@deleteFormString)',
                buttons: {
                    cancel: {
                        label: "Cancel",
                        className: "btn-default",
                    },
                    success: {
                        label: "Delete",
                        className: "btn-danger",
                        callback: function () {
                            var name = $('#name').val();
                            var answer = $("input[name='deleteConfirmation']:checked").val()
                        }
                    }
                }
            });
相关文章：