如何在 asp.net mvc 中的弹出窗口中创建一个空表单？

Question

我在asp.netmvc中建了一个表单（左边是我建的，右边是我要加的）：

我希望“发送测试电子邮件”按钮启动具有空白表单的弹出窗口 window。一个文本框用于输入收件人的电子邮件，另一个文本框用于输入发件人的电子邮件，还有一个用于发送电子邮件的按钮。现在这个弹出窗口需要从启动它的主窗体中收集一些字段：主题和正文（正文未在屏幕截图中显示）。我怎样才能做到这一点？我不会提前知道这两个电子邮件地址，因此它们不会存在于模型对象中。到目前为止，这是我的一些代码（在名为 EmailTemplate.cshtml 的视图中）：

<div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" /> &nbsp;&nbsp;                    
                <button id="btnSendTestEmail">Send Test Email</button>

                <div id="SendTestEmail"></div>

            </div>
        </div>

这是用于启动弹出窗口的初始按钮以及用于将其放置在页面上的区域。这是我开始写的 javascript，但我不确定如何完成：

var url = '@Url.Action("SomeActionHere","SomeControllerHere")';

    $('#btnSendTestEmail').click(function () {
        $("#SendTestEmail").load(url);
    });

看来我必须创建一个操作方法，但我不知道为什么，因为我不需要预填充两个电子邮件文本框。而且我似乎还必须指定一个控制器，但我不知道该控制器是要预填充表单还是在提交时处理表单（单击弹出窗口上的发送测试电子邮件按钮时）我已经创建名为 EmailTestForm.cshtml:

的局部视图

@model EmailTemplateEditor.Models.TestEmail

<form id="SendTestEmail">

    Recipient Email Address: @Html.TextBox("RecipientEmail")
    Sender Email Address: @Html.TextBox("SenderEmail")
    <br/>
    <input type="submit" value="Send Test Email" class="btn btn-default" /> 

</form>

我什至为此创建了一个模型，尽管我不确定我是否需要这样做（我是 mvc 的新手，仍然感觉我经常被迫制作很多很多模型）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace EmailTemplateEditor.Models
{
    public class TestEmail
    {        
        public string RecipientEmail { get; set; }

        public string SenderEmail { get; set; }
    }
}

最终，当点击弹出窗口的发送测试电子邮件按钮时，我想从主窗体中获取 2 个电子邮件地址、正文和主题，将它们传递到一个方法中，然后我可以将它们传递到存储过程调用中.我什至在这里以正确的方式接近这个，还是我离开了？我发现一些 SO 帖子有点像这种情况，但不同之处足以让我仍然感到迷茫。

Answer 1

我明白了。我不得不做出几处改变：

将我的模式 div 移到包含页面表单的外部
单击按钮时显示模式 div（根据 Stephen Muecke 的评论）
将单击测试电子邮件按钮时的提交 javascript 代码从包含页面移动到部分视图页面。
将onclick="SubmitAction()"添加到提交按钮

这是我的最终代码（已缩短）：

EmailTemplate.cshtml（包含页面）

@model EmailTemplateEditor.Models.EmailTemplate

@{
    ViewBag.Title = "Email Template";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Email Template</h2>

@using (Html.BeginForm("Edit", "EmailTemplate", FormMethod.Post))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">        
        <hr />
        @Html.ValidationSummary(true)
        @Html.HiddenFor(model => model.ID)

            <div class="form-group">
                @Html.LabelFor(model => model.Subject, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Subject)
                    @Html.ValidationMessageFor(model => model.Subject)
                </div>
            </div>                        

            <div class="form-group" tabindex="-1">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Save" class="btn btn-default" /> &nbsp;&nbsp;
                    <a id="btnSendTestEmail">Send Test Email</a>

                    <div id="SendTestEmail"></div>

                </div>
            </div> 
    </div>
}

<div class="modal" id="SendTestEmailModal">
    <div class="modal-content">
        @Html.Partial("EmailTestForm", new EmailTemplateEditor.Models.TestEmail(Model.Body, Model.Subject))
        <span class="close">&times;</span>
    </div>
</div>

<script>

    $(document).ready(function () {                 
        var span = document.getElementsByClassName("close")[0];
        var modal = document.getElementById('SendTestEmailModal');        

        // When the user clicks on the button, open the modal 
        $('#btnSendTestEmail').click(function () {
            //$("#SendTestEmailModal").show();
            modal.style.display = "block";
        });

        // When the user clicks on <span> (x), close the modal
        span.onclick = function () {
            modal.style.display = "none";
        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }                                      
    });
</script>

这是部分视图 (EmailTestForm.cshtml)：

@model EmailTemplateEditor.Models.TestEmail

<body>

    @using (Html.BeginForm("SendTestEmail", "EmailTemplate", FormMethod.Post, new { id = "SendTestEmailForm" }))
    { 
        <table class="module">                     
            <tr>
                <td>Subject:</td>
                <td> @Html.TextBoxFor(m => m.Subject, new { id = "txtSubject" })</td>
                <td>Body:</td>
                <td>@Html.TextBoxFor(m => m.Body, new { id = "txtBody" })</td>
            </tr>
        </table>
        <br /><br />
        <input type="submit" value="Send Test Email" class="btn btn-default" onclick="SubmitAction()"/>
    }

    <script>
        $(document).ready(function () {            
            function SubmitAction() {                
                var data = $("#SendTestEmailForm").serialize();

                $.ajax({
                    type: "Post",
                    url: "@Url.Action("SendTestEmail", "EmailTemplate")",
                    data: data,
                    success: function (partialResult) {
                        $("#modal-content").html(partialResult);
                    }
                })
            }            
        });
    </script>
</body>

这里是相关的控制器函数（EmailTemplateController.cs）：

[HttpPost]
public void SendTestEmail(TestEmail model)
{   
    if (ModelState.IsValid)
    {               
        Worker.SendMCTestEmail(model.SenderEmail, model.RecipientEmail, model.SenderName, model.RecipientName, model.Subject, model.Body, model.RecipientFirstName, model.RecipientLastName);       
    }   
}

这是模式的 css（在 main.css 中）：

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100000000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #000;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

如何在 asp.net mvc 中的弹出窗口中创建一个空表单？

How do I create an empty form inside a popup in asp.net mvc?

c#

asp.net-mvc

popupwindow