为什么我的表单不会显示在模式对话框中？

时间：2016-02-25 02:24:59

标签： javascript jquery asp.net-mvc twitter-bootstrap asp.net-mvc-4

我有一个网页（MVC），我正在使用jQuery在模式对话框中打开联系表单。我按照这个位置http://amitraya.blogspot.com/2012/09/modal-dialog-form-view-using-jquery.html?showComment=1456279968693#c1669084113853730370的说明进行操作。表单不是显示在模式对话框中，而是单独显示在单独的网页上。我已经评论了一些东西，改变了一些版本并获得了许多我想要的结果。我觉得有些事情可能会发生冲突。有人能告诉我为什么我的表单不会出现在我想要的模态对话框中吗？谢谢你的帮助。相关代码如下：

_Layout.cshtml：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="Clarence Benoit">
        <title>Background Sound - The Sound System Rental Company</title>
        <!-- Bootstrap Core CSS -->
        <link href="Content/themes/base/minified/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
        <!-- Custom CSS -->
        <link href="Content/backgroundsound.css" rel="stylesheet" type="text/css">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    @*@Styles.Render("~/Content/css")*@
    @*@Styles.Render("~/Content/themes/base/css")*@
    @Scripts.Render("~/bundles/modernizr")
</head>


<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Background Sound</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#about">About</a></li>
                <li><a href="#packages">Packages</a></li>
                <li><a href="#gallery">Gallery</a></li>
                <li><a href="#contact">Contact</a></li>
                <li><a href="#credit">Credit</a></li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>
<!-- Full Width Image Header -->
<header class="header-image">
    <div class="headline">
        <div class="container">
            <h1>Background Sound</h1>
            <h2>Will Rock Your World</h2>
        </div>
    </div>
</header>
<!-- Page Content -->
<div class="container">
    @RenderBody()
    <!-- Footer -->
    <footer>
        <div class="row">
            <div class="col-lg-12 text-center">
                <p>Copyright &copy; 2016 Background Sound.&nbsp;&nbsp;All Rights Reserved.</p>
            </div>
        </div>
    </footer>
</div>
<!-- /.container -->
@*@Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/jqueryval")*@
@RenderSection("scripts", required: false)

<!-- jQuery -->
<script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

<!-- Bootstrap Core JavaScript -->
<script src="@Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>

<script type="text/javascript">
    $.ajaxSetup({ cache: false });

    $(document).ready(function () {
        $(".openDialog").live("click", function (e) {
            e.preventDefault();
            $("<div></div>").addClass("dialog").att("id", $(this).attr("data-dialog-id")).appendTo("body").dialog({ title: $(this).attr("data-dialog-title"), close: function () { $(this).remove() }, modal: true }).load(this.href);
        });

        $(".close").live("click", function (e) {
            e.preventDefault();
            var senderName = $("#senderName").val();
            var senderEmail = $("#senderEmail").val();
            var message = $("#message").text();

            $.ajax({
                type: "POST",
                url: "Home/SendEmail",
                data: { "senderName": senderName, "senderEmail": senderEmail, "message": message },
                success: function (data) {
                    alert("Your email was successfully sent.");
                    $(this).closest(".dialog").dialog("close");
                },
                error: function (data) {
                    alert("There was an error sending your email.  Please try again or contact system administrator.");
                    $(this).closest(".dialog").dialog("close");
                }
            })
        });
    });
</script>

Index.cshtml： （ActionLink就是打开模态对话框的那个）

<div class="featurette" id="contact">
    <img class="featurette-image img-circle img-responsive pull-left" src="Images/contactus.gif" height="500" width="500">
    <h2 class="featurette-heading">
            Contact Us
            <span class="text-muted"></span>
        </h2>
        <p class="lead text-center">
            <br /><br />You can contact us by calling 816.529.9986 or<br />clicking @Html.ActionLink("here", "SendEmail", "Home", null, new {@class="openDialog", data_dialog_id="sendEmail", data_dialog_title="Contact Us"}) to send an email.
        </p>
    </div>
    <hr class="featurette-divider">

