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个字段（“标识”和“名称”），并作为“列表”控制器的结果在同一页面中列出结果。

但是当前的操作是，当我单击“按钮”时，它会将我重定向到/ 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 ID与ajax选项UpdateTargetId匹配。

然后在post controller方法中，只需更改即可使它在返回中指定部分视图名称。不知道是否需要100％，但是如果我不这样做，我会遇到很多麻烦：

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

最后一件事是确保您已安装Microsoft.jQuery.Unobtrusive.Ajax nuget程序包和捆绑包中包含的脚本。必须将其设为ajaxy，否则部分视图将作为整页返回。

更新：

如何将脚本添加到包中。只需将其添加到jquery捆绑中即可。打开App_Start文件夹中的BundleConfig.cs文件。找到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"));

点击搜索按钮时

1 个答案: