why ajax.beginform not working and page is refreshed












1














I have a view that contains a WebGrid. There is also a section for WebGrid search and filtering that includes a text box and a submit button type.



By calling the index ActionResult, all records are loaded correctly in the grid, and when I enter a text in the text box and click the button, the information is received and filtered properly from the controller and it is loaded in the grid.



But by pushing the search button, all the objects on the page are refreshed, while only the grid should be updated, and the other objects on the page should not be refreshed.



(For example، After pressing the search button, the contents of the textbox (<input type="text" />) are empty and buttons blink.)



For this operation, I used Partial View and Ajax.Beginform in index view.
Which part of the code is missing? Why are all the controls on the page updated?



This is my Controler:



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 (Main View):



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









share|improve this question
























  • You have 2 BeginForm: @Using (Html.BeginForm("Index", "Brand", FormMethod.Post)) and @Using (Ajax.BeginForm("Index", "Brand", FormMethod.Post, ...) and the submit button is inside Html.BeginForm which causing postback and refresh the page. You should use submit button and input inside Ajax.BeginForm and change return type to PartialView to stay in same page & update the grid.
    – Tetsuya Yamamoto
    Nov 12 at 6:05


















1














I have a view that contains a WebGrid. There is also a section for WebGrid search and filtering that includes a text box and a submit button type.



By calling the index ActionResult, all records are loaded correctly in the grid, and when I enter a text in the text box and click the button, the information is received and filtered properly from the controller and it is loaded in the grid.



But by pushing the search button, all the objects on the page are refreshed, while only the grid should be updated, and the other objects on the page should not be refreshed.



(For example، After pressing the search button, the contents of the textbox (<input type="text" />) are empty and buttons blink.)



For this operation, I used Partial View and Ajax.Beginform in index view.
Which part of the code is missing? Why are all the controls on the page updated?



This is my Controler:



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 (Main View):



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









share|improve this question
























  • You have 2 BeginForm: @Using (Html.BeginForm("Index", "Brand", FormMethod.Post)) and @Using (Ajax.BeginForm("Index", "Brand", FormMethod.Post, ...) and the submit button is inside Html.BeginForm which causing postback and refresh the page. You should use submit button and input inside Ajax.BeginForm and change return type to PartialView to stay in same page & update the grid.
    – Tetsuya Yamamoto
    Nov 12 at 6:05
















1












1








1







I have a view that contains a WebGrid. There is also a section for WebGrid search and filtering that includes a text box and a submit button type.



By calling the index ActionResult, all records are loaded correctly in the grid, and when I enter a text in the text box and click the button, the information is received and filtered properly from the controller and it is loaded in the grid.



But by pushing the search button, all the objects on the page are refreshed, while only the grid should be updated, and the other objects on the page should not be refreshed.



(For example، After pressing the search button, the contents of the textbox (<input type="text" />) are empty and buttons blink.)



For this operation, I used Partial View and Ajax.Beginform in index view.
Which part of the code is missing? Why are all the controls on the page updated?



This is my Controler:



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 (Main View):



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









share|improve this question















I have a view that contains a WebGrid. There is also a section for WebGrid search and filtering that includes a text box and a submit button type.



By calling the index ActionResult, all records are loaded correctly in the grid, and when I enter a text in the text box and click the button, the information is received and filtered properly from the controller and it is loaded in the grid.



But by pushing the search button, all the objects on the page are refreshed, while only the grid should be updated, and the other objects on the page should not be refreshed.



(For example، After pressing the search button, the contents of the textbox (<input type="text" />) are empty and buttons blink.)



For this operation, I used Partial View and Ajax.Beginform in index view.
Which part of the code is missing? Why are all the controls on the page updated?



This is my Controler:



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 (Main View):



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






ajax asp.net-mvc vb.net ajax.beginform






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 12 at 6:19









Visual Vincent

15k51947




15k51947










asked Nov 12 at 6:02









Ashkan

2215




2215












  • You have 2 BeginForm: @Using (Html.BeginForm("Index", "Brand", FormMethod.Post)) and @Using (Ajax.BeginForm("Index", "Brand", FormMethod.Post, ...) and the submit button is inside Html.BeginForm which causing postback and refresh the page. You should use submit button and input inside Ajax.BeginForm and change return type to PartialView to stay in same page & update the grid.
    – Tetsuya Yamamoto
    Nov 12 at 6:05




















  • You have 2 BeginForm: @Using (Html.BeginForm("Index", "Brand", FormMethod.Post)) and @Using (Ajax.BeginForm("Index", "Brand", FormMethod.Post, ...) and the submit button is inside Html.BeginForm which causing postback and refresh the page. You should use submit button and input inside Ajax.BeginForm and change return type to PartialView to stay in same page & update the grid.
    – Tetsuya Yamamoto
    Nov 12 at 6:05


















You have 2 BeginForm: @Using (Html.BeginForm("Index", "Brand", FormMethod.Post)) and @Using (Ajax.BeginForm("Index", "Brand", FormMethod.Post, ...) and the submit button is inside Html.BeginForm which causing postback and refresh the page. You should use submit button and input inside Ajax.BeginForm and change return type to PartialView to stay in same page & update the grid.
– Tetsuya Yamamoto
Nov 12 at 6:05






You have 2 BeginForm: @Using (Html.BeginForm("Index", "Brand", FormMethod.Post)) and @Using (Ajax.BeginForm("Index", "Brand", FormMethod.Post, ...) and the submit button is inside Html.BeginForm which causing postback and refresh the page. You should use submit button and input inside Ajax.BeginForm and change return type to PartialView to stay in same page & update the grid.
– Tetsuya Yamamoto
Nov 12 at 6:05














2 Answers
2






active

oldest

votes


















0














The most obvious problem in your view is the submit button exists inside the form which uses 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


which other form using Ajax.BeginForm() helper still empty:



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


This setup causing full postback when submit button click event triggered, and subsequently refresh the whole view instead of table grid (with textbox value cleared).



If you want to use AJAX, make sure that you're using Ajax.BeginForm helper with submit button inside that form:



@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


And put <HttpPost> attribute on the target action which 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





share|improve this answer





















  • Thanks a lot . This problem has been fixed. When I search for something, AJAX works correctly. For example, when I click on the header to sort, the grid is refereed, and it's OK.But when the page is loaded for the first time and I do not search for anything, if I click on the title of the grid columns or paging numbers , then the entire page refreshed.Please see the contents of the controller
    – Ashkan
    Nov 13 at 5:30





















0














Thanks a lot . This problem has been fixed. When I search for something, AJAX works correctly. For example, when I click on the header to sort, the grid is refereed, and it's OK.But when the page is loaded for the first time and I do not search for anything, if I click on the title of the grid columns or paging numbers , then the entire page refreshed.
Please see the contents of the controller after your proposed changes:






  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





The first Function Index() As ActionResult that runs for the first time is likely to cause this problem, What is the offer and the solution?
Thank's






share|improve this answer





















    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53256613%2fwhy-ajax-beginform-not-working-and-page-is-refreshed%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    The most obvious problem in your view is the submit button exists inside the form which uses 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


    which other form using Ajax.BeginForm() helper still empty:



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


    This setup causing full postback when submit button click event triggered, and subsequently refresh the whole view instead of table grid (with textbox value cleared).



    If you want to use AJAX, make sure that you're using Ajax.BeginForm helper with submit button inside that form:



    @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


    And put <HttpPost> attribute on the target action which 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





    share|improve this answer





















    • Thanks a lot . This problem has been fixed. When I search for something, AJAX works correctly. For example, when I click on the header to sort, the grid is refereed, and it's OK.But when the page is loaded for the first time and I do not search for anything, if I click on the title of the grid columns or paging numbers , then the entire page refreshed.Please see the contents of the controller
      – Ashkan
      Nov 13 at 5:30


















    0














    The most obvious problem in your view is the submit button exists inside the form which uses 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


    which other form using Ajax.BeginForm() helper still empty:



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


    This setup causing full postback when submit button click event triggered, and subsequently refresh the whole view instead of table grid (with textbox value cleared).



    If you want to use AJAX, make sure that you're using Ajax.BeginForm helper with submit button inside that form:



    @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


    And put <HttpPost> attribute on the target action which 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





    share|improve this answer





















    • Thanks a lot . This problem has been fixed. When I search for something, AJAX works correctly. For example, when I click on the header to sort, the grid is refereed, and it's OK.But when the page is loaded for the first time and I do not search for anything, if I click on the title of the grid columns or paging numbers , then the entire page refreshed.Please see the contents of the controller
      – Ashkan
      Nov 13 at 5:30
















    0












    0








    0






    The most obvious problem in your view is the submit button exists inside the form which uses 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


    which other form using Ajax.BeginForm() helper still empty:



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


    This setup causing full postback when submit button click event triggered, and subsequently refresh the whole view instead of table grid (with textbox value cleared).



    If you want to use AJAX, make sure that you're using Ajax.BeginForm helper with submit button inside that form:



    @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


    And put <HttpPost> attribute on the target action which 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





    share|improve this answer












    The most obvious problem in your view is the submit button exists inside the form which uses 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


    which other form using Ajax.BeginForm() helper still empty:



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


    This setup causing full postback when submit button click event triggered, and subsequently refresh the whole view instead of table grid (with textbox value cleared).



    If you want to use AJAX, make sure that you're using Ajax.BeginForm helper with submit button inside that form:



    @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


    And put <HttpPost> attribute on the target action which 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






    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Nov 12 at 6:29









    Tetsuya Yamamoto

    14.4k41939




    14.4k41939












    • Thanks a lot . This problem has been fixed. When I search for something, AJAX works correctly. For example, when I click on the header to sort, the grid is refereed, and it's OK.But when the page is loaded for the first time and I do not search for anything, if I click on the title of the grid columns or paging numbers , then the entire page refreshed.Please see the contents of the controller
      – Ashkan
      Nov 13 at 5:30




















    • Thanks a lot . This problem has been fixed. When I search for something, AJAX works correctly. For example, when I click on the header to sort, the grid is refereed, and it's OK.But when the page is loaded for the first time and I do not search for anything, if I click on the title of the grid columns or paging numbers , then the entire page refreshed.Please see the contents of the controller
      – Ashkan
      Nov 13 at 5:30


















    Thanks a lot . This problem has been fixed. When I search for something, AJAX works correctly. For example, when I click on the header to sort, the grid is refereed, and it's OK.But when the page is loaded for the first time and I do not search for anything, if I click on the title of the grid columns or paging numbers , then the entire page refreshed.Please see the contents of the controller
    – Ashkan
    Nov 13 at 5:30






    Thanks a lot . This problem has been fixed. When I search for something, AJAX works correctly. For example, when I click on the header to sort, the grid is refereed, and it's OK.But when the page is loaded for the first time and I do not search for anything, if I click on the title of the grid columns or paging numbers , then the entire page refreshed.Please see the contents of the controller
    – Ashkan
    Nov 13 at 5:30















    0














    Thanks a lot . This problem has been fixed. When I search for something, AJAX works correctly. For example, when I click on the header to sort, the grid is refereed, and it's OK.But when the page is loaded for the first time and I do not search for anything, if I click on the title of the grid columns or paging numbers , then the entire page refreshed.
    Please see the contents of the controller after your proposed changes:






      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





    The first Function Index() As ActionResult that runs for the first time is likely to cause this problem, What is the offer and the solution?
    Thank's






    share|improve this answer


























      0














      Thanks a lot . This problem has been fixed. When I search for something, AJAX works correctly. For example, when I click on the header to sort, the grid is refereed, and it's OK.But when the page is loaded for the first time and I do not search for anything, if I click on the title of the grid columns or paging numbers , then the entire page refreshed.
      Please see the contents of the controller after your proposed changes:






        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





      The first Function Index() As ActionResult that runs for the first time is likely to cause this problem, What is the offer and the solution?
      Thank's






      share|improve this answer
























        0












        0








        0






        Thanks a lot . This problem has been fixed. When I search for something, AJAX works correctly. For example, when I click on the header to sort, the grid is refereed, and it's OK.But when the page is loaded for the first time and I do not search for anything, if I click on the title of the grid columns or paging numbers , then the entire page refreshed.
        Please see the contents of the controller after your proposed changes:






          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





        The first Function Index() As ActionResult that runs for the first time is likely to cause this problem, What is the offer and the solution?
        Thank's






        share|improve this answer












        Thanks a lot . This problem has been fixed. When I search for something, AJAX works correctly. For example, when I click on the header to sort, the grid is refereed, and it's OK.But when the page is loaded for the first time and I do not search for anything, if I click on the title of the grid columns or paging numbers , then the entire page refreshed.
        Please see the contents of the controller after your proposed changes:






          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





        The first Function Index() As ActionResult that runs for the first time is likely to cause this problem, What is the offer and the solution?
        Thank's






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






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 13 at 5:37









        Ashkan

        2215




        2215






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.





            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


            Please pay close attention to the following guidance:


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53256613%2fwhy-ajax-beginform-not-working-and-page-is-refreshed%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Guess what letter conforming each word

            Port of Spain

            Run scheduled task as local user group (not BUILTIN)