（下面的div位于视图的底部，加载局部视图的位置）

<div id="emailForm"></div>

SendEmail.cshtml（局部视图）：

@model BackgroundSoundBiz.Models.EmailModel

<form id="sendEmailForm">
    <div id="sendForm">
        @Html.LabelFor(m => m.senderName)<br />
        @Html.TextBoxFor(m => m.senderName)
        <br />
        @Html.LabelFor(m => m.senderEmail)<br />
        @Html.TextBoxFor(m => m.senderEmail)
        <br />
        @Html.LabelFor(m => m.message)<br />
        @Html.TextAreaFor(m => m.message)
        <br />
        <input class="close" name="submit" type="submit" value="Submit" />
    </div>
</form>

EmailModel.cs：

public class EmailModel
    {
        [Required]
        [Display(Name = "Name")]
        public string senderName { get; set; }

        [Required]
        [Display(Name = "Email")]
        public string senderEmail { get; set; }

        [Required]
        [Display(Name = "Message")]
        public string message { get; set; }
    }
HomeController.cs中的

SendEmail方法：

public ActionResult SendEmail()
        {
            return PartialView("SendEmail", new EmailModel());
        }

呈现页面：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="Clarence Benoit">
        <title>Background Sound - The Sound System Rental Company</title>
        <!-- Bootstrap Core CSS -->
        <link href="Content/themes/base/minified/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
        <!-- Custom CSS -->
        <link href="Content/backgroundsound.css" rel="stylesheet" type="text/css">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->




        <script src="/Scripts/modernizr-2.6.2.js"></script>

    </head>
<body>

    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Background Sound</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#about">About</a></li>
                    <li><a href="#packages">Packages</a></li>
                    <li><a href="#gallery">Gallery</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#credit">Credit</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
    <!-- Full Width Image Header -->
    <header class="header-image">
        <div class="headline">
            <div class="container">
                <h1>Background Sound</h1>
                <h2>Will Rock Your World</h2>
            </div>
        </div>
    </header>
    <!-- Page Content -->
    <div class="container">


<hr class="featurette-divider">
<!-- First Featurette -->
<div class="featurette" id="about">
    <img class="featurette-image img-circle img-responsive pull-right" src="Images/aboutus.jpg" height="500" width="500">
    <h2 class="featurette-heading">
        About Us
        <span class="text-muted"></span>
    </h2>
    <p class="lead">
        Background Sound is a new innovative and inexpensive way to get the professional sound system you need for you events and parties at a fraction of the cost.&nbsp;&nbsp;Here's how it works!&nbsp;&nbsp;
        You provide you own music by laptop, iPod, or tablet and we do the rest.&nbsp;&nbsp;We'll provide you with a high quality professional sound system, which can consist of brands such as JBL, QSC,
        Electro-Voice (EV), Crown, Mackie, and Sure.&nbsp;&nbsp;Lighting and wedding uplighting is also available.&nbsp;&nbsp;We deliver, setup, and take down all equipment.&nbsp;&nbsp;We do have DJs available
        if you desire.&nbsp;&nbsp;A sound technician remains at your event operating the sound system and lighting portion of you event assuring you the highest sound quality available making sure your event
        is a night to remember while you DJ your party your way with your own style of music.
    </p>
</div>
<hr class="featurette-divider">

