Dio*_*dre 3 javascript css c# asp.net twitter-bootstrap
我一直在使用twitter-bootstrap作为我的asp.net网站主题,在尝试制作一个简单的按钮执行事件时遇到了一些麻烦.按钮是一个asp组件,从我在论坛中读到的是,引导程序与asp.net组件管理不太好,无论是脚本(最明显)还是CSS问题(我不知道,我不知道发生了什么事.
据我所知,按钮在我将其放入表单时会采取行动,但据我所知,这不是应该采取的行动.
并重定向到同一页面,但使用以下参数:
?ctl00%24MainContent%24LogUsernameText =&ctl00%24MainContent%24LogPasswordText =&ctl00%24MainContent%24loginBtn =登录+在21%
我已经尝试了很多我在其他人看到过的问题的答案,例如将其渲染为HTML按钮并制作它runat="server"
,然后在页面加载时添加一个实例.
我怎么能通过这个?
母版代码:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Main.master.cs" Inherits="Main" %>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<form id="form1" runat="server">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="Home.aspx">bitRain</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="Home.aspx">Home</a></li>
<li><a href="Upload.aspx">Upload</a></li>
<li><a href="FAQ.aspx">FAQ</a></li>
</ul>
<ul class="nav pull-right">
<li><a href="LoginN'Register.aspx">Sign Up</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Sign In <b class="caret"></b></a>
<ul class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
<form id="navSignIn">
<li>Username</li>
<li><asp:TextBox ID="UsernameField" runat="server"></asp:TextBox></li>
<li>Password</li>
<li><asp:TextBox ID="PasswordField" runat="server"></asp:TextBox></li>
<li><asp:CheckBox ID="navRemember" runat="server" Text="Remember Me." /></li>
<li><asp:Button ID="navLoginBtn" runat="server" Text="Sign In" CssClass="btn" style="clear: left; width: 100%; height: 32px; font-size: 13px;" /></li>
</form>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<div class="hero-unit">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<hr>
<footer>
<p>bitRain Project</p>
</footer>
</div>
<!-- /container -->
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</form>
</body>
Run Code Online (Sandbox Code Playgroud)
页面中的代码块:
<div class="span6 form-horizontal">
<div class="heading">
<legend class="form-heading">Sign In</legend>
</div>
<div class="control-group">
<label class="control-label" for="inputUsername">Username</label>
<div class="controls">
<asp:TextBox ID="LogUsernameText" runat="server"></asp:TextBox>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<asp:TextBox ID="LogPasswordText" runat="server" TextMode="Password"></asp:TextBox>
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<asp:CheckBox ID="LogRemember" runat="server" Text="Keep me signed in |" />
<a href="#" class="btn btn-link">Forgot my password</a>
</label>
<asp:Button ID="loginBtn" runat="server" CssClass="btn" Text="Sign In!" Width="220px" OnClick="loginBtn_Click" />
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
.cs文件代码:
public partial class LoginN_Register : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void loginBtn_Click(object sender, EventArgs e)
{
Account log = new Account();
string username = LogUsernameText.Text;
string password = LogPasswordText.Text;
string authentication = log.UserLogin(username, password);
if (!string.IsNullOrEmpty(authentication))
{
// Create a new ticket used for authentication
FormsAuthenticationTicket ticket = new FormsAuthenticationTicket(
1, // Ticket version
username, // Username associated with ticket
DateTime.Now, // Date issued
DateTime.Now.AddMinutes(30), // Date to expire
true, // "true" for a persistent user cookie
authentication, //Role
FormsAuthentication.FormsCookiePath); //Path authorized
string hash = FormsAuthentication.Encrypt(ticket);
HttpCookie cookie = new HttpCookie(
FormsAuthentication.FormsCookieName, hash);
if (ticket.IsPersistent) cookie.Expires = ticket.Expiration;
Response.Cookies.Add(cookie);
string returnUrl = Request.QueryString["ReturnUrl"];
if (returnUrl == null) returnUrl = "~/Users/User_Profile.aspx";
Response.Redirect(returnUrl);
base.OnLoad(e);
}
else
{
Alert.Text = "<div class=\"alert alert-error\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\">×</button><strong>Warning!</strong> Best check yo self, you're not looking too good.<div>";
LogUsernameText.Text = "Fail";
}
}
}
Run Code Online (Sandbox Code Playgroud)
我的猜测是有些脚本重定向我的按钮事件.我找不到它.我正在使用最新版本的bootstrap主题.
我找到了我的问题的答案,在适当的情况下,你有选择UseSubmitBehaviour
并将其设置为false,我的猜测是它会像普通的HTML提交按钮一样被检测到,并且bootstrap准备改变常规的HTML组件行为.(我真的不知道如何用更好的词语.请随意编辑.)
我的意思是...... Bootstrap没有计划用asp.net组件100%工作,所以它将依赖于javascript命令.
它有逻辑,因为它是一个表单,它会抓取所有文本字段,当按钮被激活时,它会为你提交它们.创建我上面提到的重定向,希望这可以帮助某人,因为我的大脑慢慢推迟并延迟了我2天的工作.
<asp:Button ID="loginBtn" runat="server" CssClass="btn" Text="Sign In!" Width="220px" OnClick="loginBtn_Click" UseSubmitBehavior="False" />
Run Code Online (Sandbox Code Playgroud)
编辑和正确的解决方案:
实际上我开始探索更多它是如何工作的,这是一个验证问题,它只会在验证完成时提交,无论你是否拥有它们,所以如果你使用VS并改变Validation Required
价值Disabled
,你必须去礼仪,不要不要担心按钮只会在其内部进行验证.
对于那些没有......礼仪吧,将这些添加到你的按钮html代码:
ValidateRequestMode="Disabled"
Run Code Online (Sandbox Code Playgroud)
我决定用更可靠的信息改进这个答案,因为我注意到在搜索这个问题解决方案时我只能找到我的问题而不是任何其他来源的好答案,我几个月前找到了"正确的"解决方案...
归档时间: |
|
查看次数: |
5500 次 |
最近记录: |