Làm thế nào để sử dụng Simple Ajax Beginform trong Asp.net MVC 4?

Question

Tôi mới trong Asp.net MVC và tôi đã nghiên cứu về Ajax.BeginForm nhưng khi tôi áp dụng mã, nó không hoạt động. Bạn có thể chia sẻ ví dụ rất đơn giản với Ajax.Beginform với Chế độ xem, Bộ điều khiển, Mô hình không? Cảm ơn.

Answer 1

Ví dụ đơn giản: Biểu mẫu có hộp văn bản và nút Tìm kiếm.

Nếu bạn viết "tên" vào số textbox và gửi biểu mẫu, nó sẽ mang đến cho bạn bệnh nhân có "tên" trong bảng.

Xem:

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

Và cũng như TSmith nói trong ý kiến, đừng quên để cài đặt jQuery Không phô trương Ajax thư viện thông qua NuGet.

Answer 2

Bên cạnh những bài hướng dẫn trước đó, tôi đã phải cài đặt gói Microsoft.jQuery.Unobtrusive.Ajax và thêm vào xem dòng sau

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

Answer 3

Tất cả này làm việc :)

Mẫu

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

Bộ điều khiển

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

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

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