SimpleModal 和 ASP.NET 的基本帮助答案

【问题标题】：Basic Help with SimpleModal and ASP.NETSimpleModal 和 ASP.NET 的基本帮助
【发布时间】：2011-03-31 06:22:46
【问题描述】：

将 SimpleModal 与 ASP.NET 集成

我要感谢 Eric 制作 SimpleModal 并称赞演示。看起来棒极了..

我只希望我能弄清楚如何使用它..（是我，我缺少一些染色体或其他东西。）提前为我的菜鸟道歉。

我看过几个演示，其中讨论和调用了特定的函数，但这假设脚本已正确集成到项目中。这是我遇到的问题的症结所在，当我看 jquery 时，我不知道我在看什么。

一些背景知识：我从事编程工作 25 年，使用汇编、C、VB，在过去的 10 年中担任 SQL DBA，并构建大型企业系统。现在我正在尝试向 Web ASP.NET 迈进。我的 C# 技能正在提高，我已经在其中编写了一个完整的发票系统，但我不知道如何将这个 SimpleModal 或任何 jquery 集成并在 ASP.NET 2008 中工作。

我已获取示例代码并将其粘贴到 default.aspx 文件中，只留下一个垃圾代码堆。

有人可以制作一些我需要的小样本，以便将 SimpleModal 正确集成到我的项目中吗？我已经阅读了 Eric 对其他人的回复并阅读了随后的链接，但尚未有人解释如何完全整合我找到的。

我假设我需要在项目中拥有 css、img 和 js 文件夹和文件。检查，我在根中得到了它。在那之后，我不知道该转向哪里。我的猜测是它需要在页面代码的顶部附近声明，然后在 HTML 中一个链接，并且在它后面的代码中需要调用它。如何做到这一点超出了我的范围，我现在可能花了 3-4 天的时间来研究这个......

一旦我有一个简单的模态表单上下弹出，我应该能够查看该死的东西并弄清楚如何适应它，希望随着时间的推移会开始填补我的理解空白。

这是一个示例 default.aspx 文件的样子。我想使用 Code Behind 中的 C# 调用打开 SimpleModal。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    </form>
</body>
</html>

这是 C# 中默认示例代码的样子：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

有人想尝试将 SimpleModal 简单地集成到默认项目中吗？

任何帮助将不胜感激。

维克多

【问题讨论】：

你真的需要/想要从后面的代码中调用 SimpleModal 吗？你有什么理由不能只在 aspx 文件中这样做吗？
+1 用于使用术语“noobinicity”
嗨，Eric，我想我会在很多地方使用 SimpleModal，但我首先想到的是在调用存储过程并在后面的代码中发送电子邮件之后...如果存储过程中不存在异常，这将是一种“谢谢，您的提交已发送”类型的通知。和电子邮件。维克多

标签： asp.net jquery popup panel simplemodal

【解决方案1】：

我认为您是从纯代码隐藏的角度来解决这个问题的；但是使用 jQuery（或大多数其他客户端框架）会将应用程序的大量实际呈现转移到客户端。服务器处理提供数据（以 XML、JSON 或您需要的其他格式），客户端利用 HTML DOM 结构以及 JavaScript、CSS 和提供的数据来呈现您的应用程序。

在您的评论中，您声明您希望使用模式来确认操作是否成功。在这里，您将使用 jQuery 来收集信息并向您的服务（可能是 WCF 服务）发出 AJAX 调用，该服务将响应成功或失败。然后，您将在 jQuery ajax 成功或错误回调处理程序中处理成功或失败。这将在客户端完成，而不是在服务器上。

这是一个只显示模态的简单示例：

<!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>
    <title></title>
    <style type="text/css">
        #simplemodal-overlay {background-color:#000;}
        #simplemodal-container {background-color:#333; border:8px solid #444; padding:12px;}
    </style>
