Question

将SimpleModal与ASP.NET

集成

我要感谢Eric制作SimpleModal并赞美演示。它看起来很棒......

我只希望我能弄清楚如何使用它...（这是我，我遗漏了一些染色体或其他东西。）提前抱歉我的noobinicity。

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

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

我已经将示例代码粘贴到default.aspx文件中，但只剩下一个垃圾代码堆。

有人可以在我的项目中正确地集成SimpleModal所需的小样本吗？我已经阅读了Eric对其他人的回复，并阅读了后续链接，但没有人解释如何完全整合我发现的链接。

我假设我需要拥有css，img和js文件夹＆amp;项目中的文件。检查，我在根中得到了。在那之后，我不知道在哪里转。我的猜测是它需要在页面上的代码顶部附近声明，然后在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简单地集成到默认项目中？

非常感谢任何帮助。

维克多

Answer 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"); }
    });
});

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

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

SimpleModal和ASP.NET的基本帮助

将SimpleModal与ASP.NET

1 个答案: