如何在Asp.NETMVC4中使用简单的Ajax？

我是Asp.net MVC新手，我研究过Ajax.BeginForm，但当我应用代码时，它不起作用。你能用视图、控制器、模型与Ajax.Beginform分享一个非常简单的例子吗？

---

谢谢。

简单示例：带有文本框和搜索按钮的表单

如果您在

文本框中写入“name”并提交表单，它将为您带来表中带有“name”的患者

查看：

@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 *@

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

PatientController.cs

public class Patient
{
   public string Name { get; set; }
   public int Number{ get; set; }
}

public PartialViewResult GetPatients(string patient_Name="")
{
   var patients = yourDBcontext.Patients.Where(x=>x.Name.Contains(patient_Name))
   return PartialView("_patientList", patients);
}

同样正如TSmith在评论中所说的，不要忘记通过安装jQuery低调的Ajax库。
除了前面的帖子说明之外，我还必须安装软件包，并在视图中添加以下内容

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


所有这些工作：）

型号

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

查看索引.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>

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

@model projectName.Models.ClientMessage
@{ 
布局=空；
}
//\\\\\\\JS重新运行消息SuccessPost或FailPost
函数SuccessMessage（）{
警报（“成功公告”）；
}
函数失败消息（）{
警报（“失败公告”）；
} 
页面索引
@使用（Ajax.BeginForm（“GetClientMessages”、“TestAjaxBeginForm”），null，新的AjaxOptions
{
HttpMethod=“POST”，
OnSuccess=“成功消息”，
OnFailure=“FailMessage”，
UpdateTargetId=“resultTarget”
}，new{id=“MyNewNameId”}）//为表单设置新的id名称
{
@Html.AntiForgeryToken（）
@EditorFor（x=>x.Name）
}

查看\u PartialView.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>

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

@model IEnumerable
@foreach（模型中的变量项）{
@DisplayFor（modeleItem=>item.IdCon）
@DisplayFor（modelItem=>item.Name）
@DisplayFor（modelItem=>item.Email）
}
检查此链接：您尝试了什么？对于其他人，请不要忘记jquery.unobtrusive-ajax库。我在VS 2013中创建了一个项目，MVC5，我有Microsoft jquery unobtrusive ajax，通过NuGet，但它不起作用，它会在一个新窗口中打开：（这用于在MVC4中工作。思考？如果您添加@Html.Partial（“\u patientList”）您得到一个错误，该视图必须有关于使用
Ajax.BeginForm
！我唯一的问题是在bundleConfig.cs:中拼错了不显眼的库）谢谢，@Alamakanambra！