Come utilizzare Simple Ajax Beginform in Asp.net MVC 4?

Question

Sono nuovo in Asp.net MVC e ho fatto ricerche su Ajax.BeginForm ma quando ho applicato i codici non ha funzionato. Puoi condividere un esempio molto semplice con Ajax.Beginform con View, Controller, Model? Grazie.

Answer 1

Esempio semplice: modulo con casella di testo e pulsante di ricerca.

Se si scrive "nome" nel modulo textbox e si invia il modulo, verranno visualizzati i pazienti con "nome" nella tabella.

Vista:

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

E anche, come ha detto tsmith nei commenti, Non tiratevi dimenticare di installare jQuery discreto Ajax biblioteca attraverso NuGet.

Answer 2

Oltre alle istruzioni post precedente, ho dovuto installare il pacchetto Microsoft.jQuery.Unobtrusive.Ajax e aggiungere alla vista la seguente riga

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

Answer 3

tutto questo lavoro :)

Modello

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>