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
Ira Lukhezo's blog 