在将数据输入保存到我的创建和编辑视图之前，我想打开一个 Bootstrap 模式表单，让用户再次输入他们的用户名和密码，以确认提交的数据以及选择数据的原因从下拉列表中输入。我已经使用三个输入字段“用户名”、“密码”和“原因”设置了模态 div，但不确定如何从那里进行处理。单击模态框上的“保存”按钮时，我需要返回控制器并检索输入到模态表单中的值，以及在模态视图下的视图中输入到“创建/编辑”表单中的值。有什么想法吗？
【问题讨论】：
标签： twitter-bootstrap modal-dialog asp.net-mvc-5
其实很简单。
$("form").on("submit", function (e) {
e.preventDefault();
// Show your modal
$("#myModal").modal("show");
});
这应该会有所帮助：
// This handled the modal close event.
$("#myModal").on("hidden.bs.modal", function() {
// Remove the submit function from the form.
$("form").off("submit");
// Retrieve value from your input by id
var firstValue = $("#InputId").val();
// Retrieve value from your input by name
var secondValue = $("input[name=InputName]").val();
// Attach new value to the form
$("<input type='hidden' name='firt-input' value='" + firstValue + "' />")
.appendTo($("form"));
// Attach other value to the form
$("<input type='hidden' name='second-input' value='" + secondValue + "' />")
.appendTo($("form"));
// Finally, submit the form.
// I'd rather use ajax here, but to make things simple, just submit your form.
$("form").submit();
});
您可以创建一个新模型、创建一个 Wrapper 模型或只获取额外的参数，例如：
public ActionResult Index(MyModel model, string username, string password)
{
// Validate user/pass
}
另一种选择是创建一个包装模型，例如：
public class Wrapper<T>
{
public T Model { get; set; }
public string Username { get; set; }
public string Password { get; set; }
}
public ActionResult Index(Wrapper<MyModel> model)
{
// Validate user/pass
}
【讨论】：
我已经使用 VS2013 和一个新的 Asp.Net MVC 应用程序测试了这段代码。这可以使用具有两个属性的 CustomViewModel 类来实现。
第 1 步
创建一个 CustomViewModel 类
public class PersonViewModel
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string MiddleName { get; set; }
}
public class CustomViewModel
{
public PersonViewModel Person { get; set; }
public LoginViewModel LoginInfo { get; set; }
}
我正在使用 PersonViewModel 来收集 Create Form 中的 Person 信息。 CustomViewModel 包含 LoginInfo，它不过是 AccountViewModels.cs 类中的 LoginViewModel 类。
第 2 步
创建一个 Create 方法并使用接受 CustomViewModel 的 HttpPost 属性创建方法。
public ActionResult Create()
{
return View();
}
[HttpPost]
public ActionResult Create(CustomViewModel viewModel)
{
return View("Index");
}
第 3 步
创建一个Create.cshtml 视图并将其强类型化为@model CustomViewModel。将 loginViewModel 内容放入模态对话框 div 并将附加表单视图放入另一个并将所有内容放入 @Html.BeginForm()。
@model ModalDialogTest.Models.CustomViewModel
@{
ViewBag.Title = "Create";
}
<h2>Create</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>CustomViewModel</h4>
<hr />
@Html.ValidationSummary(true)
<div class="form-group">
<div>
@Html.LabelFor(m => m.Person.FirstName, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.EditorFor(m => m.Person.FirstName)
</div>
</div>
</div>
<div class="form-group">
<div>
@Html.LabelFor(m => m.Person.LastName, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.EditorFor(m => m.Person.LastName)
</div>
</div>
</div>
<div class="form-group">
@*Triggers Modal Dialog*@
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
@Html.LabelFor(m => m.LoginInfo.UserName, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.LoginInfo.UserName, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.LoginInfo.UserName)
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.LoginInfo.Password, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.PasswordFor(m => m.LoginInfo.Password, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.LoginInfo.Password)
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
@*Finally submits information to the Controller*@
<input type="submit" value="Save Changes" class="btn btn-default" />
</div>
</div>
</div>
</div>
</div>
</div>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
点击模态对话框上的保存更改按钮后，您可以在控制器中执行其他逻辑。您还需要注意一些额外的事情，例如如何处理验证等小问题，以及如果您在多个视图上执行此操作，那么逻辑可能会略有变化。
【讨论】：