title: Submit form using AJAX in Asp.Net mvc 4
body: <p>I'm trying to learn asp.net and so far I can load other page contents without refreshing using <code>Ajax.Actionlink</code> and <code>AjaxOptions()</code> but I can't figure it out how to use ajax when submitting a form. I did a lot of googling but couldn't find the appropriate solution. Here are my codes,</p>
  
  <p>Controller page</p>
  
  <pre><code>namespace CrudMvc.Controllers
  {
  public class HomeController : Controller
  {
      sampleDBEntities db = new sampleDBEntities(); 
      //
      // GET: /Home/
  
      public ActionResult Index()
      {
          return View(db.myTables.ToList());
      }
  
      public PartialViewResult Details(int id = 0)
      {
          myTable Table = db.myTables.Find(id);
          return PartialView(Table);
      }
  
      [HttpGet]
      public PartialViewResult Create()
      {
          return PartialView();
      }
  
      [HttpPost]
      public ActionResult Create(myTable table)
      {
          if (ModelState.IsValid)
          {
              db.myTables.Add(table);
              db.SaveChanges();
              return RedirectToAction("Index");
          }
          return View(table);
      }
  
      protected override void Dispose(bool disposing)
      {
          db.Dispose();
          base.Dispose(disposing);
      }
  }
  }
  </code></pre>
  
  <p><code>Index</code> View page</p>
  
  <pre><code>@model IEnumerable&lt;CrudMvc.Models.myTable&gt;
  
  @{
  ViewBag.Title = "Index";
  Layout = "~/Views/Shared/_Layout.cshtml";
  }
  
  &lt;script src="~/Scripts/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/jquery.unobtrusive-ajax.min.js"&gt;&lt;/script&gt;
  
  &lt;h2&gt;Index&lt;/h2&gt;
  
  &lt;p&gt;
  @Ajax.ActionLink("Add New", "Create", new AjaxOptions()
     {
      HttpMethod = "GET",
      UpdateTargetId = "info",
      InsertionMode = InsertionMode.Replace   
     })
  &lt;/p&gt;
  &lt;div id="main"&gt;
  &lt;table&gt;
  &lt;tr&gt;
      &lt;th&gt;
          @Html.DisplayNameFor(model =&gt; model.name)
      &lt;/th&gt;
      &lt;th&gt;Action&lt;/th&gt;
  &lt;/tr&gt;
  
  @foreach (var item in Model) {
  &lt;tr&gt;
      &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.name)
      &lt;/td&gt;
      &lt;td&gt;
          @Ajax.ActionLink("Details", "Details", new{ id=item.id}, new AjaxOptions()
     {
      HttpMethod = "GET",
      UpdateTargetId = "info",
      InsertionMode = InsertionMode.Replace   
     })
      &lt;/td&gt;
  &lt;/tr&gt;
  }
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;div id="info"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><code>Create</code> View Page</p>
  
  <pre><code>@model CrudMvc.Models.myTable
  
  @{
  ViewBag.Title = "Create";
  Layout = "~/Views/Shared/_Layout.cshtml";
  }
  
  &lt;h2&gt;Create&lt;/h2&gt;
  
  @using (Html.BeginForm()) {
  @Html.ValidationSummary(true)
  
  &lt;fieldset&gt;
      &lt;legend&gt;myTable&lt;/legend&gt;
  
      &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.id)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.EditorFor(model =&gt; model.id)
          @Html.ValidationMessageFor(model =&gt; model.id)
      &lt;/div&gt;
  
      &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.name)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.EditorFor(model =&gt; model.name)
          @Html.ValidationMessageFor(model =&gt; model.name)
      &lt;/div&gt;
      &lt;p&gt;
          &lt;input type="submit" value="Create" /&gt;
      &lt;/p&gt;
  &lt;/fieldset&gt;
  }
  
  &lt;script&gt;
  var form = $('#main');
  $.ajax({
      cache: false,
      async: true,
      type: "POST",
      url: form.attr('action'),
      data: form.serialize(),
      success: function (data) {
          alert(data);
      }
  });
  &lt;/script&gt;
  
  &lt;div&gt;
  @Html.ActionLink("Back to List", "Index")
  &lt;/div&gt;
  
  @section Scripts {
  @Scripts.Render("~/bundles/jqueryval")
  }
  </code></pre>