ダイアログモーダルがasp.netコアmvc​​で動作しません5

Question

私はASP.NETコアWebアプリケーション&を開発していますが、ブートストラップダイアログのモーダルに関する問題が残っています。私はちょうどボタン&をクリックしてボタンのダイアログモーダルにpartialViewをロードしたいと思っています。しかし、問題はダイアログモーダルが表示されず、代わりにページが瞬間的なダークスプラッシュでリフレッシュされることです。

以前はモーダルを実装していたので、非常に奇妙です。

はここView.cshtml

@{ 
    Layout = "~/Views/Shared/_AdminLayout.cshtml"; 
    ViewData["Title"] = "Create"; 
} 

<div class="content-wrapper"> 
    <section class="content"> 
     <div class="col-md-12"> 
      <div class="box box-success"> 
       <div class="box-header"> 
        <h3 class="box-title">Add Queue</h3> 
       </div> 
       <form asp-action="Create"> 
        <div class="box-body"> 
         <div asp-validation-summary="ModelOnly" class="text-danger"></div> 
         <div class="form-group col-md-6"> 
          @* ....... *@ 
         </div> 
         <div class="form-group col-md-6"> 
          @* ...... *@ 
         </div> 
         <div class="form-group col-md-6"> 
          @* ...... *@ 
          @* ---- button that triggers the modal ---- *@ 
          <button class="btn btn-default btn-sm" data-toggle="modal" data-target="#adHocAdd">Add New</button> 
         </div> 
         <div class="form-group col-md-6"></div> 
        </div> 
        <div class="box-footer"> 
         <input type="submit" value="Next" class="btn btn-primary" /> 
         <input type="reset" value="Clear" class="btn btn-warning" /> 
        </div> 
       </form> 
      </div> 
     </div> 
    </section> 
</div> 

@* ------- modal div ---------- *@ 
<div id="adHocAdd" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Create a New Menu</h4> 
      </div> 
      <div class="modal-body"> 
       @**Load View*@ 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

@section Scripts { 
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} 
} 

にすべてのヘルプは大歓迎です私のコードです。

Answer 1

この問題は、ボタンが<form>タグ内にあるために発生したようです。 ASP.NETでも私はこの問題を経験しました。

この問題を解決するには、<Button>タグ&の中にtype="button"を追加してコードを実行します。ボタンの完全なコードは以下のようになります。

<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#adHocAdd">Add New</button> 

私の見解によれば、この問題は、モデルを起動するボタンクリックでフォーム送信をトリガーすることによるものです。

さらに理解を深めてください（dotnetfiddle.net）。

• &他のボタンは、それぞれtype="button"である2つのボタン、上記の問題と同様有するものがあります。
• ボタンなしtype="button"が表示されます&秒以内に消えます。しかし、他のものは正常なままです。

Answer 2

フォーム内のボタンは、何も指定されていなければ、常にsubmitとして動作します。したがって、モデル本体の内部にフォームを保持するか、フォームからモデルを削除して、モデルを外部に保持します。

ここでボタンはモデルをトリガーするだけでなく、フォームを送信しています。だからあなたのモデルが現れる前に、あなたは投稿しています。