Предоставление частичного просмотра при нажатии кнопки в 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 следующим образом:

• Активировать анимацию CSS3 при просмотре содержимого
• Проблема с CSS на Twitter Typeahead с Bootstrap 3
• Каков самый простой способ jQuery иметь «позицию: фиксированный» (всегда сверху) div?
• переполнение элементов с помощью jquery
• jquery UI Сортировка с таблицей и шириной

 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 на стороне клиента?

 Search 

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

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

  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 }) 

 public ActionResult DisplaySearchResults(SearchCriterionModel criteria) { var model = // build list based on the properties of criteria return PartialView("SearchResults", model); }