Question

在将数据输入保存到我的创建和编辑视图之前，我想打开一个Bootstrap模式表单，让用户再次输入用户名和密码，以确认提交的数据以及选择原因。从下拉列表输入的数据。我已经使用三个输入字段设置了模态div＆＃39;用户名＆＃39;，＆＃39;密码＆＃39;和＆＃39;原因＆＃39;，但不知道如何从那里开始处理。单击模态上的“保存”按钮时，我需要返回到控制器，不仅要检索输入到模态窗体中的值，还要检索在模态下视图中输入到“创建/编辑”窗体中的值。有什么想法吗？

Answer 1

实际上这很简单。

1。捕获表单提交操作并显示模式对话框

$("form").on("submit", function (e) {
    e.preventDefault();

    // Show your modal
    $("#myModal").modal("show");
});

2。在模态关闭，解析值和提交表单

这应该有所帮助：

// 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();

});

3。改变你的行动

您可以创建新模型，创建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
}

Answer 2

我已经使用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方法和Create Method with HttpPost属性，该属性接受CustomViewModel。

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">&times;</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")
}

按下Modal对话框上的Save Changes按钮后，您可以在Controller中执行其他逻辑操作。还有其他一些事情需要注意，比如你将如何处理小问题，如验证，如果你在多个视图上进行，那么逻辑可能会略有改变。

如何从Bootstrap模式窗体获取值以用于MVC控制器

2 个答案:

1。捕获表单提交操作并显示模式对话框

2。在模态关闭，解析值和提交表单

3。改变你的行动