为什么 ajax.beginform 不工作并且页面被刷新

Question

我有一个包含 WebGrid 的视图。还有一个用于 WebGrid 搜索和过滤的部分，其中包括一个文本框和一个提交按钮类型。

通过调用索引ActionResult，所有记录都正确加载到网格中，当我在文本框中输入文本并单击按钮时，接收到信息并从控制器中正确过滤并加载到网格中。

但是按下搜索按钮，页面上的所有对象都会被刷新，而只有网格应该被更新，页面上的其他对象不应该被刷新。

（例如，按下搜索按钮后，文本框 (<input type="text" />) 的内容为空，按钮闪烁。）

对于这个操作，我在索引视图中使用了局部视图和Ajax.Beginform。缺少哪部分代码？为什么页面上的所有控件都更新了？

这是我的控制器：

Function Index(strName As String) As ActionResult
    If strName = Nothing Then
        Return View(db.Brands.ToList())
    Else
        Return View(db.Brands.Where(Function(x) x.BrandName.Contains(strName)).ToList())
    End If
End Function

局部视图：

@ModelType IEnumerable(Of Machinary.Brand)
@Code
    Dim wg As New WebGrid(Model, rowsPerPage:=10, canPage:=True, canSort:=True, ajaxUpdateContainerId:="wg1")
    Dim rowIndex = ((wg.PageIndex + 1) * wg.RowsPerPage) - (wg.RowsPerPage - 1)
End Code

@wg.GetHtml(tableStyle:="table table-bordered table-hovor", mode:=WebGridPagerModes.All,
                htmlAttributes:=New With {.id = "wg1", .class = "Grid"},
                firstText:="<<",
                lastText:=">>",
                footerStyle:="table-pager",
                columns:=wg.Columns(
                wg.Column("BrandName", Sorter("BrandName", "عنوان", wg)),
                wg.Column(header:="عملیات", format:=Function(item) New HtmlString(
                Html.ActionLink(" ", "BrandEdit", New With {.id = item.id}, htmlAttributes:=New With {.class = "glyphicon glyphicon-edit btn btn-info btn-sm", .data_toggle = "tooltip", .data_placement = "top", .title = "ویرایش"}).ToString() + " " +
                Html.ActionLink(" ", "BrandDelete", New With {.id = item.id}, htmlAttributes:=New With {.class = "glyphicon glyphicon-trash btn btn-danger btn-sm", .data_toggle = "tooltip", .data_placement = "top", .title = "حذف"}).ToString()))))


@functions
    Public Shared Function Sorter(columnName As String, columnHeader As String, grid As WebGrid) As String
        Return String.Format("{0} {1}", columnHeader, If(grid.SortColumn = columnName, If(grid.SortDirection = SortDirection.Ascending, "▲", "▼"), String.Empty))
    End Function
End Functions

Index.Vbhtml（主视图）：

@Using (Ajax.BeginForm("Index", "Brand", FormMethod.Post, New AjaxOptions With {
                                            .InsertionMode = InsertionMode.Replace,
                                            .UpdateTargetId = "GridList"}))
End Using

<section Class="panel">
    <header Class="panel-heading tab-bg-dark-navy-blue">
        <label class="bg-transparent wht-color">برندها</label>
    </header>

    <div Class="panel-body pull-left">
        @Using (Html.BeginForm("Index", "Brand", FormMethod.Post))
            @Html.TextBox("strName", Nothing, New With {.class = "form-control", .PlaceHolder = "جستجو"})
            @<Button type="submit" value="" style="display: none"></Button>
        End Using

    </div>
    <div id="GridList">
        @Html.Partial("PVBrandList")
    </div>

</section>

<div Class="pull-left btn-toolbar">
    <div Class="btn btn-default">
        @Html.ActionLink(" ", "BrandAdd", Nothing, htmlAttributes:=New With {.class = "glyphicon glyphicon-plus btn btn-small", .data_toggle = "tooltip", .data_placement = "top", .title = "اضافه کردن سطر جدید"})
    </div>
    <div Class="btn btn-default">
        @Html.ActionLink(" ", "Index", Nothing, htmlAttributes:=New With {.class = "glyphicon glyphicon-tasks btn btn-small", .data_toggle = "tooltip", .data_placement = "top", .title = "لیست برندها"})
    </div>
</div>
<input type="text" />
<script type="text/javascript">
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })
</script>

Answer 1

您认为最明显的问题是提交按钮存在于使用 Html.BeginForm() 助手的表单中：

@Using (Html.BeginForm("Index", "Brand", FormMethod.Post))
    @Html.TextBox("strName", Nothing, New With {.class = "form-control", .PlaceHolder = "XXXXX"})
    @<Button type="submit" value="" style="display: none"></Button>
End Using

使用 Ajax.BeginForm() 助手的其他表单仍然是空的：

@Using (Ajax.BeginForm("Index", "Brand", FormMethod.Post, New AjaxOptions With {
                                            .InsertionMode = InsertionMode.Replace,
                                            .UpdateTargetId = "GridList"}))
End Using

此设置在触发提交按钮单击事件时导致完全回发，随后刷新整个视图而不是 table 网格（清除文本框值）。

如果您想使用 AJAX，请确保您在该表单中使用带有提交按钮的 Ajax.BeginForm 助手：

@Using (Ajax.BeginForm("Index", "Brand", FormMethod.Post, New AjaxOptions With {
                                            .InsertionMode = InsertionMode.Replace,
                                            .UpdateTargetId = "GridList"}))
    @Html.TextBox("strName", Nothing, New With {.class = "form-control", .PlaceHolder = "XXXXX"})
    <button type="submit" style="display: none">Search</button>
End Using

并将 <HttpPost> 属性放在 returns PartialView:

的目标操作上

<HttpPost()>
Public Function Index(strName As String) As ActionResult
    If strName = Nothing Then
        Return PartialView(db.Brands.ToList())
    Else
        Return PartialView(db.Brands.Where(Function(x) x.BrandName.Contains(strName)).ToList())
    End If
End Function

Answer 2

非常感谢。此问题已得到解决。当我搜索某些内容时，AJAX 可以正常工作。例如，当我点击 header 进行排序时，网格被引用，并且它是 OK.But 当页面第一次加载并且我没有搜索任何东西时，如果我点击网格列的标题或页码，然后刷新整个页面。请在您建议的更改后查看控制器的内容：

  Function Index() As ActionResult
            Return View(db.Brands.ToList())
End Function

  <HttpPost>
  Function Index(strName As String) As ActionResult
            If strName = Nothing Then
                Return PartialView("_PVBrandGrid", db.Brands.ToList())
            Else
                Return PartialView("_PVBrandGrid", db.Brands.Where(Function(x) x.BrandName.Contains(strName)).ToList())
            End If
End Function

第一次运行的第一个Function Index() As ActionResult很有可能会出现这个问题，请问是什么和解决方案？谢谢

为什么 ajax.beginform 不工作并且页面被刷新

why ajax.beginform not working and page is refreshed

vb.net

ajax

asp.net-mvc

ajax.beginform