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

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.

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>

Besides the previous post instructions, I had to install the package Microsoft.jQuery.Unobtrusive.Ajax and add to the view the following line

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