</head>
<body>
    <div>
        Email: <input type="text" id="email" /><br />
        Message: <input type="text" id="message" /><br />
        <button id='theModal'>Show</button>
        <div id="sample" style="display:none"> 
            <h2>Sample Data</h2> 
            <p>Your email was successful!!</p> 
            <p>You can press ESC to close this dialog or click <a href="#" class="simplemodal-close">close</a>.</p> 
        </div> 
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://simplemodal.googlecode.com/files/jquery.simplemodal-1.3.5.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#theModal").click(function () {
                $("#sample").modal({
                    opacity: 80,
                    overlayCss: { backgroundColor: "#fff" }
                });
            });
        });
    </script>
</body>
</html>

这只是一个没有代码隐藏的基本 HTML 页面。我可以修改它以在单击提交按钮时调用服务：

$("#theModal").click(function () {
    $.ajax({
      type: "POST",
      dataType: "json",
      contentType: "application/json",
      url: "MyEmailService.svc/SendEmail",
      data: {"email": $("#email").val(),
             "message": $("#message").val()},
      success: function(data) {
                 $("#sample").modal({
                     opacity: 80,
                     overlayCss: { backgroundColor: "#fff" }
                 });
      },
      error: function(m, t, x) { alert("something bad happened"); }
    });
});

这都是伪代码，因为该服务不存在，但希望我已经正确传达了示例。但是在这个伪代码示例中，服务将处理电子邮件功能并响应客户端，然后执行成功回调处理程序（这将显示模式）。如果与服务通信或解析返回值出现问题，则会调用错误回调处理程序。

如果这有帮助，请告诉我。如果您还有其他问题，请告诉我，我会相应地更新我的答案。希望这会有所帮助！

【讨论】：

D Hoerster，您的示例第一次奏效.. 太令人兴奋了！我完全明白你的意思，现在明白为什么埃里克问我是否需要从后面的代码中完成。我仍在考虑“服务器专有”范式。我已经写了一个完整的系统，现在需要放入客户端通知，我的想法是抗拒它。我不得不承认，我很难重新训练自己去思考客户处理其中一些任务的方式。
jscript 对我来说仍然看起来很神秘，但我从经验中知道，如果我盯着它看足够长的时间，那么它就像其他东西一样在我疯狂的头脑中开始变得有意义。我相信这个例子会对许多其他人有所帮助，因为它只需要剪切并粘贴到 default.aspx 文件中。非常感谢您提供这个关键的学习步骤，并再次感谢 Eric 的 SimpleModal。我也对 StackOverflow 有了新的认识。 :) 这是一次很棒的经历，再次感谢。维克多
@asus3000 我很高兴这有帮助！是的，JavaScript 可能很神秘，但我发现像 jQuery 这样的框架可以帮助我更轻松地解决问题。它对所有事情都没有帮助，但它确实帮助我从一个不惜一切代价避免使用 jscript 的 C# 开发人员过渡到一个容易接受客户端问题/问题/项目的人。祝你好运！！
这至少开始对我有意义了，多亏了你。我将您编写的代码放入具有母版页的新页面中，现在 simplemodal 仅闪烁约 1 秒钟然后关闭。知道如何让它持续存在吗？实际上，如果它保持打开 3 秒，那将是可取的。我尝试了一些 Eric 的其他“选项”代码来淡入并取得了一些成功，但它也在母版页上快速关闭。我开始获取代码，所以我将它嵌套在点击事件中，但仍然不成功。一旦理解，这看起来并不难。维克多
如果您在这个问题中发布您的代码或打开一个新问题，我可以看看。你如何让模态最初关闭？我不确定为什么母版页会导致这种情况发生，除非它与它如何为服务器端控件 ID 加前缀有关。如果你更新它，我会继续关注这个问题——或者我会寻找一个新的。 :) 但是，如果您可以发布一些代码（新问题或在这个问题中），我（或其他人）会看看。谢谢！！