एएसएक्स का उपयोग करके एएसएक्स का उपयोग करके फॉर्म सबमिट करें। एमवीसी 4

Question

मैं एएसपीनेट सीखने की कोशिश कर रहा हूं और अब तक मैं Ajax.Actionlink और AjaxOptions() का उपयोग करके रीफ्रेश किए बिना अन्य पेज सामग्री लोड कर सकता हूं लेकिन मुझे यह पता नहीं लगा सकता कि AJAX का उपयोग कैसे करें एक फॉर्म जमा करना मैंने बहुत सारे गुगल किए लेकिन उचित समाधान नहीं मिला। यहाँ मेरी कोड,

नियंत्रक पेज हैं

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 देखें पेज

@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 पृष्ठ दृश्य

@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

यहाँ पूर्ण उदाहरण चला जाता है -

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

अभी सेवा का उपयोग 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); 
    } 

तो एक साधारण दृश्य जो 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> 

पेज गाया जाता है जब -

अब आप डेटा जब प्रवेश करने और बनाने के बटन पर क्लिक करें -

और फिर पेज स्वचालित जोड़ की संख्या के साथ अद्यतन किया जाएगा जिन्हें आप नीचे देख -