Передача выбранных элементов из базы данных в модальные с помощью jquery - PullRequest
Новая
       21

Передача выбранных элементов из базы данных в модальные с помощью jquery

0 голосов
/ 11 июня 2019

У меня есть базовый модал, которому нужно передать некоторые опции выбора. Я извлекаю их из базы данных методом обслуживания. 

        [HttpGet]
        public async Task<IActionResult> CreateNote()
        {
            var model = new CreateNoteViewModel();
            var categories = await this.categoryService.GetAllCategoriesAsync();
            model.CategoryList = categories.Select(t => new SelectListItem(t.Name, t.Name)).ToList();

            return this.View(model);
        }

Модальные 

<div class="modal fade" id="noteModal" tabindex="-1" role="dialog" aria-labelledby="noteModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="noteModalLabel">Creating a note...</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="send-feedback-form" asp-action="CreateNote" asp-controller="Management" asp-area="Management">
                    <input type="hidden" name="businessId" value="..." />
                    @Html.AntiForgeryToken()
                    <div class="form-group form-inline">
                        <div class="form-group col-lg-6 col-md-6 name">
                            <input required type="text" name="authorName" class="form-control col-form-label" id="name" placeholder="Enter Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Name'">
                        </div>
                    </div>
                    <div class="form-group">
                        <textarea class="form-control mb-10" rows="5" name="comment" placeholder="Text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Text'"
                                  required></textarea>
                    </div>
                    <div class="form-group">
                        <label for="department">Select Department</label>
                        <select class="form-control" id="department">
                            <option>Option1</option>
                            <option>Option2</option>
                            <option>Option3</option>
                        </select>
                    </div>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success btnSave">Create Note</button>
                </form>
            </div>
        </div>
    </div>
</div>

Допустим, я получил предметы: TODO, Fix, Buy, есть ли способ добавить их в качестве опций выбора в модал с помощью ajax?

1 Ответ

1 голос
/ 11 июня 2019

Вам потребуется файл, доступный клиенту, который будет запускать функцию CreateNote, которую вы упомянули. Это должно быть написано на каком-нибудь серверном языке, таком как PHP или что-то в этом роде, и в идеале вернуть объект JSON. Затем выполните вызов AJAX с помощью $.getJSON()

Должно выглядеть примерно так: 

$.getJSON('myFile.php', processReturn);

function processReturn(data){
    $.each(data, function(i, val) {
        $("#department").append("<option>" + val + "</option>");
    });
}

Это может потребовать некоторой модификации в зависимости от формата ваших данных или того, как вы называете свой сервер, но это должно быть что-то в этом роде.

...