How to prevent page refresh on ajax request?

Posted by  Ethan Shestak
C#
 676  View(s)
Ratings:
Rate this:

Hi,

I have submitted the form through ajax request. But on submission of the form, the page was refresh.

Please give me some idea to prevent page refresh on form submit.

Here is my code,


<html> <head> <link rel="stylesheet" href="~/Content/bootstrap.min.css"> <link rel="stylesheet" href="~/Content/font-awesome.min.css">
<script src="~/Scripts//jquery.min.js"></script> <script src="~/Scripts//jquery-ui.min.js"></script>
</head> <body>     @using (Ajax.BeginForm("Action", "Controller", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divID" }, new { @id = "fromID" }))     {         <div class="row">             <div class="col-xs-12 col-md-3">                 <label>Input 1</label>                 @Html.TextArea("input1", "")             </div>             <div class="col-xs-12 col-md-3">                 <label>Input 2</label>                 @Html.TextArea("input2", "")             </div>             <div class="col-xs-12 col-md-3">                 <label>Input 3</label>                 @Html.TextBox("input3", "")             </div>             <div class="col-xs-12 col-md-3">                 <label>Input 4</label>                 @Html.TextBox("input4", "")             </div>         </div>         <div>             <input type="submit" value="Submit" class="btn btn-primary" />         </div>     } </body> </html>
  1. Re: How to prevent page refresh on ajax request?

    Hi Ethan,

                    I have analyzed your code. As my point of view, you are not using "jquery.unobtrusive-ajax.min.js" Ajax library in your project.

    Modified your code as follows. But don't forget to use "jquery.unobtrusive-ajax.min.js" in your project.

    <html>
    <head>
        <link rel="stylesheet" href="~/Content/bootstrap.min.css">
        <link rel="stylesheet" href="~/Content/font-awesome.min.css">
        <script src="~/Scripts//jquery.min.js"></script>
        <script src="~/Scripts//jquery-ui.min.js"></script>
        <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    </head>
    
    <body>     @using (Ajax.BeginForm("Action", "Controller", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divID" }, new { @id = "fromID" }))     {         <div class="row">             <div class="col-xs-12 col-md-3">                 <label>Input 1</label>                 @Html.TextArea("input1", "")             </div>             <div class="col-xs-12 col-md-3">                 <label>Input 2</label>                 @Html.TextArea("input2", "")             </div>             <div class="col-xs-12 col-md-3">                 <label>Input 3</label>                 @Html.TextBox("input3", "")             </div>             <div class="col-xs-12 col-md-3">                 <label>Input 4</label>                 @Html.TextBox("input4", "")             </div>         </div>         <div>             <input type="submit" value="Submit" class="btn btn-primary" />         </div>     } </body> </html>

    I hope it's informative for you !!!

      Modified On Mar-13-2018 11:08:23 PM

Answer