jQuery BlockUIの中のログインボタン

Question

私は目に見えないフォームでログを作成しました。私はBlockUIを使ってフォームを表示しています。

フォームを開いてフォームを終了できますが、[ログイン]ボタンをクリックしてもサーバーにはポストバックされません。

ログインボタンのポストバックを作成する方法はありますか？

注：ログイン機能は、blockuiなしでページ自体に配置しようとしたために機能し、ポストバックします。

マイログインフォーム

<div id="LoginDiv" class="LoginDiv"> 
    <input type="image" id="CloseForm" src="../Images/SiteRelated/CloseForm.jpg" style="float: right;" /> 
    <div style="display: inline-block; margin-top: 15px"> 
     Username 
    </div> 
    <div class="InlineBlock"> 
     <asp:TextBox ID="UsernameTB" Text="Or" runat="server" Style="width: 90px"></asp:TextBox> 
    </div> 
    <div style="clear: both;"> 
    </div> 
    <div class="InlineBlock"> 
     Password 
    </div> 
    <div class="InlineBlock"> 
     <asp:TextBox ID="PasswordTB" TextMode="Password" Text="123" runat="server" Style="width: 90px; 
      margin-right: 18px"></asp:TextBox> 
    </div> 
    <asp:Panel ID="Panel1" HorizontalAlign="Center" runat="server"> 
     <asp:Button ID="LoginBtn" runat="server" Text="Login" Style="width: 150px;" OnClick="LoginBtn_Click" /> 
    </asp:Panel> 
</div> 

私のJavascriptの

<script language="javascript" type="text/javascript"> 
    $(document).ready(function() { 
     $('#CloseForm').click(function() { 
      $.unblockUI(); 
     }); 

     $('#Login').click(function() { 
      $.blockUI.defaults.css = { 
       padding: 0, 
       margin: 0, 
       width: '15.8%', 
       top: '40%', 
       left: '35%', 
       textAlign: 'center', 
       color: '#000', 
       border: '3px solid #aaa', 
       backgroundColor: '#fff', 
       cursor: 'wait' 
      }; 
      $.blockUI({ message: $('#LoginDiv') }); 
     }); 
    }); 
</script> 

Answer 1

私はあなたが戻ってフォームにログインdiv要素を追加する必要があると思います。 新しいjavascriptはこのようになります。

<script language="javascript" type="text/javascript"> 
    $(document).ready(function() { 
     $('#CloseForm').click(function() { 
      $.unblockUI(); 
     }); 

     $('#Login').click(function() { 
      $.blockUI.defaults.css = { 
       padding: 0, 
       margin: 0, 
       width: '15.8%', 
       top: '40%', 
       left: '35%', 
       textAlign: 'center', 
       color: '#000', 
       border: '3px solid #aaa', 
       backgroundColor: '#fff', 
       cursor: 'wait' 
      }; 
      $.blockUI({ message: $('#LoginDiv') }); 

      //Add the LoginDiv back to the form. 
      $('#LoginDiv').parent().appendTo($("form:first")); 
     }); 
    }); 
</script> 

Answer 2

これは本当に助けになりました。ポストバックしないasp.netボタンがあったblockUIも同様の問題がありました。 awright18の提案は多くの助けになりました。

<div id="taxStatus" style="display:none;"> 
<br /> 
    <div class="row"> 
     <div class="three columns"><asp:Button runat="server" ID="unitedStatesTaxStatusButton" Text="United States" CssClass="submitButton" OnClick="unitedStatesTaxStatusButton_Click" /></div> 
     <div class="three columns"></div> 
     <div class="six columns"></div> 
    </div> 
    <br /><br /> 

</div> 

onclickのは、ちょうどこの呼び出します

protected void unitedStatesTaxStatusButton_Click(object sender, EventArgs e) 
    { 
     //do whatever 
    } 

私のjqueryの：

$(document).ready(function() { 
     $('#<%=unitedStatesTaxStatusButton.ClientID%>').click(function() { 
      $.unblockUI(); 

      //** added this line to make it work ****** 
      $('#taxStatus').parent().appendTo($("form:first")); 
      return true; 
     });