How to prevent page refresh on ajax request?

Total Post:4

Points:28
C#
 270  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. Post:44

    Points:310
    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