在ASP.Net MVC中使用JQuery的弹出窗体

时间:2016-01-28 06:53:31

标签: jquery asp.net-mvc asp.net-mvc-4 modal-dialog popupwindow

我试图打开一个联系表单,如下图所示弹出窗口,一旦用户点击asp.net mvc查看页面中的链接或按钮

enter image description here

这是 index.cshtml viewpage

       @{       
       Layout = "~/Views/Shared/_Right_upper_Layout.cshtml";
        }

       <a class="openDialog" data-dialog-id="emailDialog" data-dialog-title="contactus" href="~/Home/ContactUs">Contact US</a>

<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript">
</script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.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>

<script type="text/javascript">

    $.ajaxSetup({ cache: false });

    $(document).ready(function () {

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

            .load(this.href);
        });
    });
</script>


@section Scripts 
{}

这是控制器

    public ActionResult ContactUs()
    {
        return PartialView("ContactUs");
    }

这是 ContactUs.cshtml 页面

<label for="Name">Name:</label><br />

<input id="Namecontact" name="Name" type="text" /><br />

<label for="email">Email:</label><br />

<input id="emailcontact" name="email" type="text" /><br />

<label for="message">Message:</label><br />

<textarea id="messagecontact" name="message"></textarea>

<input class="close" name="submit" type="submit" value="Submit" />

但是一旦我点击这个 ContactUs ,它打开新标签就不是弹出窗口了,这里有什么不对。

0 个答案:

没有答案