Question

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

我希望发送测试电子邮件按钮启动一个空白表单的弹出窗口。一个文本框用于输入收件人的电子邮件，另一个用于输入发件人的电子邮件，另一个用于发送电子邮件。现在这个弹出窗口需要从启动它的主窗体中收集几个字段：主题和正文（正文未在屏幕截图中显示）。我怎样才能做到这一点？我不会提前知道这两个电子邮件地址，因此它们不会存在于模型对象中。这是我目前为止的一些代码（在一个名为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 =＆＃34; SubmitAction（）＆＃34;提交按钮

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

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的弹出窗口中创建一个空表单？

1 个答案: