我有一个使用按钮触发的模态 按钮
<button class="btn btn-primary" type="button" id="issueBookBtn" data-toggle="modal" data-target="#issueBookModal">Issue Book</button>
模态
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header bg-theme03">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title text-center">Issue Book</h4>
</div>
<div class="modal-body">
@using (Html.BeginForm("IssueBookToMember", "Library", new { libraryid = LibraryId }, FormMethod.Post, null))
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
<div class="form-group">
@if (ViewBag.Success != null)
{
<div class="col-md-offset-2 col-md-8 text-center successMessageDiv" id="successDiv">
<label id="settingSuccessMessageId"> @ViewBag.Success</label>
</div>
}
@if (ViewBag.Error != null)
{
<div class="col-md-offset-2 col-md-8 text-center errorMessageDiv" id="errorDiv">
<label id="settingSuccessMessageId"> @ViewBag.Error</label>
</div>
}
</div>
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
<div class="container-fluid">
<div class="row bg-info" style="padding:20px; margin:20px">
<div class="form-horizontal col-sm-6" style="padding:20px">
<div class="form-group ">
@Html.LabelFor(model => model.ISBN, htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-9">
@Html.EditorFor(model => model.ISBN, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.ISBN, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group ">
@Html.Label("Book Name", htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-9">
<input type="text" id="BookNameId" readonly class="form-control">
</div>
</div>
<div class="form-group ">
@Html.Label("ISBNs", htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-9">
<input type="text" id="ISBNId" readonly class="form-control">
</div>
</div>
<div class="form-group ">
@Html.Label("Authors", htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-9">
<input type="text" id="AuthorsId" readonly class="form-control">
</div>
</div>
</div>
<div class="form-horizontal col-sm-6 verticalLine" style="padding:20px">
<div class="form-group">
@Html.LabelFor(model => model.memberUserName, htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-9">
@Html.EditorFor(model => model.memberUserName, new { htmlAttributes = new { @class = "form-control", @placeholder = "Search member by Username" } })
@Html.ValidationMessageFor(model => model.memberUserName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group ">
@Html.Label("Name", htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-9">
<input type="text" id="NameId" readonly class="form-control">
</div>
</div>
<div class="form-group ">
@Html.Label("Email ID", htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-9">
<input type="text" id="EmailId" readonly class="form-control">
</div>
</div>
<div class="form-group ">
@Html.Label("Contact No", htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-9">
<input type="text" id="ContactId" readonly class="form-control">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.IssueDate, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.IssueDate, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.IssueDate, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.ReturnDate, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.ReturnDate, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.ReturnDate, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
</div>
<div class="modal-footer">
<input type="button" id="verifyISBNBtn" value="Verify Book By ISBN" class="btn btn-warning pull-left" />
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
POST操作方法
[HttpPost]
public ActionResult IssueBookToMember(Guid libraryId, LibraryBookIssueForm form)
{
if (ModelState.IsValid)
{
using (DBContext dBContext = new DBContext())
{
//check Book is present in library
var checkbook = DBContext.Books.Any(f => f.Book_ISBN == form.ISBN || f.Book_ISBN13 == form.ISBN);
if (checkbook)
{
//Code to issue book to member
//Code ends
ViewBag.Success = "Book was successfully issued.";
ModelState.Clear();
form = new LibraryBookIssueForm();
return View();
}
else
{
//Don't have permission
ViewBag.Error = "Book does not exists.";
ModelState.Clear();
form = new LibraryBookIssueForm();
return View(form);
}
}
}
else
{
ViewBag.Error = "Please provide valid information";
return View(form);
}
}
问题 当我在modal中发布表单时，它会点击动作方法，并且除了页面重新加载并且消息没有显示在我使用ViewBag（ViewBag.Success或ViewBag.Error）传递的模态中时，所有内容都正常工作因为模态必须触发才能使其可见。
有没有办法实现它，或者我必须使用Ajax表单提交。 任何建议