ASP.NET Ajax.BeginForm with angularjs handlers

Question

I have a razor partial view which makes use of Ajax.BeginForm. Problem is that I want to handle ajax response via angular controller which is attached to this view. While I can attach custom attributes to inputs using htmlattributes, I couldn't find anything similar for Ajax.BeginForm helper aside from AjaxOptions. But how can I define angular controller method inside it?

upd: I know that OnSuccess etc. ajax events can be handled via regular javascript like below:

<div class="content">
        @*@using (Ajax.BeginForm("AccountCheckLogin2", "Login", null, new AjaxOptions { OnFailure = "OnFailure", OnSuccess = "OnSuccess", UpdateTargetId = "result" }, new { @name = "form", role = "form" }))*@
        @using (Ajax.BeginForm("AccountCheckLogin2", "Login", new AjaxOptions { OnSuccess = "OnSuccessLogin", OnBegin = "OnBeginLogin", OnComplete = "OnCompleteLogin", OnFailure = "OnFailureLogin" }))
        {
            //inputs here
        }
           <a class="link" href="/Registration/Registration">Я не зареестрований</a>
        </div>
</div>
<script type="text/javascript">       
    function OnSuccessLogin(response) {
        if (response.ResponseCode == "1") {
            window.location = "/";
        }
        else
        {                
            $("#LoginValidationSummary ul").append("<li>"+response.ResponseMessage+"</li>");
        }
    }
    function OnBeginLogin() {
        $("#loginSubmit").prop("disabled", true);
    }
    function OnCompleteLogin() {
        $("#loginSubmit").prop("disabled", false);
    }
    function OnFailure() {
        alert("Whoops! That didn't go so well did it?");
    }

</script>

question is, can I handle this events via Angular methods?

if it can be achieved by htmlattributes then yes, but frankly I have no idea what attribute should be applied in order to handle ajax response in angular — Vlad Levchenko
You can set the controller that will be used for the form if that's what you want or you can apply it to any html <div> — Ric
I've updated the question with code sample to show what I'm trying to do — Vlad Levchenko
You may not want to use Ajax.BeginForm for what you want to do but rather do everything the angular way and define the controller and attach it to the form — Ric

MrWRX1031 MrWRX1031 · Accepted Answer · 2018-02-09T07:08:14

try this, JS:

var _myCtrlscope;
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
_myCtrlscope = $scope;           
 $scope.foofunction = function (data) {
            // do your stuff with data here.
        }
    });

Razor:

Ajax.BeginForm("controllerName", "actionName", 
new AjaxOptions {OnSuccess = "_myCtrlscope.foofunction"}

Let me know if it works, thanks!

ASP.NET Ajax.BeginForm with angularjs handlers

1 Answers

Razor: