如何在ASP.NET MVC的弹出窗口中创建一个空表单？

Question

我在asp.net mvc中建立了一个表单（左侧是我构建的表单，右侧是我要添加的表单）：

我希望“发送测试电子邮件”按钮启动一个具有空白表格的弹出窗口。 一个文本框用于输入收件人的电子邮件，另一个文本框用于输入发件人的电子邮件，以及一个用于发送电子邮件的按钮。 现在，此弹出式窗口需要从启动它的主要表单中收集一些字段：Subject和Body（屏幕快照中未显示的body）。 我怎样才能做到这一点？ 我不会提前知道这两个电子邮件地址，因此它们在模型对象中将不存在。 到目前为止，这是我的一些代码（在名为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

我想到了。 我必须进行一些更改：

1. 将我的模式div移到包含页面形式的外部
2. 单击按钮时显示模式div（根据Stephen Muecke的评论）
3. 将包含单击测试电子邮件按钮时的提交javascript代码从包含的页面移到部分视图页面。
4. 将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;
}