asu*_*000 5 asp.net jquery simplemodal panel popup
我要感谢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文件夹和文件.检查,我在根中得到了.在那之后,我不知道在哪里转.我的猜测是它需要在页面上的代码顶部附近声明,然后在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"); }
});
});
这都是伪代码，因为该服务不存在，但希望我已经正确传达了该示例。但在这个伪代码示例中，服务将处理电子邮件功能并响应客户端，并且将执行成功回调处理程序（这将显示模式）。如果与服务通信或解析返回值时出现问题，则会调用错误回调处理程序。
请让我知道这可不可以帮你。如果您还有其他问题，请告诉我，我会相应更新我的答案。希望这可以帮助！！
| 归档时间： |
|
| 查看次数： |
1831 次 |
| 最近记录： |