Wie verwende ich Simple Ajax Beginform in Asp.net MVC 4?

Question

Ich bin neu in Asp.net MVC und ich recherchiert über Ajax.BeginForm, aber wenn ich Codes anwenden, hat es nicht funktioniert. Kannst du ein sehr einfaches Beispiel mit Ajax.Beginform mit View, Controller, Model teilen? Danke.

Answer 1

Einfaches Beispiel: Formular mit Textfeld und Suchschaltfläche.

Wenn Sie "Name" in die textbox schreiben und Formular absenden, bringt es Ihnen Patienten mit "Name" in die Tabelle.

Ausblick:

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

Und auch als tsmith sagte in den Kommentaren, vergessen Sie nicht jQuery Unauffällig Ajax Bibliothek durch NuGet zu installieren.

Answer 2

Neben den früheren Post Anweisungen, hatte ich das Paket Microsoft.jQuery.Unobtrusive.Ajax und fügen Sie zu der Ansicht, die folgende Zeile

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

Answer 3

All diese Arbeit :)

Modell

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

installieren

Steuerung

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

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

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