在asp.net中浮动反馈表单

时间:2013-11-19 07:35:52

标签: javascript jquery asp.net

我在我的网站上显示一个浮动反馈表单,并使用JQuery来处理幻灯片的输入和输出功能。以下是代码。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SlidingWindow.Default" %>
<%@ Register TagPrefix="ajax" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"%>
<!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>     
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>    

<form id="form1" runat="server">
<asp:ScriptManager runat = "server"></asp:ScriptManager>
<div class="feedback-panel">

<asp:UpdatePanel ID="UpdatePanel1" runat = "server">
<ContentTemplate>
<a class="feedback-tab" href="#"></a> 
<asp:Panel ID = "panel1" runat = "server">           
<table>
<tr style="height:100%;white-space:nowrap;"><td><asp:Label ID="Label1" runat = "server" Text = "Name"></asp:Label></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:TextBox runat = "server" ID = "txtName" CssClass = "feedbacktextbox"></asp:TextBox></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:Label ID="lblEmail" runat = "server" Text = "Email"></asp:Label></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:TextBox runat = "server" ID = "txtEmail" CssClass = "feedbacktextbox"></asp:TextBox></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:Label ID="lblFeedback" runat = "server" Text = "Comments"></asp:Label></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:TextBox runat = "server" ID = "txtFeedback" TextMode="MultiLine" CssClass = "width"></asp:TextBox></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:Button runat = "server" 
        ID = "btnFeedbackSubmit" Text = "Submit" onclick="btnFeedbackSubmit_Click"  />
</td></tr>
</table>   

</asp:Panel>
<asp:Panel ID = "panel2" runat = "server"><asp:Label runat = "server" ID = "lblFeedbackMsg"></asp:Label></asp:Panel>           
  </ContentTemplate>
 </asp:UpdatePanel>   
</div>
</form>
</body>
</html>

    <script type="text/javascript">
    $(document).ready(function () {
        var feedbackTab = {
            speed: 300,
            containerWidth: $('.feedback-panel').outerWidth(),
            containerHeight: $('.feedback-panel').outerHeight(),
            tabWidth: $('.feedback-tab').outerWidth(),


            init: function () {
                $('.feedback-panel').css('height', feedbackTab.containerHeight + 'px');

                $('a.feedback-tab').click(function (event) {
                    if ($('.feedback-panel').hasClass('open')) {
                        $('.feedback-panel')
                .animate({ left: '-' + feedbackTab.containerWidth }, feedbackTab.speed)
                .removeClass('open');
                    } else {
                        $('.feedback-panel')
                .animate({ left: '0' }, feedbackTab.speed)
                .addClass('open');
                    }
                    //event.preventDefault();
                });
            }
        };

        feedbackTab.init();
    });
    </script>

    <style type="text/css">
          .feedback-panel {
    padding:5px;
    width: 250px;
    background:#C4C4FF;
    border: 5 solid #8080FF;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    color: White;
    position:fixed;
    top:77px;
    left:-261px;
}

.feedback-panel a.feedback-tab {
    background: url(/images/feedbackbutton.gif) no-repeat scroll 0 0;
    display:block;
    height:122px;
    left:45px;
    bottom:5px;
    position:relative;
    float:right;
    text-indent:-9999px;
    width:40px;
    outline:none;
}

.feedbackformtable
{
    width: 215px;
}

.feedbacklabel
{
    font-family: Arial Helvetica Sans-Serif;
    font-size: medium;
    color: Black;
}

.feedbacktextbox
{
    width: 200px;
    font-family: Verdana;
    font-size: 12px;
    border: 1px solid #8080FF;
}

    </style>

表单用于以电子邮件形式发送反馈。单击提交按钮后,表单将立即关闭。有没有办法在单击提交按钮后保持表单打开?我想在表单上显示一条消息而不是关闭它。非常感谢任何帮助。

感谢。

0 个答案:

没有答案