onsuccess oncomplete net mvc beginform asp ajax asp.net-mvc form-helpers ajax.beginform

oncomplete - ¿Cómo usar Simple Ajax Beginform en Asp.net MVC 4?



crud ajax asp net mvc (3)

Además de las instrucciones de la publicación anterior, tuve que instalar el paquete Microsoft.jQuery.Unobtrusive.Ajax y agregar a la vista la siguiente línea

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

Soy nuevo en Asp.net MVC e investigué sobre Ajax.BeginForm pero cuando aplico códigos no funcionó. ¿Puedes compartir un ejemplo muy simple con Ajax.Beginform con View, Controller, Model? Gracias.


Ejemplo simple: formulario con cuadro de texto y botón Buscar.

Si escribe "nombre" en el textbox y envía el formulario, le mostrará pacientes con "nombre" en la tabla.

Ver:

@using (Ajax.BeginForm("GetPatients", "Patient", new AjaxOptions {//GetPatients is name of method in PatientController InsertionMode = InsertionMode.Replace, //target element(#patientList) will be replaced UpdateTargetId = "patientList", LoadingElementId = "loader" // div with .gif loader - that is shown when data are loading })) { string patient_Name = ""; @Html.EditorFor(x=>patient_Name) //text box with name and id, that it will pass to controller <input type="submit" value="Search" /> } @* ... *@ <div id="loader" class=" aletr" style="display:none"> Loading...<img src="~/Images/ajax-loader.gif" /> </div> @Html.Partial("_patientList") @* this is view with patient table. Same view you will return from controller *@

_patientList.cshtml:

@model IEnumerable<YourApp.Models.Patient> <table id="patientList" > <tr> <th> @Html.DisplayNameFor(model => model.Name) </th> <th> @Html.DisplayNameFor(model => model.Number) </th> </tr> @foreach (var patient in Model) { <tr> <td> @Html.DisplayFor(modelItem => patient.Name) </td> <td> @Html.DisplayFor(modelItem => patient.Number) </td> </tr> } </table>

Patient.cs

public class Patient { public string Name { get; set; } public int Number{ get; set; } }

PatientController.cs

public PartialViewResult GetPatients(string patient_Name="") { var patients = yourDBcontext.Patients.Where(x=>x.Name.Contains(patient_Name)) return PartialView("_patientList", patients); }

Y también, como dijo TSmith en los comentarios, no olvides instalar la biblioteca jQuery Unobtrusive Ajax a través de NuGet .


Todo este trabajo :)

Modelo

public partial class ClientMessage { public int IdCon { get; set; } public string Name { get; set; } public string Email { get; set; } }

Controlador

public class TestAjaxBeginFormController : Controller{ projectNameEntities db = new projectNameEntities(); public ActionResult Index(){ return View(); } [HttpPost] public ActionResult GetClientMessages(ClientMessage Vm) { var model = db.ClientMessages.Where(x => x.Name.Contains(Vm.Name)); return PartialView("_PartialView", model); } }

Ver index.cshtml

@model projectName.Models.ClientMessage @{ Layout = null; } <script src="~/Scripts/jquery-1.9.1.js"></script> <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> <script> ///////// JS retrun message SucccessPost or FailPost function SuccessMessage() { alert("Succcess Post"); } function FailMessage() { alert("Fail Post"); } </script> <h1>Page Index</h1> @using (Ajax.BeginForm("GetClientMessages", "TestAjaxBeginForm", null , new AjaxOptions { HttpMethod = "POST", OnSuccess = "SuccessMessage", OnFailure = "FailMessage" , UpdateTargetId = "resultTarget" }, new { id = "MyNewNameId" })) // set new Id name for Form { @Html.AntiForgeryToken() @Html.EditorFor(x => x.Name) <input type="submit" value="Search" /> } <div id="resultTarget"> </div>

Ver _PartialView.cshtml

@model IEnumerable<projectName.Models.ClientMessage > <table> @foreach (var item in Model) { <tr> <td>@Html.DisplayFor(modelItem => item.IdCon)</td> <td>@Html.DisplayFor(modelItem => item.Name)</td> <td>@Html.DisplayFor(modelItem => item.Email)</td> </tr> } </table>