Рендеринг PartialView с таблицей при нажатии кнопки Поиск

Question

В основном мой вопрос касается того, как обрабатывать результаты PartialView.Моя текущая (фиктивная) страница составлена ​​следующим образом:

Index.cshtml

@model SomeModel

@ {
    ViewBag.Title = "";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

...(Shortened code)
@using (Html.BeginForm ()) {
    @Html.EditorFor (model => model.Id, new { htmlAttributes = new { @class = "form-control", @id = "Id", @type = "text" } })
    @Html.EditorFor (model => model.Name, new { htmlAttributes = new { @class = "form-control", @id = "Name", @type = "text" } }) <
    <input type = "submit" value = "Search" / >
}

//The area where I want to place the PartialView result
<div class="row">
                @{Html.RenderAction("List", "Controller");}
</div>

И, наконец, мой List.cshtml

@model SomeViewModel

<table class="table-bordered table table-hover m-2" id="table">
    <thead class="thead-light">
        <tr>
            <th scope="col" class="align-middle">#</th>
            <th scope="col" class="align-middle">Field </th>
            <th scope="col" class="align-middle">Field </th>
            <th scope="col" class="align-middle">Field </th>
            <th scope="col" class="align-middle">Field </th>
            <th scope="col" class="align-middle">Field </th>
            <th scope="col" class="align-middle">Field </th>
            <th scope="col" class="align-middle">Field </th>
            <th scope="col" class="align-middle">Field </th>
        </tr>
    </thead>
<tbody>
//A @foreach for each item in the model, with <td> tags
</tbody>
</table>

То, что я хочу, это когда я нажимаю кнопку «Поиск» на странице Index.cshtml, она должна получить 2 поля, используемые для поиска (Id и Name), и вывести результат на той же странице в результатеКонтроллер списка.

Но в данный момент он нажимает на кнопку, и он перенаправляет меня в / my / site / list, который буквально является результатом List.cshtml, в результате чего получается неформатированная страница с простотаблица.

Я уже пробовал следующий код в index.cshtml

<script>
    var url = '@Url.Action("List", "Controller")';
    $('form').submit(function() {
      if (!$(this).valid()) {
        return false;
      }
      var form = $(this).serialize();
      $('#list-items').load(url, form);
      return false; // prevent the default submit action
    })
</script>

Но он просто перезагружает страницу, ничего не принося, и контроллер списка никогда не срабатывает.

Список действий

public ActionResult List(PIMPSearchViewModel search)
{
    var model = new PIMPListViewModel();
    using (var context = new dbBEMIEntities())
    {
        //TODO: 
        model.Pimps = context.tbPIMPs.Where(p => p.id_pimp == search.Id && 
                                                 p.service_type.Equals(search.SelectedServiceType, StringComparison.InvariantCultureIgnoreCase) &&
                                                 p.status.Equals(search.SelectedStatus, StringComparison.InvariantCultureIgnoreCase)).ToList();
        foreach (var item in model.Pimps)
        {
            item.status = context.tbParams.Where(k => k.key_complement == item.status).Select(k => k.param_value).FirstOrDefault();
        }
    }
    return PartialView(model);
}

Answer 1

Если нет особых причин для отправки с использованием jquery, я бы использовал встроенный помощник Ajax.BeginForm.

Сначала измените объявление формы на использование ajax (обратите внимание на изменение с Html.BeginForm на Ajax.BeginForm ...):

@using (Ajax.BeginForm("List", "Home",
      new AjaxOptions
      {
          InsertionMode = InsertionMode.Replace, 
          HttpMethod = "POST",
          UpdateTargetId = "search-results"
      }))
{
    @Html.EditorFor(model => model.Id, new { htmlAttributes = new { @class = "form-control", @id = "Id", @type = "text" } })
    @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control", @id = "Name", @type = "text" } }) 
    <input type="submit" value="Search" />
}

Итак, что здесь происходит, это использует ajax для отправки формы, затем, когда возвращается результат, мы говорим ему обновить div с id «search-results», заменив этот div результатами. В этом случае результаты будут вашим частичным представлением. Также обратите внимание, что мы указываем контроллер и действие в параметрах формы.

Затем измените div для результатов поиска. Здесь нет необходимости в вызове рендеринга, потому что он не нужен до окончания поиска:

<div class="row">
    <div id="search-results"></div>
</div>

Обратите внимание, что идентификатор div совпадает с параметрами ajax UpdateTargetId.

Тогда в методе постконтроллера, только изменение, я бы сделал это, чтобы указать частичное имя представления в возвращении. Не уверен, что это необходимо на 100%, но я много раз сталкивался с проблемами, если не знаю:

    [HttpPost]
    public ActionResult List(Student model)
    {
        // Do stuff
        return PartialView("_myPartial", model);
    }

Последнее, что нужно сделать, - убедиться, что у вас установлен пакет nuget Microsoft.jQuery.Unobtrusive.Ajax и скрипт включен в комплект. Это необходимо, чтобы сделать его ajaxy, иначе частичное представление будет возвращено как полная страница.

UPDATE:

Как добавить скрипт в комплект. Просто добавьте его в пакет jquery. Откройте файл BundleConfig.cs в папке App_Start. Найдите пакет jQuery, который обычно является первым:

        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

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

        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/jquery.unobtrusive-ajax.min.js"));