Question

我正在尝试从局部视图中生成的模式提交表单。而且我不知道如何取回提交的表格。

以下是观点：

@model Myproject.ViewModels.GetMonitorFromDeviceViewModel
@{
    ViewBag.Title = "GetMonitorFromDevice";
    Layout = "~/Views/Shared/ManagementPage.cshtml";
}

<div id="Accordion">
    @{
        foreach (var type in Model.AvailableTypesAvailableMonitors)
        {
            <div class="card">
                <div class="card-header">
                    <a class="card-link" data-toggle="collapse" data-parent="#accordion" href="#@type">
                        @type
                    </a>
                </div>
                <div id="@type" class="collapse show">
                    <div class="card-body">
                        @{
                            foreach (var monitor in Model.ActiveMonitors)
                            {
                                if (monitor.Type == @type)
                                {
                                    <p>
                                        @monitor.Name
                                        <span class="btn btn-xs btn-primary btnEdit" onclick="createModal('@Url.Action("NameMonitor", "DeviceManager" , new { idDevice = monitor.DeviceOwner.ID, monitorName = monitor.Name })')">Details</span>
                                    </p>
                                }
                            }
                        }
                    </div>
                </div>
            </div>
        }
    }
</div>

这是我在页面底部的模态：

<div class="modal fade" id="myModal" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content" id="modelContent">
        </div>
    </div>
</div>

<script>
    function createModal(url) {
        $('#modelContent').load(url);
        $('#myModal').modal('show');
    }
</script>

最后，这是我的部分视图，显示为模态：

@model MyProject.ViewModels.NameMonitorModal
@using (Html.BeginForm("NameMonitor", "DeviceManager", FormMethod.Post))
{
    <div class="modal-body">
        <div class="form-group">
            @Html.LabelFor(model => model.NewName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.NewName, new { htmlAttributes = new { @class = "form-control", @Value = Model.TrueName } })
                @Html.ValidationMessageFor(model => model.NewName, "", new { @class = "text-danger" })
            </div>
        </div>

        @Html.HiddenFor(model => model.TrueName)
        @Html.HiddenFor(model => model.IdDevice)

    </div>
    <div class="modal-footer">
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save name" class="btn btn-default" data-dismiss="modal" />
            </div>
        </div>
    </div>
}

在我的控制器中，我有一个名为ActionResult NameMonitor的部分视图的动作为了捕获提交的表单，我尝试使用[HttpPost]标记添加另一个具有相同名称但不起作用的操作。我还尝试使用[HttpPost]标签的主页面操作，但它也不起作用。正如您所看到的，我已经在表单中指定了操作和控制器，但它仍然无法正常工作现在，我有点不知道如何从我的模态中获取信息。

Answer 1

data-dismiss="modal"会在不提交表单的情况下关闭模式，请参阅Dismiss and submit form Bootstrap 3

您可以更改提交按钮以调用JavaScript函数来提交表单，然后关闭模式。

function submitModal() {
    $('#myFormId').submit();
    $('#myModal').modal('hide');
}

从局部视图提交表单

1 个答案: