Post to MVC Controller using Ajax


A common requirement is to post data from a MVC view using Ajax rather than the built in Html.BeginForm method. If you place a break point in the CreateEmployee function below you will find that the data has been posted as JSON.

View Model

    1 using System;

    2 using System.ComponentModel.DataAnnotations;

    3

    4 namespace PostViaAjaxApp.Models

    5 {

    6     public class EmployeeViewModel

    7     {

    8         public int Id { get; set; }

    9

   10         [Display(Name = “First Name”)]

   11         [Required(ErrorMessage = “First name is required”)]

   12         public string FirstName { get; set; }

   13

   14         [Display(Name = “Surname”)]

   15         [Required(ErrorMessage = “Surname is required”)]

   16         public string Surname { get; set; }

   17

   18         [Display(Name = “Email address”)]

   19         [Required(ErrorMessage = “Email address is required”)]

   20         [EmailAddress(ErrorMessage = “Invalid email address”)]

   21         public string EmailAddress { get; set; }

   22

   23         [Display(Name = “Is Enabled”)]

   24         public bool IsEnabled { get; set; }

   25

   26         [Display(Name = “Date Created”)]

   27         public DateTime Created { get; set; }

   28

   29         [Required]

   30         [Display(Name = “Date Modified”)]

   31         public DateTime Modified { get; set; }

   32

   33     }

   34 }

Controller

    1 using System.Web.Mvc;

    2 using PostViaAjaxApp.Models;

    3

    4 namespace PostViaAjaxApp.Controllers

    5 {

    6     public class HomeController : Controller

    7     {

    8         public ActionResult Index()

    9         {

   10             var model = new EmployeeViewModel();

   11             model.Id = 1;

   12             model.IsEnabled = true;

   13

   14             return View(model);

   15         }

   16

   17         [AllowAnonymous]

   18         [HttpPost]

   19         public ActionResult CreateEmployee(string id, string firstName, string surname, string email, bool isEnabled)

   20         {

   21             return new EmptyResult();

   22         }

   23     }

   24 }

View

    1 @{

    2     ViewBag.Title = “Index”;

    3 }

    4 @using System.Web.Mvc.Html

    5 @model PostViaAjaxApp.Models.EmployeeViewModel

    6 <h2>Index</h2>

    7

    8 @Styles.Render(“~/Content/css”)

    9 @Scripts.Render(“~/bundles/modernizr”)

   10

   11 <script src=”http://code.jquery.com/jquery-1.11.3.js”></script>

   12

   13 <script type=”text/javascript”>

   14

   15     $(function () {

   16         $(“#PostEmployee”).click(function () {

   17

   18             var id = $(“#Id”).val();

   19             var firstName = $(“#FirstName”).val();

   20             var surname = $(“#Surname”).val();

   21             var isEnabled = $(“#IsEnabled”).val();

   22             var email = $(“#EmailAddress”).val();

   23

   24             $.ajax({

   25                 type: “POST”,

   26                 url: @Url.Action(“CreateEmployee”, “Home”),

   27                 timeout: 5000,

   28                 data: {

   29                     id: id,

   30                     firstName: firstName,

   31                     surname: surname,

   32                     email: email,

   33                     isEnabled: isEnabled

   34                 },

   35                 success: function (data) {

   36                 },

   37                 error: function (xhr, ajaxOptions, thrownError) {

   38                 }

   39             });

   40         });

   41     });

   42

   43 </script>

   44

   45 @*@using (Html.BeginForm((string)ViewBag.FormAction, “Home”))

   46 {*@

   47     @Html.ValidationSummary(true, “Create employee was unsuccessful. Please correct errors and try again.”)

   48

   49     @Html.HiddenFor(model => model.Id)<fieldset>

   50         <legend>New Employee</legend>

   51         <div class=”employeeRow”>

   52             @Html.LabelFor(m => m.FirstName)

   53             @Html.TextBoxFor(m => m.FirstName)

   54         </div>

   55         <div class=”employeeRow”>

   56             @Html.LabelFor(m => m.Surname)

   57             @Html.TextBoxFor(m => m.Surname)

   58         </div>

   59         <div class=”employeeRow”>

   60             @Html.LabelFor(m => m.EmailAddress)

   61             @Html.TextBoxFor(m => m.EmailAddress)

   62         </div>

   63         <div class=”employeeRow”>

   64             @Html.LabelFor(m => m.IsEnabled)

   65             @Html.CheckBoxFor(m => m.IsEnabled)

   66         </div>

   67         <div class=”employeeRow”>

   68             <input type=”submit” value=”Save” id=”PostEmployee” />

   69         </div>

   70     </fieldset>@*

   71 }*@

   72

   73 @Scripts.Render(“~/bundles/jquery”)

   74

   75

   76

   

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s