SimpleModal 和 ASP.NET 的基本帮助

发布于 2024-09-14 10:38:36 字数 1780 浏览 16 评论 0原文

将 SimpleModal 与 ASP.NET 集成

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

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

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

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

我的 C# 技能正在不断示例代码并将其粘贴到 default.aspx 文件中，结果只剩下一堆垃圾代码。

有人可以制作一些我需要将 SimpleModal 正确集成到我的项目中的小样本吗？我已经阅读了埃里克对其他人的回复并阅读了后续链接，但还没有人解释如何完全集成我发现的它。

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

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

以下是示例 default.aspx 文件的外观。我想使用来自代码隐藏的 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 简单地集成到默认项目中吗？

任何帮助将不胜感激。

胜利者

原文

Integrating SimpleModal with ASP.NET

I want to thank Eric for producing SimpleModal and compliment the demos. It looks fantastic..

I only wish I could figure out how to use it.. (it's me, I'm missing some chromosome or something.) Sorry in advance for my noobinicity.

I've seen several demos where specific functions are talked about and called, but this assumes that the scripts are integrated correctly into the project. This is the crux of the issue I am having, I don't know what the heck I'm looking at when I look at jquery.

Some background: I've been programming for 25 years, with assembly, C, VB, and for the last 10 years as a SQL DBA, and architecting large corporate systems. Now I'm trying to make the leap to web ASP.NET. My C# skills are coming along and I've written a complete invoicing system in it, but I don't know squat about getting this SimpleModal or any jquery integrated and working inside ASP.NET 2008.

I've taken the sample code and pasted it into a default.aspx file, only to be left with a total trash code heap.

Can someone make small sample of what I need to get SimpleModal integrated properly into my project? I've read Eric's replies to others and read the subsequent links, but nobody has yet to explain how to entirely integrate it that I've found.

I'm assuming that I need to have the css, img, and the js folders & files in the project. Check, I got that in the root. After that I don't know where to turn. My guess is that it needs to be declared near the top of the code on a page, and then in the HTML a link, and in the code behind it needs to be called. How to do that is beyond me, and I've spent perhaps 3-4 days researching this now...

Once I have a simple modal form popping up and down I should be able to look at the darn thing and figure out how to adapt it, and hopefully over time will begin to fill in the gaps of my understanding.

Here is what a sample default.aspx file looks like. I want to open a SimpleModal using a C# call from Code Behind.

<%@ 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>

This is what a default sample code behind in c# looks like:

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)
    {

    }
}

Anybody want to take a shot at getting SimpleModal simply integrated into a default project?

Any help would be greatly appreciated.

Victor

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

等风来 2024-09-21 10:38:36

我认为您是从纯粹的代码隐藏角度来处理这个问题的；但是使用 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"); }
    });
});

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

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

I think you're approaching this from a pure code-behind perspective; but using jQuery (or most any other client-side framework) shifts a great deal of the actual presentation of your application to the client. The server handles serving up data (in XML, JSON or some other format that you require) and the client utilizes an HTML DOM structure along with JavaScript, CSS and the data served up in order to render your application.

In your comment, you state that you want to use the modal as a confirmation that an action was successful. Here you'd use jQuery to collect the information and issue an AJAX call to your service (perhaps a WCF service), and the service would respond back with a success or failure. You would then handle the success or failure in your jQuery ajax success or error callback handler. This would be done on the client, not on the server.

Here's a quick example that only displays the modal:

<!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>

This is just a basic HTML page with no code-behind. I could modify this to call a service when the submit button is clicked:

$("#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"); }
    });
});

This is all pseudo-code because the service doesn't exist, but hopefully I've conveyed the example properly. But in this pseudo-code example, the service would process the email functionality and respond back to the client and the success callback handler would be executed (which would display the modal). If there is a problem in communicating with the service or parsing the return value, then the error callback handler gets called.

Please let me know if this helps. If you have other questions, let me know and I'll update my answer accordingly. Hope this helps!!

回复收藏 0 原文

~没有更多了~