Добавление параметров для выбора формы-контроля в пользовательском диалоговом окне с bootbox.js в ASP.NET MVC

Question

В настоящее время я пытаюсь отобразить диалоговое окно, в котором вы можете удалить «полку», когда вы нажимаете на кнопку.

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

На bootbox.js example page они ссылаются на this file как пример.

Этот код работает для меня, за исключением того, что я не знаю, как динамически добавлять параметры из моей модели 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; 
} 

Теперь мой вопрос: Как я могу добавить полки как «вариант» для элемента «выбрать»?

Спасибо!

Answer 1

Ну, я решил, я использовал 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() 
         } 
        } 
       } 
      });