Добавление выпадающего списка выбранного элемента в список динамически в .NET MVC

#c# #asp.net #asp.net-mvc #razor

Вопрос:

У меня есть выпадающий список в моем представлении razor, он получает значения из моей модели, которая заполняется из базы данных. Чего я хочу добиться, так это при выборе опции из этого выпадающего списка и нажатии кнопки отобразить список этих выбранных опций один под другим, все в одном представлении и рядом с каждым элементом ссылка для редактирования или удаления. Затем на другом экране я могу добавить этот окончательный «список» в свою базу данных. Это часть моего кода:

Модель

 public class SchedulerViewModel
{        
        public string Frequency { get; set; }     
        public string SelectedReportValue { get; set; }
        public IEnumerable<SelectListItem> ReportList
        {
            get
            {
                List<string> reportlist = DataAccess.retrieveReportList();
                return new SelectList(reportlist);
            }
        }

        public string NewCronName { get; set; }

        [Display(Name = "OrderDate")]
        [DataType(DataType.Date)]
        public System.DateTime OrderDate { get; set; }

        public IEnumerable<SelectListItem> FrequencyList
        {
            get
            {
                List<string> frequencyList = DataAccess.retrieveFrequencyList();
                return new SelectList(frequencyList);
            }
        }
}

Контроллер

 [HttpGet]
public ActionResult AddCron()
{                  
    return View();            
}

[HttpPost]
public ActionResult AddCron(SchedulerViewModel model)
{            
    return View(model);
}

Вид

 <script>
    function myFunction() {
        $("#div1").load('@Html.LabelFor(model => model.SelectedReportValue)');

    }
</script>
.
.
.


<tr>
    <td><h5>Frequency: </h5></td>
    <td> @Html.DropDownListFor(model => model.Frequency, Model.FrequencyList)</td>

    <td><h5>First Run Date: </h5></td>        
    <td> @Html.TextBoxFor(m => m.OrderDate, new { @class = "form-control datepicker", @id = "datepicker" })</td>        
</tr>
<tr class="blank_row">
                amp;nbsp;
</tr>
<tr>
    <td><p><b>Add Report</b></p></td>
</tr>
<tr>
    <td><h5>Report :</h5></td>
    <td>@Html.DropDownListFor(model => model.SelectedReportValue, Model.ReportList)</td>
    <td><input type="submit" name="Add" value="Add" onclick="myFunction()" /></td>
</tr>

<div id="div1"></div>

Я вижу возвращаемое выбранное значение в моей модели в методе [HttpPost], но все еще не могу заставить его работать в представлении. Есть предложения?

и это то, что я пытаюсь получить…

1. Рассматривали ли вы возможность использования частичного представления для этого?

2. @nocturns2 не очень знаком с тем, как решить эту проблему с частичным просмотром, можете ли вы указать мне пример, чтобы я мог лучше понять это?

3. Пожалуйста, удалите ненужные коды. Они действительно сбивают с толку.

4. Непонятно, почему вам нужны 2 представления для этого. И принуждение пользователя добавлять элементы путем непрерывной прокрутки и выбора элементов из выпадающих списков не является хорошим пользовательским интерфейсом. Не уверен, правильно ли я истолковал ваши требования, но предлагаю вам взглянуть на этот DotNetFiddle в качестве отправной точки.

5. И в качестве дополнительного примечания, никогда не помещайте код доступа к базе данных в свою модель представления. Вы не только сделали невозможным модульное тестирование, когда вы отправляете форму, вы делаете ненужные вызовы базы данных для заполнения списков выбора (единственный раз, когда они необходимы в методе POST, — это если ModelState недопустимо, и вам нужно вернуть представление.

Ответ №1:

Попробуйте избавиться от jquery, просто используйте razor :

 <div id="div1">
  @Html.LabelFor(model => model.SelectedReportValue)
</div>

Исходя из вашего комментария, я предлагаю вам использовать jquery для запуска события изменения и добавления элемента в список вручную :

 $( "#filetype" ).change(function() {
  //code handler to add to list
});