1

У модели есть поле - массив ингредиентов, у ингредиента 3 свойства: IngredientId, IngredientName, Weight. Для ввода Weight используется текстовое поле, для IngredientId используется DropDownList, значение SelectList которого через ViewBag получаем через контроллер (просто список всех ингредиентов в базе). При нажатии на addlink должен добавляться блок для нового ингредиента. И если с добавлением текстового поля для Weight никаких проблем нет, то с выпадающим списком есть проблема. Не знаю как передать в скрипт массив ViewBag.ingredients, и как им потом заполнить выпадающий список в скрипте.

Может кто подскажет, как это лучше реализовать?

Ниже код из view и скрипта.

View code

<div id="ingredientBlock" class="form-group">
        @Html.Label("Ingredients", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="ingredientItem col-md-10">
            @Html.DropDownListFor(model => model.Ingredients[0].IngredientId, new SelectList(ViewBag.ingredients, "IngredientId", "IngredientName"), new { @class = "form-control" })
            <input type="text" name="Ingredients[0].Weight" class="form-control" />
        </div>
    </div>
    <p><a class="" id="addLink">Add new ingredient</a></p>

JavaScript code

@section Scripts {
<script type="text/javascript">

    $(function () {
        var i = 0;
        $('#addLink').click(function () {

            i++;
            var ingredientBlock =
         "<label class='control-label col-md-2'>Ingredient " + (i + 1) + " </label>" +
         "<div class='ingredientItem col-md-10'>" +
         "<select class='form-control' data-val='true' id='Ingredients_" + i + "__IngredientId' name='Ingredients[" + i + "].IngredientId'>" +              
         "</select>" +
         "<input class='form-control' type='text' name='Ingredients[" + i + "].Weight'/>" +
         "</div>";
            $('#ingredientBlock').append(ingredientBlock);

        })
    })
</script>
}

1 ответ 1

0
$(function () {
  var i = 0;
  $('#addLink').click(function () {
    i++;

    var ingredientBlockHTML =
     "<label class='control-label col-md-2'>Ingredient " + (i + 1) + " </label>" +
     "<div class='ingredientItem col-md-10'>" +
     "<select class='form-control' data-val='true' id='Ingredients_" + i + "__IngredientId' name='Ingredients[" + i + "].IngredientId'>" +              
     "</select>" +
     "<input class='form-control' type='text' name='Ingredients[" + i + "].Weight'/>" +
     "</div>";

    var ingredientBlock = $(ingredientBlockHTML);

    // возьмем содержимое селекта из первого блока
    ingredientBlock.find("select").html($(".ingredientItem select").eq(0).html()); 

    $('#ingredientBlock').append(ingredientBlock);
  });
});
1
  • Спасибо большое
    – Tiemich
    6 янв 2018 в 13:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.