首页 文章

从局部视图提交表单

提问于
浏览
1

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

这是观点:

@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]标记的另一个操作,但是也没有't work. I also tried to use the main page action with the [HttpPost] tag but it doesn'工作 . 正如您所看到的,我已经在表单中指定了操作和控制器,但它仍然无法正常工作 .
现在,我有点不知道如何从我的模态中获取信息 .

1 回答

  • 1

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

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

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

相关问题