asp.netのサーバー側からBootstrapモーダルでdivにコンテンツを追加

Question

Bootstrapモデルポップアップに入力フォームがあります。保存するために送信ボタンを押したときにdivにエラーメッセージを表示したい私のモデルポップアップは更新パネルにあります。私はやろうと努力しています。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 

     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">SMTP Configuration</h4> 
      </div> 
      <div class="modal-body"> 

       Here is a input form 

       <div id="ErrorDiv" class="required" runat="server"> 
        This is a div where i want to show content 

       </div> 


      </div> 
      <div class="modal-footer"> 
       <button data-dismiss="modal" class="btn btn-default" type="button">Close</button> 
       <asp:Button ID="btnEdit" runat="server" Text="Save" OnClick="Save" class="btn btn-success" ValidationGroup="Group1" /> 

      </div> 
     </div> 

    </div> 
</div> 

以下に、コンテンツを表示するサーバー側の方法を示します。

public void ShowError(string Message) 
{ 
    ErrorDiv.InnerHtml = Message; 
    upModal.Update(); 
} 

エラーコンテンツをdivに表示するにはどうすればよいですか？

Answer 1

サーバー側からエラーモデルポップアップを開くには サーバー側の関数ShowErrorをこれに更新する必要があります。このため

public void ShowError(string Message) 
{ 
    ErrorDiv.InnerHtml = Message; 
    upModal.Update(); 
    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ErrorModel", "$('#myModal').modal('show');", true); 
} 

あなたは更新パネルに、id myModal、とDIVを配置する必要があります。

これは、サーバー側の実行が完了し、モデルが手動で開いた後にクライアント側でjQuery関数をトリガーします。あなたがこの方法に従って更新パネルにモデルのdivを入れたくない場合はこの

を行うには

他の方法。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 

     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">SMTP Configuration</h4> 
      </div> 
      <div class="modal-body"> 

       Here is a input form 

       <div id="ErrorDiv" class="required"> 
        This is a div where i want to show content 

       </div> 


      </div> 
      <div class="modal-footer"> 
       <button data-dismiss="modal" class="btn btn-default" type="button">Close</button> 
      </div> 
     </div> 

    </div> 
</div> 

の下のaspxファイルに以下のようにJavaScriptの関数を追加し、あなたのようなモデルのdivを更新します。

function showError(error){ 
    $("#ErrorDiv").html(error); 
    $('#myModal').modal('show'); 
} 

そしてここでは、サーバ側から

このような

public void ShowError(string Message) 
{ 
    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ErrorModel", "ShowError('"+Message+"');", true); 
} 

をJavaScript関数を呼び出して、あなたはまた、更新パネルを共有できるScriptManager.RegisterStartupScript Method