How to submit form with angular in mvc?

Question

I have form:

 <form ng-controller="accountContentController" name="editUserForm" action="PersonalInformation" method="post">
    @Html.TextBoxFor(m => m.ZipCode, new { id = "zipCode", name = "zipCode", @class = "form-control", @maxlength = "5", @required = "required", ng_model = "zipCode", ng_pattern = @"/[0-9]{5}$/" })
    @Html.PasswordFor(m => m.Password, new { id = "password", name = "password", ng_model = "password", @class = "form-control", @required = "required"})
    <input id="submit" type="submit" class="btn-block secondary-button save-changes" value="@Translator.Translate("SAVE_CHANGES")">
</form>

i have controller in mvc:

  [HttpPost]
  public ActionResult PersonalInformation(PersonalInformationModel model)
   {
       return View(model);
   }

How can i submit form to send data from view to controller with angular?

Icycool · Accepted Answer · 2015-06-30 11:48:24Z

First you'll need a custom ajax submit function in your submit button.

<button type="button" ng-click="submit(editUserForm)">@Translator.Translate("SAVE_CHANGES")</button>

Then handle submit in your controller

$scope.submit = function(form) {
    // client side error checking
    if (form.$invalid) {
        // do something and return
    }

    // pack all parameter to match with keys in your model
    var model = {
        ZipCode: $scope.zipcode,
        Password: $scope.password
    }

    // send to your controller
    $http.post('/className/PersonalInformation', {model: model})
        .success(function(data, status, headers, config){
            // handle success here
        })
        .error(function(data, status, headers, config){
            // handle error here
        });
}

Then in your controller change ActionResult to JsonResult

public JsonResult PersonalInformation(PersonalInformationModel model)
{
    // do something with model
    var result = doSomething(model);

    return Json(result, JsonRequestBehavior.AllowGet);
}

Yes ... i added alert on start of function and its trigger but controller is not trigger
Can you check your browser developer console network tab and see whether the request is sent correctly?

Collectives™ on Stack Overflow

How to submit form with angular in mvc?

1 Answer 1

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Related