почему ajax.beginform не работает и страница обновляется - PullRequest
Новая
       35

почему ajax.beginform не работает и страница обновляется

0 голосов
/ 12 ноября 2018

У меня есть представление, которое содержит 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

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>

Ответы [ 2 ]

0 голосов
/ 13 ноября 2018

Спасибо большое. Эта проблема была исправлена. Когда я что-то ищу, 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

Первый Индекс функции () As ActionResult , который запускается впервые, может вызвать эту проблему. Что такое предложение и решение? Спасибо в

0 голосов
/ 12 ноября 2018

Самая очевидная проблема, по вашему мнению, заключается в том, что кнопка отправки существует внутри формы, которая использует Html.BeginForm() helper: 

@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
...