使用 SimpleModal 和 ASP.NET MVC答案

【问题标题】：Using SimpleModal and ASP.NET MVC使用 SimpleModal 和 ASP.NET MVC
【发布时间】：2010-01-23 14:50:53
【问题描述】：

我正在使用带有 asp.net MVC 的简单模式。我已经使用 OSX 演示进行了设置，它将视图加载到对话框中。

我使用的javascript是：

jQuery(function($) {

   $("input.ema, a.ema").click(function(e) {
        e.preventDefault();
        $("#osx-modal-content").modal({
            appendTo: 'form',
            overlayId: 'osx-overlay',
            containerId: 'osx-container',
            closeHTML: '<div class="close"><a href="#" class="simplemodal-close">X</a></div>',
            minHeight: 80,
            opacity: 65,
            position: ['0', ],
            overlayClose: true,
            onOpen: OSX.open,
            onClose: OSX.close,
            onShow: OSX.show

        });
    });

    var OSX = {
        container: null,
        open: function(d) {
            var self = this;
            $.ajax({
                url: "/Message/UserMessage/",
                type: 'GET',
                dataType: 'html', // <-- to expect an html response
                success: doSubmitSuccess
            });
            function doSubmitSuccess(result) {
                $('div#osx-modal-data').html(result);
            }

            self.container = d.container[0];
            d.overlay.fadeIn('slow', function() {
                $("#osx-modal-content", self.container).show();
                $('div#osx-modal-title').html("Send Email");
                var title = $("#osx-modal-title", self.container);
                title.show();

                d.container.slideDown('slow', function() {
                    setTimeout(function() {
                        var h = $("#osx-modal-data", self.container).height() +
                        title.height() +
                        20; // padding
                        d.container.animate({
                            height: h
                        }, 200, function() {
                            $("div.close", self.container).show();
                            $("#osx-modal-data", self.container).show();

                        });
                    }, 300);
                });
            })

        },
        close: function(d) {
            var self = this;
            d.container.animate({
                top: "-" + (d.container.height() + 20)
            }, 500, function() {
                self.close(); // or $.modal.close();
            });
        },
        show: function(d) {
            var self = this;
            $("#txtEmail", self.container).hide();
            });

        }
    };


});

在显示功能上，我试图隐藏 txtEmail 框，但似乎无法找到它。

进入对话框的 HTML 是

<%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>CreateMessage</title>
</head>
<body>
    <div>

        <p>
            <input id="txtEmail" type="text" style="width: 90%" /></p>
        <p>
            <textarea id="TextArea1" cols="20" rows="5"></textarea></p>
        <p>
            <input id="submitmsg" type="submit" value="Send" /></p>
    </div>
</body>
</html>

谁能帮我解决这个问题？

谢谢，

【问题讨论】：

标签： asp.net jquery asp.net-mvc simplemodal

【解决方案1】：

我相信 AJAX 调用在调用 show 方法时尚未完成，因此在您要隐藏它时该元素不存在。您可能应该将 open 处理程序中 ajax 调用之后的所有代码连同隐藏 txtEmail 元素的代码一起移动到 ajax 回调中。

var OSX = {
    container: null,
    open: function(d) {
        var self = this;
        $.ajax({
            url: "/Message/UserMessage/",
            type: 'GET',
            dataType: 'html', // <-- to expect an html response
            success: function(html) {
                $('div#osx-modal-data').html(result)
                                       .find("#txtEmail")
                                       .hide();
                ...rest of code to display the dialog...
            }
        });

【讨论】：

这是有道理的，但我对 jquery 还是很陌生，那么 ajax 回调在哪里呢？对不起，如果这是一个愚蠢的问题。
在您的情况下，它是 doSubmitSuccess 方法——顺便说一下，您可以简单地将其内联写为成功属性的值。我将添加一些代码来演示。