В настоящее время я работаю над представлением (в веб-приложении C # .Net Core 2.1), которое должно иметь текстовое поле «Строка поиска» и кнопку «Добавить элемент», которая должна открыть модальное окно, которое будет иметьсписок всех элементов (из базы данных), соответствующих строке поиска, с кнопкой «Выбрать» или ссылкой для добавления элемента.
Но я затрудняюсь понять, как передатьтекстовое поле приводит к модальному действию.
Примечание: я знаю, что у меня есть обходной путь, в котором я мог бы закодировать его как совершенно отдельный вид / действие (т.е. не модальное), возможно, добавив логику к существующемуФорма отправки действия, но было бы неплохо, если бы я мог сохранить модальную идею.
Вот код того, что я пробовал до сих пор (но безрезультатно):
Контроллер:
public IActionResult AddItem(string SearchString)
{
var model = _context.BasicItems
.Where(i => i.Name.Contains(SearchString));
return PartialView("_AddKitItem", model);
}
В том виде, в котором у меня есть текстовое поле и кнопка (теперь я использую ViewModel, а не исходную сущность Model). Примечание: ViewModel - это просто объект, содержащий исходную сущность, которую я хотелиспользовать - в этом случае называетсяKit - и строка с именем SearchString):
<div id="modal-placeholder"></div>
(затем некоторые другие элементы управления)
<label asp-for="SearchString" class="control-label"></label>
<input asp-for="SearchString" class="form-control" />
<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#add-item" data-url="@Url.Action("AddItem")">
Search Item To Add
</button>
У меня также есть следующий код JS (который я взял из примера кода)
$(function () {
var placeholderElement = $('#modal-placeholder');
$('button[data-toggle="ajax-modal"]').click(function (event) {
var url = $(this).data('url');
$.get(url).done(function (data) {
placeholderElement.html(data);
placeholderElement.find('.modal').modal('show');
});
});
placeholderElement.on('click', '[data-save="modal"]', function (event) {
event.preventDefault();
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var dataToSend = form.serialize();
$.post(actionUrl, dataToSend).done(function (data) {
var newBody = $('.modal-body', data);
placeholderElement.find('.modal-body').replaceWith(newBody);
var isValid = newBody.find('[name="IsValid"]').val() == 'True';
if (isValid) {
placeholderElement.find('.modal').modal('hide');
}
});
});
});
Когда это не сработало (поместив точку останова в первую строку действия AddItem в контроллере и проверив значение SearchString - равное нулю), в главном представлении я заменил два SearchStringконтролирует со следующим
@Html.DisplayNameFor(model => model.SearchString)
:
@Html.DisplayFor(model => model.SearchString)
Но все равно не повезло - тот же результат.
Итак, я даже попытался:
Item Name:
@Html.TextBox("SearchString")
И все тот же результат.