如何在Asp.net MVC 4中使用简单的Ajax Beginform?

我是新的Asp.net MVC和我研究了Ajax.BeginForm但是当我应用代码它没有工作。 你可以用View,Controller,Model和Ajax.Beginform分享一个非常简单的例子吗? 谢谢。

简单的例子:与文本框和searchbutton的forms。

如果您在textboxinput“姓名”并提交表格,表格中会显示“姓名”。

视图:

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

正如TSmith在评论中所说,不要忘记通过NuGet安装jQuery Unobtrusive Ajax库。

所有这些工作:)

模型

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

调节器

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

查看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> 

查看_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> 

除了以前的发布说明,我不得不安装包Microsoft.jQuery.Unobtrusive.Ajax并添加到视图下面的行

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