如何在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>
