SimpleModal和ASP.NET的基本帮助

发布时间：2020-12-16 03:25:42 所属栏目：asp.Net 来源：网络整理

导读：将SimpleModal与ASP.NET集成我要感谢Eric生产SimpleModal并赞美演示.它看起来很棒.. 我只是希望我能弄清楚如何使用它…(这是我,我错过了一些染色体或其他东西.)对于我的noobinicity提前抱歉. 我已经看过几个演示特定功能的演示和调用,但这假设脚本正确地集

将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文件夹&项目中的文件.检查,我在根中得到了.在那之后,我不知道在哪里转.我的猜测是它需要在页面上的代码顶部附近声明,然后在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"); }
    });
});

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

请让我知道这可不可以帮你.如果您有其他问题,请告诉我,我会相应更新我的答案.希望这可以帮助！！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!