CODEWITHSUNDEEP
asp.netajaxasp.net-mvc-5
Richard Edwards
Richard Edwards

Reputation: 23

Ajax.BeginForm OnBegin not firing (ASP.NET MVC5 application)

I've been trying to get a Javascript function to fire when my page's AJAX processing is triggered without success. Most of my time has been spent trying to get the OnBegin AjaxOption value working, but I have spent time with the global JQuery .ajaxSend handler as well (which I believe might not be compatible with ASP.NET MVC), both without success.

I've reduced my page to something pretty simple. My Index.cshtml for the project is:

@using SalePointWebItemInquiry.Controllers
@using System.Web.Mvc.Ajax

@{
    ViewBag.Title = "Home Page";
}

@Scripts.Render("~/bundles/jquery", "~/bundles/jqueryval")

<script type="text/javascript">
    function TestFunction() {
        alert("Calling testfunction.");
    }
</script>

@using (Ajax.BeginForm("PressButton", 
    "Home", 
    new AjaxOptions
        {
            OnBegin = "TestFunction"
        })) 
{
<div>
        <input class="btn btn-default" type="submit" id="1" name="buttonType" value="Enter" />
</div>
}

The page that this renders is:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page - My ASP.NET Application</title>
    <link href="/Content/bootstrap.css" rel="stylesheet" />
    <link href="/Content/site.css" rel="stylesheet" />
    <script src="/Scripts/modernizr-2.6.2.js"></script>
  </head>

  <body>
    <div class="container body-content bordered">
      <script src="/Scripts/jquery-1.10.2.js"></script>
      <script src="/Scripts/jquery.validate.js"></script>
      <script src="/Scripts/jquery.validate.unobtrusive.js"></script>

      <script type="text/javascript">
        function TestFunction() {
          alert("Calling testfunction.");
        }
      </script>

      <form action="/Home/PressButton" data-ajax="true" data-ajax-begin="TestFunction" id="form0" method="post">
        <div>
          <input class="btn btn-default" type="submit" id="1" name="buttonType" value="Enter" />
        </div>
      </form>
      <footer>
        <div class="row">
          <div class="col-md-5">
            <p>&copy; 2015 - Application</p>
          </div>
          <div class="col-md-7 text-right">
            Version: Put version here
          </div>
        </div>
      </footer>
    </div>

    <script src="/Scripts/jquery-1.10.2.js"></script>

    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/respond.js"></script>

    <!-- Visual Studio Browser Link -->
    <script type="application/json" id="__browserLink_initializationData">
      {"appName":"Internet Explorer","requestId":"d2eef5342ac64f3db1545856102f4a6f"}
    </script>
    <script type="text/javascript" src="http://localhost:53954/45ae7332668647b5a3795d87cd6ba1a9/browserLink" async="async"></script>
    <!-- End Browser Link -->

  </body>

</html>

Does anyone have any thoughts on why the TestFunction() Javascript function isn't firing when I click the ENTER button?

Solution: Thanks for the help :). I wasn't properly referencing jquery.unobtrusive-ajax.js. The direct solution to my problem was to use Nuget to retrieve a Javascript package that wasn't local using this command at Nuget console: Install-Package Microsoft.jQuery.Unobtrusive.Ajax

Since I didn't have jquery.unobtrusive-ajax.js locally, all of my attempts to reference it locally failed. I may have tried a CDN reference once or twice, but that never worked out and I had a lot of theories as to the cause of the problem at the time.

I didn't even have to change the code. This code in BundleConfig.cs automatically included the file once I had retrieved it:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

Upvotes: 1

Views: 6924

Answers (2)

user3559349
user3559349

Reputation:

You have duplicated

<script src="/Scripts/jquery-1.10.2.js"></script>

Remove the second one and then you also need to add jquery.unobtrusive-ajax.js in order for Ajax.BeginForm() to work (other wise you just making a normal submit - and therefore TestFunction() will never be called)

Upvotes: 2

pool pro
pool pro

Reputation: 2104

Looks like you are loading your script before JQuery can load. Scripts need to load at the bottom of the page just before the body tag and after JQuery loads.

Please try

@section Scripts
{
<script type="text/javascript">
    function TestFunction() {
        alert("Calling testfunction.");
    }
</script>
}

This will place the script after JQuery loads.

Upvotes: 1

Related Questions