Предоставление частичного просмотра при нажатии кнопки в ASP.NET MVC

Проблема, которую я буду описывать, очень похожа на те, которые я уже нашел (например, этот пост с почти идентичным именем ), но я надеюсь, что смогу превратить его в нечто, что не является дубликатом.

Я создал новое приложение ASP.NET MVC 5 в Visual Studio. Затем я определил два модельных classа:

public class SearchCriterionModel { public string Keyword { get; set; } } public class SearchResultModel { public int Id { get; set; } public string FirstName { get; set; } public string Surname { get; set; } } 

Затем я создал SearchController следующим образом:

 public class SearchController : Controller { public ActionResult Index() { return View(); } public ActionResult DisplaySearchResults() { var model = new List { new SearchResultModel { Id=1, FirstName="Peter", Surname="Pan" }, new SearchResultModel { Id=2, FirstName="Jane", Surname="Doe" } }; return PartialView("SearchResults", model); } } 

а также представления Index.cshtml (строго типизированные с помощью SearchCriterionModel как модели и шаблона Edit ) и SearchResults.cshtml как частичное представление с моделью типа IEnumerable ( список шаблонов).

Это представление индекса:

 @model WebApplication1.Models.SearchCriterionModel @{ ViewBag.Title = "Index"; } @using (Html.BeginForm()) { @Html.AntiForgeryToken() 

SearchCriterionModel


@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.Keyword, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.Keyword, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Keyword, "", new { @class = "text-danger" })
}
@Html.ActionLink("Back to List", "Index")

Как вы можете видеть, я добавил div с id="searchResults" ниже стандартного шаблона и отредактировал кнопку. Я хочу показать частичный вид SearchResults.cshtml в div внизу, но только после нажатия кнопки. Мне удалось показать частичный вид, используя @Html.Partial("SearchResults", ViewBag.MyData) , но он отображается, когда родительский вид загружается в первый раз, и я устанавливаю ViewBag.MyData в Index() метод уже, который не то, что я хочу.

Резюме. При нажатии кнопки я SearchResultModel экземпляров List of SearchResultModel (через доступ к базе данных), а затем частичное представление должно быть отображено с использованием этих недавно полученных данных в качестве модели. Как я могу это сделать? На первом шаге я уже не сработал, это реакция на нажатие кнопки с помощью вышеуказанного кода. Прямо сейчас, я перехожу к URL ~/Search/DisplaySearchResults , но, конечно, там ничего нет, и метод кода не вызывается. В традиционном ASP.NET я бы просто добавил обработчик OnClick стороне OnClick , установил DataSource для сетки и покажу сетку. Но в MVC я уже терпел неудачу с этой простой задачей …

Обновление: изменение кнопки на @Html.ActionLink Я могу, наконец, ввести метод controllerа. Но, естественно, поскольку он возвращает частичный вид, он отображается как содержимое всей страницы. Поэтому возникает вопрос: как я могу указать частичное представление, которое будет отображаться внутри определенного div на стороне клиента?

Измените кнопку на

  

и добавьте следующий скрипт

 var url = '@Url.Action("DisplaySearchResults", "Search")'; $('#search').click(function() { var keyWord = $('#Keyword').val(); $('#searchResults').load(url, { searchText: keyWord }); }) 

и изменить метод controllerа, чтобы принять текст поиска

 public ActionResult DisplaySearchResults(string searchText) { var model = // build list based on parameter searchText return PartialView("SearchResults", model); } 

Метод jQuery .load вызывает ваш метод controllerа, передает значение текста поиска и обновляет содержимое

частичным представлением.

Примечание: использование

и @Html.ValidationSummary() и @Html.ValidationMessageFor() , вероятно, здесь не обязательно. Вы никогда не возвращаете представление Index поэтому ValidationSummary не имеет смысла, и я предполагаю, что вы хотите, чтобы null текст поиска возвращал все результаты, и в любом случае у вас нет атрибутов проверки для свойства Keyword поэтому ничего не нужно проверять.

редактировать

Основываясь на комментариях OP, что SearchCriterionModel будет содержать несколько свойств с атрибутами проверки, тогда подход будет включать кнопку отправки и обрабатывать формы .submit() event

  var url = '@Url.Action("DisplaySearchResults", "Search")'; $('form').submit(function() { if (!$(this).valid()) { return false; // prevent the ajax call if validation errors } var form = $(this).serialize(); $('#searchResults').load(url, form); return false; // prevent the default submit action }) 

и метод controllerа будет

 public ActionResult DisplaySearchResults(SearchCriterionModel criteria) { var model = // build list based on the properties of criteria return PartialView("SearchResults", model); } 
  • Как периодически запускать запрос AJAX?
  • Количество символов в текстовом поле
  • parsererror после запроса jQuery.ajax с типом содержимого jsonp
  • Загрузка нескольких файлов без использования Zip-файла
  • Событие Click на элементе выбора опции в хроме
  • Почему jQuery не работает на моей домашней (локальной) машине?
  • JQuery, Spring MVC @RequestBody и JSON - заставляя работать вместе
  • установите флажок check / uncheck с помощью jquery?
  • Плагин Aptana для Eclipse и jQuery
  • Нажмите внешнее меню, чтобы закрыть в jquery
  • Выберите все содержимое текстового поля, когда он получает фокус (Vanilla JS или jQuery)
  • Давайте будем гением компьютера.