How to use Simple Ajax Beginform in Asp.net MVC 4? [closed]

Question

I am new in Asp.net MVC and i researched about Ajax.BeginForm but when i apply codes it did not work. Can you share very simple example with Ajax.Beginform with View, Controller, Model? Thanks.

Answer 1

Simple example: Form with textbox and Search button.

If you write "name" into the textbox and submit form, it will brings you patients with "name" in table.

View:

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

And also as TSmith said in comments, don´t forget to install jQuery Unobtrusive Ajax library through NuGet.

Answer 2

All This Work :)

Model

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

Controller

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

View 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> 

View _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>