Question

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

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

但是，通过按下搜索按钮，页面上的所有对象将被刷新，而仅网格应被更新，页面上的其他对象将不被刷新。

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

对于此操作，我在索引视图中使用了Partial View和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

PartialView：

@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

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

如果您想使用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>属性放在返回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可以正常工作。例如，当我单击标题进行排序时，将引用网格，这没关系，但是当第一次加载页面并且不搜索任何内容时，如果我单击网格列的标题或分页号，然后刷新整个页面。建议的更改后，请参阅控制器的内容：

  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无法正常工作并刷新页面

2 个答案: