Post data from view to controller using ajax

Total Post:24

Points:168
ASP.Net  AJAX  Mvc 
 934  View(s)
Ratings:
Rate this:

I want to post data from view to controller using ajax.

I am novice in Ajax. Please help me.

This is my View code.

  @using (Html.BeginForm("SignIn","Home",FormMethod.Post))
        {
           <fieldset>
    <legend>Login:</legend>
    User Name: @Html.TextBoxFor(x=>x.UserName)<br>
    Password: @Html.PasswordFor(x=>x.Password)<br>
 <input type="submit" value="Login" />@ViewBag.error 
                    }
                </div>

  1. Post:19

    Points:135
    Re: Post data from view to controller using ajax

    You have to use following js library for ajax 

    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.2/jquery.validate.unobtrusive.js"></script>
     
    @using(Ajax.BeginForm("index","Home", new AjaxOptions
    {
        HttpMethod = "POST",//method post
        UpdateTargetId = "target",//
        OnSuccess = "updateSuccess"//
    }))
    {
     
        <center><h2>Registration Form</h2></center>
        @Html.ValidationSummary(true
        <hr />
        <div>
            <center> <table border="0"  width="70%" cellspadding="0" cellspacing="0">
            <tr>
                 <td><label id="label1">User Name</label>
                    @Html.HiddenFor(x => x.Id, new { @Value = 0 })
                </td>
                  <td>@Html.TextBoxFor(x =>x.UserName)
                      @Html.ValidationMessageFor(m=> m.UserName)
                  </td>
                <td><label id="label2">Father Name</label></td>
                  <td>@Html.TextBoxFor(x =>x.FName)
                      @Html.ValidationMessageFor(m=> m.FName)
                  </td>
            </tr>
           <tr>
                <td><label id="label3">Email</label></td>
                  <td>@Html.TextBoxFor(x =>x.Email)
                      @Html.ValidationMessageFor(m=> m.Email)
                  </td>
                <td><label id="label4">Mobile</label></td>
                  <td>@Html.TextBoxFor(x =>x.Mobile)
                      @Html.ValidationMessageFor(m=> m.Mobile)
                  </td>
            </tr>
           <tr>
             <td colspan="2"> <br /> <center>
                   <input type="submit" value="Submit" /></center>
               </td>
           </tr>
        </table></center>
        </div>
                
    }
     
    <div id="target">
        @Html.Partial("UserList");
    </div>
    <script>
        function updateSuccess(data) {
            $('form')[0].reset();
        }
    </script>

    hope this helps you..



      Modified On Apr-11-2018 11:02:02 PM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!