ブートストラップモーダルヘッダとフッタがレンダリングされない

ブートストラップモーダルに編集フォームを表示しています。 asp mvc5を使用して、部分的なビューをブートストラップモーダルウィンドウに戻しています。フォームが表示され、データで埋め尽くされ、うまく投稿されます。ヘッダーとフッターは表示されません。コードは "view page source"に表示されますが、Web開発者インスペクタ（chrome）の要素タブには表示されません。ブートストラップモーダルヘッダとフッタがレンダリングされない

私はこの1ページに複数の異なるモーダルを作成する予定です。そのため、モーダルの_layoutページでプレースホルダを使用して、異なる部分ビューを渡しています。レイアウトの

プレースホルダ：

<body> 

    @*Container for modal windows*@ 
    <div class="modal fade" id="modal-container" tabindex="-1" role="dialog" aria-labelledby="modalLabel"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button> 
        <h4 class="modal-title" id="modalLabel"></h4> 
       </div> 
       <div class="modal-body"> 

       </div> 
       <div class="modal-footer">This is the footer</div> 
      </div> 
     </div> 
    </div>

部分ビュー（専用フォームやモーダルは、キャンセルボタンを含んでいる）：

  <div class="form-group"> 
       <div class="col-md-offset-2 col-md-10"> 
        <input type="submit" value="Save" class="btn btn-default" /> 
        <button class="btn btn-warning" data-dismiss="modal">Cancel</button> 
       </div> 
      </div>

リンクに "データ - " のタグを追加するためのいくつかのJS：

$(function() { 

    $('body').on('click', '.modal-link', function(e) { 
     //e.preventDefault(); 
     $(this).attr('data-target', "#modal-container"); 
     $(this).attr('data-toggle', 'modal'); 
    }); 

//Clear modal cache 
    $('#modal-container').on('hidden.bs.modal', function() { 
     $(this).removeData('bs.modal'); 
    }); 

});

mvcコントローラは部分：

を返します。 210

return PartialView("_EditOrchard", orchard);

出典

2016-09-09 BattlFrog

なぜパーシャルレスポンスにヘッダーとフッターを含めないでください。それぞれの部分は、 "保存"権利に対して異なる動作をしますか？ – Shyju

それは機能しますが、私は理由を理解できません。私は部分的なビューが 'モーダルボディ' divに注入されることを断ったので、ヘッダーとフッターを部分ビューに置くと、body内に配置されます。しかし、それはしません。ブートストラップのエルフがモーダル全体を構築し、物事を正しく注文しているので、私は推測していますか？ – BattlFrog

'modal-container'はヘッダとフッタがある外側のdivです。そこからの応答は、その既存の内容を上書きします。 – Shyju

部分表示コンテンツを返すときに、ヘッダーとフッターに必要なマークアップも含める必要があります。あなたの部分的なビューには、あなたが作っているリクエストに基づいて異なるボタンがあるかもしれません。いくつかは唯一の「保存」ボタンを有していてもよく、いくつかは、ボタンのみ、あなたがそれらのボタンをクリックしても異なっていたときに実行するコード「はの削除」を有することができます。

<div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
              <span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
    </div> 
    <div class="modal-body"> 
     <p>Some contet for the modal </p> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
    </div> 
</div>

あなたが思ったように動作していない理由は、modal-containe rは、ヘッダーとフッターを持っているの内側、外側のdivです。サーバーからの応答は、その既存の内容を上書きします。

出典

2016-09-09 18:19:24 Shyju

ブートストラップモーダルヘッダとフッタがレンダリングされない

答えて

関連する問題