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

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  } @* ... *@  @Html.Partial("_patientList") @* this is view with patient table. Same view you will return from controller *@ 

_patientList.cshtml:

 @model IEnumerable  @foreach (var patient in Model) {  } 
@Html.DisplayNameFor(model => model.Name) @Html.DisplayNameFor(model => model.Number)
@Html.DisplayFor(modelItem => patient.Name) @Html.DisplayFor(modelItem => patient.Number)

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

Page Index

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

Ver _PartialView.cshtml

 @model IEnumerable  @foreach (var item in Model) {  } 
@Html.DisplayFor(modelItem => item.IdCon) @Html.DisplayFor(modelItem => item.Name) @Html.DisplayFor(modelItem => item.Email)

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