Wyślij formularz za pomocą AJAX w Asp.Net mvc 4

Question

Próbuję nauczyć się asp.net i do tej pory mogę załadować inną zawartość strony bez odświeżania przy użyciu Ajax.Actionlink i AjaxOptions(), ale nie mogę wymyślić, jak korzystać z ajax, gdy przesłanie formularza. Dużo googlowałem, ale nie mogłem znaleźć odpowiedniego rozwiązania. Oto moje kody,

strona Controller

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); 
    } 
} 
} 

Index Zobacz stronę

@model IEnumerable<CrudMvc.Models.myTable> 

@{ 
ViewBag.Title = "Index"; 
Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<script src="~/Scripts/jquery-1.7.1.min.js"></script> 
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> 

<h2>Index</h2> 

<p> 
@Ajax.ActionLink("Add New", "Create", new AjaxOptions() 
    { 
    HttpMethod = "GET", 
    UpdateTargetId = "info", 
    InsertionMode = InsertionMode.Replace 
    }) 
</p> 
<div id="main"> 
<table> 
<tr> 
    <th> 
     @Html.DisplayNameFor(model => model.name) 
    </th> 
    <th>Action</th> 
</tr> 

@foreach (var item in Model) { 
<tr> 
    <td> 
     @Html.DisplayFor(modelItem => item.name) 
    </td> 
    <td> 
     @Ajax.ActionLink("Details", "Details", new{ id=item.id}, new AjaxOptions() 
    { 
    HttpMethod = "GET", 
    UpdateTargetId = "info", 
    InsertionMode = InsertionMode.Replace 
    }) 
    </td> 
</tr> 
} 
</table> 
</div> 
<div id="info"></div> 

Create View Page

@model CrudMvc.Models.myTable 

@{ 
ViewBag.Title = "Create"; 
Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<h2>Create</h2> 

@using (Html.BeginForm()) { 
@Html.ValidationSummary(true) 

<fieldset> 
    <legend>myTable</legend> 

    <div class="editor-label"> 
     @Html.LabelFor(model => model.id) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.id) 
     @Html.ValidationMessageFor(model => model.id) 
    </div> 

    <div class="editor-label"> 
     @Html.LabelFor(model => model.name) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.name) 
     @Html.ValidationMessageFor(model => model.name) 
    </div> 
    <p> 
     <input type="submit" value="Create" /> 
    </p> 
</fieldset> 
} 

<script> 
var form = $('#main'); 
$.ajax({ 
    cache: false, 
    async: true, 
    type: "POST", 
    url: form.attr('action'), 
    data: form.serialize(), 
    success: function (data) { 
     alert(data); 
    } 
}); 
</script> 

<div> 
@Html.ActionLink("Back to List", "Index") 
</div> 

@section Scripts { 
@Scripts.Render("~/bundles/jqueryval") 
} 

Answer 1

tu idzie pełną przykład -

Pozwala stworzyć prosty model -

public class Details 
{ 
    public string Name { get; set; } 
    public string Email { get; set; } 
} 

Teraz pozwala utworzyć kilka działań, aby żądań GET i POST używając AJAX BEGINFORM -

static List<Details> details = new List<Details>(); 
    public ActionResult GetMe() 
    { 
     return View(); 
    } 

    public ActionResult SaveData(Details d) 
    { 
     details.Add(d); 
     return Json(details.Count, JsonRequestBehavior.AllowGet); 
    } 

Następnie pozwala stworzyć prosty widok, który będzie gościć Ajax.BeginForm() -

@model RamiSamples.Controllers.Details 

@{ 
    ViewBag.Title = "Ajax"; 
} 

<h2>Ajax</h2> 
<script src="~/Scripts/jquery-1.8.2.min.js"></script> 
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> 

@using (Ajax.BeginForm("SaveData", new AjaxOptions() 
{ 
    InsertionMode = InsertionMode.Replace, 
    UpdateTargetId = "dane" 
})) 
{ 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary(true) 

    <fieldset> 
     <legend>Details</legend> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Name) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.Name) 
      @Html.ValidationMessageFor(model => model.Name) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Email) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.Email) 
      @Html.ValidationMessageFor(model => model.Email) 
     </div> 

     <p> 
      <input type="submit" value="Create" /> 
     </p> 
    </fieldset> 
} 

<div id="dane"> 
    Number of Details : 
</div> 

teraz, gdy strona zostanie wygenerowana -

Teraz po wpisaniu danych i kliknij przycisk Create -

A następnie strona zostanie automatycznie zaktualizowana z liczbą dodatków, jak pokazano poniżej -