Jak korzystać z Simple Ajax Beginform w Asp.net MVC 4?

Question

Jestem nowy w Asp.net MVC i szukałem informacji o Ajax.BeginForm, ale kiedy stosowałem kody, to nie działało. Czy możesz udostępnić bardzo prosty przykład z Ajax.Beginform za pomocą View, Controller, Model? Dzięki.

Answer 1

Prosty przykład: Formularz z polem tekstowym i przyciskiem Szukaj.

Jeśli napiszesz "imię" w formularzu textbox i prześlij, przyniesie Ci pacjentów z "name" w tabeli.

Widok:

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

a także jako TSmith powiedział w komentarzach, Nie zapomnij zainstalować jQuery Dyskretna Ajax biblioteki poprzez NuGet.

Answer 2

Poza poprzednich instrukcji pocztowych, musiałem zainstalować pakiet Microsoft.jQuery.Unobtrusive.Ajax i dodać do widoku następującą linię

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

Answer 3

cała ta praca :)

model

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

Kontroler

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

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

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