将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对其他人的答复并阅读了后续链接，但是没有人可以解释如何完全整合我发现的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集成到默认项目中吗？
任何帮助将不胜感激。
胜利者
最佳答案
我认为您是从纯粹的代码背后的角度来解决这个问题的。但是使用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"); }
});
});
这都是伪代码，因为该服务不存在，但希望我已经正确地传达了该示例。但是在此伪代码示例中，服务将处理电子邮件功能并响应客户端，然后将执行成功回调处理程序(将显示模式)。如果与服务通信或解析返回值时出现问题，则将调用错误回调处理程序。
请让我知道这可不可以帮你。如果您还有其他问题，请告诉我们，我将相应地更新答案。希望这可以帮助!!
关于asp.net - SimpleModal和ASP.NET的基本帮助，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3507482/