我正在尝试学习asp.net,到目前为止,我可以加载其他页面内容而无需使用刷新Ajax.Actionlink,AjaxOptions()但是我无法弄清楚提交表单时如何使用ajax。我做了很多谷歌搜索,但是找不到合适的解决方案。这是我的代码,
Ajax.Actionlink
AjaxOptions()
控制器页面
namespace CrudMvc.Controllers { public class HomeController : Controller { sampleDBEntities db = new sampleDBEntities(); // // GET: /Home/ public ActionResult Index() { return View(db.myTables.ToList()); } public PartialViewResult Details(int id = 0) { myTable Table = db.myTables.Find(id); return PartialView(Table); } [HttpGet] public PartialViewResult Create() { return PartialView(); } [HttpPost] public ActionResult Create(myTable table) { if (ModelState.IsValid) { db.myTables.Add(table); db.SaveChanges(); return RedirectToAction("Index"); } return View(table); } protected override void Dispose(bool disposing) { db.Dispose(); base.Dispose(disposing); } } }
Index 查看页面
Index
@model IEnumerable<CrudMvc.Models.myTable> @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <script src="~/Scripts/jquery-1.7.1.min.js"></script> <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> <h2>Index</h2> <p> @Ajax.ActionLink("Add New", "Create", new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "info", InsertionMode = InsertionMode.Replace }) </p> <div id="main"> <table> <tr> <th> @Html.DisplayNameFor(model => model.name) </th> <th>Action</th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.name) </td> <td> @Ajax.ActionLink("Details", "Details", new{ id=item.id}, new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "info", InsertionMode = InsertionMode.Replace }) </td> </tr> } </table> </div> <div id="info"></div>
Create 查看页面
Create
@model CrudMvc.Models.myTable @{ ViewBag.Title = "Create"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>Create</h2> @using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset> <legend>myTable</legend> <div class="editor-label"> @Html.LabelFor(model => model.id) </div> <div class="editor-field"> @Html.EditorFor(model => model.id) @Html.ValidationMessageFor(model => model.id) </div> <div class="editor-label"> @Html.LabelFor(model => model.name) </div> <div class="editor-field"> @Html.EditorFor(model => model.name) @Html.ValidationMessageFor(model => model.name) </div> <p> <input type="submit" value="Create" /> </p> </fieldset> } <script> var form = $('#main'); $.ajax({ cache: false, async: true, type: "POST", url: form.attr('action'), data: form.serialize(), success: function (data) { alert(data); } }); </script> <div> @Html.ActionLink("Back to List", "Index") </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") }
这里是完整的例子-
让我们创建一个简单的模型-
public class Details { public string Name { get; set; } public string Email { get; set; } }
现在,让我们创建几个动作,以使用AJAX BEGINFORM- 发出GET和POST请求
AJAX BEGINFORM
static List<Details> details = new List<Details>(); public ActionResult GetMe() { return View(); } public ActionResult SaveData(Details d) { details.Add(d); return Json(details.Count, JsonRequestBehavior.AllowGet); }
然后让我们创建一个简单的视图,它将托管Ajax.BeginForm()-
@model RamiSamples.Controllers.Details @{ ViewBag.Title = "Ajax"; } <h2>Ajax</h2> <script src="~/Scripts/jquery-1.8.2.min.js"></script> <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> @using (Ajax.BeginForm("SaveData", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "dane" })) { @Html.AntiForgeryToken() @Html.ValidationSummary(true) <fieldset> <legend>Details</legend> <div class="editor-label"> @Html.LabelFor(model => model.Name) </div> <div class="editor-field"> @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) </div> <div class="editor-label"> @Html.LabelFor(model => model.Email) </div> <div class="editor-field"> @Html.EditorFor(model => model.Email) @Html.ValidationMessageFor(model => model.Email) </div> <p> <input type="submit" value="Create" /> </p> </fieldset> } <div id="dane"> Number of Details : </div>
现在,当页面呈现时-
现在,当您输入数据并单击创建按钮时-
然后页面会自动更新,添加数量如下所示-