我正在尝试在我的网站上添加一个表单，因此当用户单击该按钮时，它应该会在下面显示一条小消息作为loadingElementId。另外，确认不起作用，我不知道为什么。我正在使用 Chrome 浏览器。
代码如下:
@model HaveYouSeenMe.Models.MessageModel
@{
ViewBag.Title = "Send";
}
<div id="messageForm">
<h2>Send Message</h2>
@using (Ajax.BeginForm(new AjaxOptions
{
Confirm = "Are you sure?",
HttpMethod = "Post",
InsertionMode = InsertionMode.Replace,
LoadingElementId = "loading",
UpdateTargetId = "messageForm"
}))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<legend>Message Model</legend>
<div class="editor-label">
@Html.LabelFor(model => model.From)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.From)
@Html.ValidationMessageFor(model => model.From)
</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>
<div class="editor-label">
@Html.LabelFor(model => model.Subject)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Subject)
@Html.ValidationMessageFor(model => model.Subject)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Message)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Message)
@Html.ValidationMessageFor(model => model.Message)
</div>
<p>
<input type="submit" value="Send Message" />
</p>
</fieldset>
}
</div>
<div id="loading" style="display: none">
Sending message...
</div>
@section Scripts{
@Scripts.Render("~/bundles/jqueryval")
}
最佳答案
具体操作方法如下:
Controller :
public class MessageModel
{
public string From { get; set; }
public string Email { get; set; }
public string Subject { get; set; }
public string Message { get; set; }
}
public class HomeController : Controller
{
[HttpPost]
public string ProcessForm(MessageModel messageModel)
{
Thread.Sleep(15000);
return "<h2>Customer updated successfully!</h2>";
}
public ActionResult Index20()
{
MessageModel messageModel = new MessageModel { Email = "email", From = "from", Message = "message", Subject = "subject" };
return View(messageModel);
}
查看:
@model Testy20161006.Controllers.MessageModel
@{
ViewBag.Title = "Send";
}
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index20</title>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript">
function OnBegin() {
$("#divMsg").append("<h3>Beginning Ajax request.</h3>");
}
function OnComplete() {
$("#divMsg").append("<h3>Completing Ajax request.</h3>");
}
function OnSuccess() {
$("#divMsg").append("<h3>Ajax request successful.</h3>");
}
function OnFailure() {
$("#divMsg").append("<h3>Ajax request failed.</h3>");
}
$(function () {
$("#divProgress").css("display","none");
})
</script>
</head>
<body>
<div id="messageForm">
<h2>Send Message</h2>
@{AjaxOptions options = new AjaxOptions();
options.HttpMethod = "POST";
options.Confirm = "Do you wish to submit this form?";
options.OnBegin = "OnBegin";
options.OnComplete = "OnComplete";
options.OnFailure = "OnFailure";
options.OnSuccess = "OnSuccess";
options.LoadingElementId = "divProgress";
options.LoadingElementDuration = 1000;
options.UpdateTargetId = "divResponse";
options.InsertionMode = InsertionMode.InsertAfter;
}
@using (Ajax.BeginForm("ProcessForm", "Home", options))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<legend>Message Model</legend>
<div class="editor-label">
@Html.LabelFor(model => model.From)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.From)
@Html.ValidationMessageFor(model => model.From)
</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>
<div class="editor-label">
@Html.LabelFor(model => model.Subject)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Subject)
@Html.ValidationMessageFor(model => model.Subject)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Message)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Message)
@Html.ValidationMessageFor(model => model.Message)
</div>
<p>
<input type="submit" value="Send Message" />
</p>
</fieldset>
}
</div>
<br />
<br />
<div id="divProgress">
@*<img src='<%= Url.Content("~/images/ProgressCircle.gif") %>' />*@
<img src="~/Images/untitled.png" />
</div>
<div id="divResponse"></div>
<div id="divMsg"></div>
@*<img id="loading" src="~/Images/untitled.png" style="display: none" />*@
</body>
</html>
信用归http://www.codeguru.com/csharp/.net/working-with-ajax-helper-in-asp.net-mvc.htm
关于javascript - 为什么 Ajax.BeginForm 无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42119207/