javascript - How to call this post action method using Ajax? -

i trying create form ajax post creation of new user. goal show popup indicating result of action. current version of action method adds errors modelstate if something's wrong, , redirects if successful.

action method within admincontroller.cs:

[httppost] public async task<actionresult> create(createmodel model) {     if (modelstate.isvalid)     {         appuser user = new appuser { username = model.name, email = model.email };         identityresult result = await usermanager.createasync(user,             model.password);         if (result.succeeded)         {             return redirecttoaction("index");         }         else         {             adderrorsfromresult(result);         }     }    return view(model); } 

the view:

@model identitydevelopment.models.createmodel @{ viewbag.title = "create user";}  <h2>create user</h2> @html.validationsummary(false) @using (html.beginform("create", "admin", new { returnurl = request.url.absoluteuri })) {     <div class="form-group">         <label>name</label>         @html.textboxfor(x => x.name, new { @class = "form-control" })     </div>     <div class="form-group">         <label>email</label>         @html.textboxfor(x => x.email, new { @class = "form-control" })     </div>     <div class="form-group">         <label>password</label>         @html.passwordfor(x => x.password, new { @class = "form-control" })     </div>     <button type="submit" onclick="return showdiv();" class="btn btn-primary">create</button>     @html.actionlink("cancel", "index", null, new { @class = "btn btn-default" })   }   <button id="usercreatebutton">create</button> 

as seen above, button "usercreatebutton" id development button want put ajax function in:

$("#usercreatebutton")        .button()        .click(function (event) {            alert("ajax post call");        }); 

the other create button regular form submit.

the createmodel:

 public class createmodel     {         [required]         public string name { get; set; }         [required]         public string email { get; set; }         [required]         public string password { get; set; }     } 

---

based on shyju's response, got working. below post updates code:

in view, modified beginform declaration give form id , moved submit button inside it:

@model identitydevelopment.models.createmodel @{ viewbag.title = "create user";}  <h2>create user</h2> @html.validationsummary(false) @using (html.beginform("create", "admin", new { returnurl = request.url.absoluteuri }, formmethod.post, new { @id = "signupform" })) {     <div class="form-group">         <label>name</label>         @html.textboxfor(x => x.name, new { @class = "form-control" })     </div>     <div class="form-group">         <label>email</label>         @html.textboxfor(x => x.email, new { @class = "form-control" })     </div>     <div class="form-group">         <label>password</label>         @html.passwordfor(x => x.password, new { @class = "form-control" })     </div>    <!-- <button type="submit" onclick="return showdiv();" class="btn btn-primary">create</button> -->      <button type="submit" id="usercreatebutton">create</button>     @html.actionlink("cancel", "index", null, new { @class = "btn btn-default" })   } 

the controller code modified 1 shyju's response.

finally, javascript code was:

 $("form#signupform").submit(function (event) {          event.preventdefault();          var form = $(this);          $.post(form.attr("action"), form.serialize(), function (res) {              if (res.status === "success") {                  alert(res.message);              }              else {                  alert(res.message);              }          });       }); 

first of all, put submit button inside form

@using (html.beginform("create", "admin", new { returnurl = request.url.absoluteuri })) {      // existing form elements   <button type="submit" id="usercreatebutton">create</button> } 

now listen form submit event form ,serialize , send it. may use jquery serialize method that.

$.post shorthand of $.ajax post method type. let's use that.

$(function(){    $("form#giveyourformidhere" ).submit(function(e) {       e.preventdefault();      var form=$(this);      $.post(form.attr("action"),form.serialize(),function(res){         //do res      });    });  }); 

now, in httppost action, since making ajax call, should return json response.

[httppost] public async task<actionresult> create(createmodel model) {     if (modelstate.isvalid)     {         appuser user = new appuser { username = model.name, email = model.email };         identityresult result = await usermanager.createasync(user,             model.password);         if (result.succeeded)         {             return json(new { status="success"});         }         else         {                             return json(new { status="error",message="some error"});         }     }     return json(new { status="error", message="model validation failed"}); } 

update $.post method's callback read json data, inspect property values , something.

$.post(form.attr("action"),form.serialize(),function(res){         if(res.status==="success")         {           window.location.href="/admin/index";         }         else         {           alert(res.message);         } }); 

if want support ajax form submit , normal form submit, may use request.isajaxrequest() method conditionally return different responses. if want return model validation errors, may read model state , add needed info(error messages ?) json response , display user. here post explaining how read model errors.