How to use Simple Ajax Beginform in Asp net MVC 4

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

User · Answer

Besides the previous post instructions  I had to install the package Microsoft jQuery Unobtrusive Ajax and add to the view the following line   lt script src   Url Content    Scripts jquery unobtrusive-ajax js    type  text javascript  gt  lt  script gt

User · Answer

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   gt  x Name Contains Vm Name                return PartialView   PartialView   model                  View index cshtml   model  projectName Models ClientMessage          Layout   null      lt script src    Scripts jquery-1 9 1 js  gt  lt  script gt   lt script src    Scripts jquery unobtrusive-ajax js  gt  lt  script gt   lt script gt                JS  retrun message SucccessPost or FailPost     function SuccessMessage             alert  Succcess Post              function FailMessage             alert  Fail Post            lt  script gt    lt h1 gt Page Index lt  h1 gt     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   gt  x Name         lt input type  submit  value  Search    gt         lt div id  resultTarget  gt    lt  div gt    View  PartialView cshtml   model  IEnumerable lt projectName Models ClientMessage  gt   lt table gt     foreach  var item in Model           lt tr gt            lt td gt  Html DisplayFor modelItem   gt  item IdCon  lt  td gt           lt td gt  Html DisplayFor modelItem   gt  item Name  lt  td gt           lt td gt  Html DisplayFor modelItem   gt  item Email  lt  td gt       lt  tr gt       lt  table gt

User · Answer

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  gt patient Name    text box with name and id  that it will pass to controller      lt input  type  submit  value  Search    gt                lt div id  loader  class   aletr  style  display none  gt      Loading    lt img src    Images ajax-loader gif    gt   lt  div gt   Html Partial   patientList      this is view with patient table  Same view you will return from controller       patientList cshtml    model IEnumerable lt YourApp Models Patient gt    lt table id  patientList   gt   lt tr gt       lt th gt           Html DisplayNameFor model   gt  model Name       lt  th gt       lt th gt           Html DisplayNameFor model   gt  model Number       lt  th gt          lt  tr gt   foreach  var patient in Model     lt tr gt       lt td gt           Html DisplayFor modelItem   gt  patient Name       lt  td gt       lt td gt           Html DisplayFor modelItem   gt  patient Number       lt  td gt   lt  tr gt     lt  table gt    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  gt 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

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

Examples related to ajax

Examples related to asp.net-mvc

Examples related to form-helpers

Examples related to ajax.beginform