2013-06-14 2 views
3

Я использую twitter-bootstrap для моей темы веб-сайта asp.net, и я столкнулся с некоторыми проблемами при попытке простой кнопки выполнить событие , Кнопка представляет собой компонент asp, из того, что я читал на форумах, является то, что bootstrap не справляется с компонентами asp.net, либо являясь сценарием (наиболее очевидным), либо проблемой CSS (я не знаю, Я не эксперт в том, что происходит).Компонент Button Asp.net не работает под темой Twitter-Bootstrap

Насколько я видел, кнопка принимает меры, когда я помещаю ее внутри формы, однако это не действие, которое должно произойти, насколько я знаю.

и перенаправляет на ту же страницу, но с этими параметрами:

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> 

Кусок кода со страницы:

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

код на .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\">&times;</button><strong>Warning!</strong> Best check yo self, you're not looking too good.<div>"; 
     LogUsernameText.Text = "Fail"; 
    } 
} 
} 

Моя догадка что theres некоторый скрипт redi исправление события моей кнопки. Я не могу найти его. Я использую последнюю версию темы начальной загрузки.

+0

Когда вы нажимаете на свою кнопку, у вас есть ошибка JavaSscript? В Chrome вы можете увидеть это с вкладкой F12> Консоль. –

+0

@JoffreyKern Нет, просто кажется, что он ничего не делает. Я основываю свой код на предыдущих опытах, и он работает над ними. –

+1

У меня уже есть ответ, я понял. Но я должен ждать 7 часов, недостаточно репутации. В любом случае, просто измените пристрастие UseSubmitBehaviour на false, и это работает, надеюсь, что это поможет кому-то и спасибо, пытаясь помочь мне с этой проблемой. –

ответ

5

Я нашел ответ на свой вопрос, по соображениям, у вас есть опция UseSubmitBehaviour и установите его в false, я предполагаю, что он будет обнаружен как обычная кнопка отправки HTML, и bootstrap готов изменить поведение HTML-компонентов , (Я не знаю, как это сделать лучше. Не могу редактировать.)

Я имею в виду ... Bootstrap не планировался для работы на 100% с компонентами asp.net, поэтому это зависело бы на javascript-командах.

У этого есть логика, поскольку, когда это была форма, он захватывал все текстовые поля, и когда кнопка была активирована, она отправила бы их вам. Создав перенаправление, о котором я упоминал выше, надеюсь, что это поможет кому-то, так как мой мозг пошел медленнее и задержал меня на 2 дня работы.

<asp:Button ID="loginBtn" runat="server" CssClass="btn" Text="Sign In!" Width="220px" OnClick="loginBtn_Click" UseSubmitBehavior="False" /> 

EDIT и правильное решение:

На самом деле я в изучении более, как все это работает, и это проблема проверки, она будет представлять только если валидация будут выполнены, либо вы их или нет, так что вы должны идти на приличия, если используете VS и меняете значение Validation Required на Disabled, не волнуйтесь, кнопка будет проверяться только внутри его формы.

Для тех, у кого нет ...Бар приличий, добавить их к вашей кнопке HTML коду:

ValidateRequestMode="Disabled" 

я решил улучшить этот ответ с более надежной информацией, потому что я заметил, что при поиске решения этой проблемы я только мог найти мой вопрос и не хорошие ответьте на любой другой источник, я нашел «правильное» решение пару месяцев назад, хотя ...

+0

Я пробовал все ваши исправления, и никто из них не работал, я использую тему загрузочного бутстрапа ... –

+0

Черт, это решило мою проблему !! Спасибо друг!! –

0

Если это внешний вид кнопки бутстрапа, на который вы нацеливаетесь, компонент кнопки asp не будет работать. Использование

<asp:LinkButton></asp:LinkButton> 

контроль вместо. Он работает так же, как и кнопка asp.

Смежные вопросы