<!-- Third Featurette -->
<div class="featurette" id="packages">
    <img class="featurette-image img-circle img-responsive pull-left" src="http://placehold.it/500x500">
    <h2 class="featurette-heading">
        Packages
        <span class="text-muted"></span>
    </h2>
    <p class="lead text-center">
        <span style="display:block;">Wedding - $350.00</span><br />
        2 - 15" two-way speakers • 2 speaker tripod stands • 2 speaker stand decorative white skrims • 1 table (4 ft) with decorative white or black skrim cover • 1 corded mic with 25 ft cable
    </p>
    <p class="lead">
        <span class="text-center" style="display:block;">Upgrades</span><br />
        <span class="pull-left">Wireless Mic</span><span class="pull-right">$40.00</span><br />
        <span class="pull-left">Party Lights</span><span class="pull-right">$75.00</span><br />
        <span class="pull-left">Subs</span><span class="pull-right">$100.00</span><br />
        <span class="pull-left">Dinner Lighting (Uplights)</span><span class="pull-right">$20.00/light</span><br />
        <span class="pull-left">Cake Pin Spot</span><span class="pull-right">$60.00</span><br /><br />
    </p>
    <p class="lead">The cake pin spot is used to help show the beauty of your cake or personalize a table for the bride and groom only.</p>
</div>
<hr class="featurette-divider">

<!-- Fourth Featurette -->
<div class="featurette" id="gallery">
    <img class="featurette-image img-circle img-responsive pull-right" src="http://placehold.it/500x500">
    <h2 class="featurette-heading">
        Gallery
        <span class="text-muted"></span>
    </h2>
    <p class="lead">
        Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
    </p>
</div>
<hr class="featurette-divider">

<!-- Fifth Featurette -->
<div class="featurette" id="contact">
    <img class="featurette-image img-circle img-responsive pull-left" src="Images/contactus.gif" height="500" width="500">
    <h2 class="featurette-heading">
        Contact Us
        <span class="text-muted"></span>
    </h2>
    <p class="lead text-center">
        <br /><br />You can contact us by calling 816.529.9986 or<br />clicking <a class="openDialog" data-dialog-id="sendEmail" data-dialog-title="Contact Us" href="/Home/SendEmail">here</a> to send an email.
    </p>
</div>
<hr class="featurette-divider">

<!-- Sixth Featurette -->
<div class="featurette" id="credit">
    <img class="featurette-image img-circle img-responsive pull-right" src="Images/acknowledgements.gif" height="500" width="500">
    <h2 class="featurette-heading">
        Credits
        <span class="text-muted"></span>
    </h2>
    <p class="lead text-center">
        <br /><br />Website constructed by Clarence Benoit<br /><br />Need a website<br />personal or small business<br />call 816.898.6870.
    </p>
</div>
<hr class="featurette-divider">

<div id="emailForm"></div>
        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12 text-center">
                    <p>Copyright &copy; 2016 Background Sound.&nbsp;&nbsp;All Rights Reserved.</p>
                </div>
            </div>
        </footer>
    </div>
    <!-- /.container -->



    <!-- jQuery -->
    <script src="/Scripts/jquery.js" type="text/javascript"></script>

    <script src="/Scripts/jquery-ui-1.8.24.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="/Scripts/bootstrap.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $.ajaxSetup({ cache: false });

        $(document).ready(function () {
            $(".openDialog").click(function (e) {
                e.preventDefault();
                $("<div></div>").addClass("dialog").att("id", $(this).attr("data-dialog-id")).appendTo("body").dialog({ title: $(this).attr("data-dialog-title"), close: function () { $(this).remove() }, modal: true }).load(this.href);
            });

            $(".close").click(function (e) {
                e.preventDefault();
                var senderName = $("#senderName").val();
                var senderEmail = $("#senderEmail").val();
                var message = $("#message").text();

                $.ajax({
                    type: "POST",
                    url: "Home/SendEmail",
                    data: { "senderName": senderName, "senderEmail": senderEmail, "message": message },
                    success: function (data) {
                        alert("Your email was successfully sent.");
                        $(this).closest(".dialog").dialog("close");
                    },
                    error: function (data) {
                        alert("There was an error sending your email.  Please try again or contact system administrator.");
                        $(this).closest(".dialog").dialog("close");
                    }
                })
            });
        });
    </script>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Firefox","requestId":"ac6dd739aa2b4e58a67eda5ec66a09bc"}
</script>
<script type="text/javascript" src="http://localhost:49245/f88ffa026ad94b73bfa9b9bbddf32f30/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>

</html>

0 个答案:

没有答案
相关问题
最新问题