如何在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;
}