Aspnet Ajax如何在表单提交时进行本地刷新

问：

我在我的卡片索引页面中使用模式对话框。当我单击任何卡片时，它会将单击的项目 ID（其 sipId）发布到控制器中的详细信息操作，以及控制器视图 Detail.cshtml 并通过 modalview 打开。

到目前为止，一切都很正常。 但是当我尝试在评论框中写一些东西并尝试提交时，所有页面重新加载和模态弹出都消失了，如何在模态中进行本地刷新？

我正在为评论部分使用两个组件（评论视图和评论添加）。

以下是它的代码：

主页 index.cshtml：

@model HashSet<Siparisler>
@{
   
    ViewBag.Title = "Sipariş Listesi";
    ViewBag.pTitle = "Sipariş Listesi";
    ViewBag.pageTitle = "Tasks";
    Layout = "_LayoutKanban";
 
}






     
@functions {   

       
   

  
    async Task YeniKanbanSiparisKartiEkle(Siparisler siparis)
        {
           
            if (siparis.TransacationId.ToString()!=lastOrderId)
            {
          
                var fotoUrl = "";
                try
                {

               
                if (siparis.Urunler.Fotograflar!=null)
                {
                    fotoUrl = siparis.Urunler.Fotograflar.Url;
                }
                else
                {
                    fotoUrl = @Url.Action("UrunFotografi", "Urunler", new { id = siparis.Urunler.Id });
                }
                }
                catch 
                {                      
                   
                 
                }
               
                <div class="board-item" data-sipid="@siparis.Id" data-sipdurumid="@siparis.SiparisDurumId">
                <div class="board-item-content">

                <div class="d-flex mb-2">
                    <h3 class="fs-15 mb-0">
                        @siparis.Urunler.UrunAdi                    
                    </h3>

                </div>
                    <p class="text-muted">
                        #@siparis.ReceiptId
                    </p>

                    <h3 class="text-muted">
                        <strong>Sipariş Detayları:</strong>
                    </h3>                   




                        <strong>
                            Sipariş Notu:
                        </strong>
                        @siparis.SiparisNotu

                        <br/>
                        <strong>
                            Sipariş Fiyat Hesabı:
                        </strong>


                        @foreach (var line in @siparisHesabiTxt.Split(Environment.NewLine).Where(x => x.Contains("")))
                        {

                            <br/>
                            @line



                        }




                        <strong>Toplam:</strong>
                        <a> @toplamFiyat.ToString() TL</a>
                        

                    }
                <div>
                    <img src="@fotoUrl" class="tasks-img rounded"/>
                </div>
                <div class="mb-3">
                    <div class="d-flex mb-1">
                        <div class="flex-grow-1">
                            <span class="text-muted">
                                <span class="text-secondary">15%</span> of 100%
                            </span>
                        </div>
                        <div class="flex-shrink-0">
                            <span class="text-muted">@siparis.SiparisTarih</span>
                        </div>
                    </div>
                    <div class="progress rounded-3 progress-sm bg-soft-danger">
                        <div class="progress-bar bg-danger" role="progressbar"
                             style="width: 15%" aria-valuenow="15" aria-valuemin="0"
                             aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <span class="badge badge-soft-primary">@siparis.Uyeler.AdSoyad</span>
                    </div>
                    <div class="flex-shrink-0">
                        <div class="avatar-group">
                            <a href="javascript: void(0);" class="avatar-group-item shadow"
                               data-bs-toggle="tooltip" data-bs-trigger="hover"
                               data-bs-placement="top" title="Alexis">
                                <img src="~/assets/images/users/avatar-6.jpg" alt=""
                                     class="rounded-circle avatar-xxs">
                            </a>
                            <a href="javascript: void(0);" class="avatar-group-item shadow"
                               data-bs-toggle="tooltip" data-bs-trigger="hover"
                               data-bs-placement="top" title="Nancy">
                                <img src="~/assets/images/users/avatar-5.jpg" alt=""
                                     class="rounded-circle avatar-xxs">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="d-flex">
                    <div class="flex-grow-1">
                        <span class="text-muted">
                            <i class="ri-time-line align-bottom"></i>
                            @siparis.TeslimatTarih
                        </span>
                    </div>
                    <div class="flex-shrink-0">
                        <ul class="link-inline mb-0">
                            <li class="list-inline-item">
                                <a href="javascript:void(0)" class="text-muted">
                                    <i class="ri-eye-line align-bottom"></i> 04
                                </a>
                            </li>
                            <li class="list-inline-item">
                                <a href="javascript:void(0)" class="text-muted">
                                    <i class="ri-question-answer-line align-bottom"></i>
                                    19
                                </a>
                            </li>
                            <li class="list-inline-item">
                                <a href="javascript:void(0)" class="text-muted">
                                    <i class="ri-attachment-2 align-bottom"></i> 02
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>






                </div>
                </div> 
               
            lastOrderId = @siparis.TransacationId.ToString();

        }
    }

  
}

@section body
{
    <!--yeni kanban deneme-->

    <div class="board">
        @{
            var siparisDurumlari = (List<SiparisDurumlari>)@ViewBag.data;

            if (siparisDurumlari.Any())
            {

                string cardTaskid = "";
                string divid = "";
                string level = "";


                string badgeclass = "badge bg-success align-bottom ms-1 ";

                foreach (var siparisDurumu in siparisDurumlari)
                {



                    if (siparisDurumu.Id == 1)
                    {
                        badgeclass = "badge bg-success align-bottom ms-1 ";
                        divid = "new-task-list";
                        cardTaskid = "new-task";
                        level = "1";
                    }
                    else if (siparisDurumu.Id == 2)
                    {
                        badgeclass = "badge bg-warning align-bottom ms-1 ";
                        divid = "inprogress-task-list";
                        cardTaskid = "inprogress-task";
                        level = "2";
                    }
                    else if (siparisDurumu.Id == 3)
                    {
                        badgeclass = "badge bg-info align-bottom ms-1 ";
                        divid = "todo-task-list";
                        cardTaskid = "todo-task";
                        level = "3";
                    }
                    else if (siparisDurumu.Id == 4)
                    {
                        badgeclass = "badge bg-success align-bottom ms-1 ";
                        divid = "completed-task-list";
                        cardTaskid = "completed-task";
                        level = "4";
                    }


                    <div class="board-column @siparisDurumu.SiparisDurumAdi">

                        <div class="d-flex mb-3">
                            <div class="flex-grow-1">
                                <h2 class="fs-14 text-uppercase fw-semibold mb-0">
                                    @siparisDurumu.SiparisDurumAdi <small class="@badgeclass">@Model.Count(x => x.SiparisDurumId == siparisDurumu.Id)</small>
                                </h2>
                            </div>

                        </div>

                        <div class="board-column-content-wrapper" data-level="@level">
                            <div id="@cardTaskid" class="board-column-content" data-level="@level" data-simplebar>
                                @{
                                    Stopwatch sw = new Stopwatch();
                                    sw.Start();
                                    foreach (var siparis in Model.Where(x => x.SiparisDurumId == siparisDurumu.Id).OrderByDescending(x => x.SiparisTarih).ToHashSet())
                                    {

                                        await YeniKanbanSiparisKartiEkle(siparis);
                                    }
                                    sw.Stop();

                                    Console.WriteLine("Siparis Durum ve Kart Elapsed={0}", sw.Elapsed);

                                }
                            </div>

                        </div>


                    </div>



                }
            }




        }
    </div>
    //its my modal dialog div
    <div id="carddiaglog" style="display: none"></div>
   
}







@section scripts
{
    <script src="~/assets/js/bootstrap-5.0.2.min.js"></script>
    <script src="~/assets/js/jquery.min.js"></script>
    <script src="~/assets/js/jquery-ui.min.js"></script>
    
 
    <!--Kanban için yazılan kodlar,modal,vs..-->
    <script src="~/assets/js/kanbanApp.js"></script>
    
   
   
   
}

在这里，我的帖子 kanbanApp.js 文件用于打开模态：

const boardItems = window.document.querySelectorAll('.board-item');
boardItems.forEach(boardItem=> {
    boardItem.addEventListener('click', function () {
       
        $("#carddiaglog").dialog({
            autoOpen: false,
            modal: true,
            title: "Sipariş Detayları"
        });
      // window.document.getElementById('carddiaglog').style.display = 'block'      
        var sipId = boardItem.getAttribute('data-sipid');
        $.ajax({
            type: "POST",
            url: "./Siparisler/Detail",
            data: { "sipId": sipId },
            success: function (response) {
                $('#carddiaglog').html(response);
                $('#carddiaglog').dialog('open');
            },
            failure: function (response) {
                alert(response.responseText);
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
});
       
})

这里是用于模式弹出视图的 Details.cshtml：

    @model Siparis.Siparisler
     @{
         Layout = null;
         var _context = new AppDbContext();
        var sipDurum = _context.SiparisDurumlari;
         ViewBag.SiparisDurumlari = new SelectList(sipDurum, "Id", "SiparisDurumAdi");
    
     }
     
     <!DOCTYPE html>
     
     <html>
    
     <head>
        
     </head>
     <body>
    
       
     @{
         int sipId = 0;
    
    
     }
     <div id="modalContainer" class="siparisDetails" >
        
    
     @{         
    
                                   
          
           
         var ilgliSiparis = Model;
         var ilgliSiparisfotoUrl = "";
           
         try
         {
               
    
                
               
             if (ilgliSiparis != null)
             {
                 if (ilgliSiparis.Urunler.Fotograflar != null)
                 {
                     ilgliSiparisfotoUrl = ilgliSiparis.Urunler.Fotograflar.Url;
                 }
                 else
                 {
                     ilgliSiparisfotoUrl = @Url.Action("UrunFotografi", "Urunler", new { id = ilgliSiparis.Urunler.Id });
                 }
             }
    
    
    
         }
         catch (Exception e)
         {
             Console.WriteLine(e);
    
         }
    
     }
     @{
         if (ilgliSiparis != null)
         {
             <div class="modal-item-content">
             <form method="post" enctype="multipart/form-data">
             <div class="row">                   
             <h3 class="fs-15 mb-0">
                 @ilgliSiparis.Urunler.UrunAdi
             </h3>
             <h3 class="text-muted">
                 <strong>Sipariş Detayları:</strong>
             </h3>       
            

                 <div>
                     <img src="@ilgliSiparisfotoUrl" class="tasks-img rounded"/>
                 </div>
                 
                 <div class="card mb-3">
                <div class="card-body">
                    <div class="table-card">
                        <table class="table mb-0">
                            <tbody>
                            <tr>
                                <td class="fw-medium">Sipariş Durumları</td>
                                <td> <select class="form-controlbadge badge-soft-secondary" asp-for="SiparisDurumlari" asp-items="ViewBag.SiparisDurumlari">
                                </select></td>
                            </tr>
                            <tr>
                                <td class="fw-medium">Sipariş Tarihi</td>
                                <td>@ilgliSiparis.SiparisTarih</td>
                            </tr>
                            <tr>
                                <td class="fw-medium">Sipariş Numarası</td>
                                <td>#@ilgliSiparis.ReceiptId</td>
                            </tr>
                            <tr>
                                <td class="fw-medium">Öncelik</td>
                                <td><span class="badge badge-soft-danger">Yüksek</span></td>
                            </tr>
                            <tr>
                                <td class="fw-medium">Kargoya Verilmesi Gereken Son Tarih</td>
                               
                                <td class="@teslimatclass">@ilgliSiparis.TeslimatTarih.ToShortDateString()</td>
                            </tr>
                            </tbody>
                        </table><!--end table-->
                    </div>
                </div>
            </div>
    
             <!--its my first View component for call/view all card messages for clicked card -->
             @await Component.InvokeAsync("SiparisMesaji",new{ siparisId=ilgliSiparis.Id});
    
    
             </div>
    
    
    
             </form>
             </div>
         }
     }
    
     </div>
    
     
    
     </body>
     </html>

这是我的第一个组件 cshtml 文件：

 @using SiparisMesaji
    @model HashSet<SiparisMesaji>
    
    @{
        var _context = new AppDbContext();
       var userId= TempData["UserId"];
        TempData.Keep("UserId");
    }
    
    
    @functions {
    
        async Task SiparisMesajiEkle(SiparisMesaji mesaj)
        {
            <div class="d-flex mb-4">
                <div class="flex-shrink-0">
                    <img src="/assets/images/users/avatar-7.jpg" alt="" class="avatar-xs rounded-circle" />
                </div>
                <div class="flex-grow-1 ms-3">
                    <h5 class="fs-13">
                        <a href="/Pages/ProfileSimple">@mesaj.Uyeler</a> <small class="text-muted">
                            @{
                                @Model.First().Tarih.ToString();
                            }
                        </small>
                    </h5>
                    <p class="text-muted">
                        @{
                            @Model.First().Mesaj;
                        }
                    </p>
                    <a href="javascript: void(0);" class="badge text-muted bg-light"><i class="mdi mdi-reply"></i> Cevap</a>
                    @{
                        await SiparisMesajCevabiEkle(mesaj.Id);
                    }
                    
                </div>
            </div>
        }
       
    
        async Task SiparisMesajCevabiEkle(int mesajId)
        {
            var cevaplar= Model.Where(x => x.CevapId == mesajId);
            foreach (var cevap in cevaplar)
            {
                <div class="d-flex mt-4">
                    <div class="flex-shrink-0">
                        <img src="/assets/images/users/avatar-10.jpg" alt="" class="avatar-xs rounded-circle" />
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <h5 class="fs-13"><a href="/Pages/ProfileSimple">@cevap.Uyeler.AdSoyad</a> <small class="text-muted">@cevap.Tarih.ToString()</small></h5>
                        <p class="text-muted">@cevap.Mesaj</p>
                        <a href="javascript: void(0);" class="badge text-muted bg-light"><i class="mdi mdi-reply"></i> Reply</a>
                    </div>
                </div>
            }
    
            
        }
    
    }
    
    <div class="card">    
    <div class="card-body">
    <div class="tab-content">
    <div class="tab-pane active show" id="home-1" role="tabpanel">
        <h5 class="card-title mb-4">Yorumlar</h5>
        <div data-simplebar="init" style="height: 100px;" class="px-3 mx-n3 mb-2">
            <div class="simplebar-wrapper" style="margin: 0px -16px;">
                <div class="simplebar-height-auto-observer-wrapper"><div class="simplebar-height-auto-observer"></div></div>
                <div class="simplebar-mask">
                    <div class="simplebar-offset" style="right: 0px; bottom: 0px;">
                        <div class="simplebar-content-wrapper" tabindex="0" role="region" aria-label="scrollable content" style="height: 100%; overflow: hidden scroll;">
                            <div class="simplebar-content" style="padding: 0px 16px;">
                              @{
                                  foreach (var mesaj in Model.Where(x=>x.CevapId==null))
                                  {
                                      await SiparisMesajiEkle(mesaj);
                                  }
                              }
                           
                            </div>
                        </div>
                    </div>
                </div>
    
            </div>
        </div>
<--Here my second View Component for Add Card Message (its include submit button and form)-->
                    @await Component.InvokeAsync("SiparisMesajiAdd",new {uyeId=userId, siparisId=ViewBag.SiparisId});
    </div>
    
                        
      
    </div>
    
    
    </div>
    </div>
    </div>  
    

它是我的第二个视图组件（消息添加组件） Throuble 在那个脚本中，我在 cshtml 脚本部分编写脚本。

@model SiparisMesaji
        
        @{
            var _context = new AppDbContext();             
        }
        
        
        
        <form id="comment-form" class="mt-4" enctype="multipart/form-data" asp-action="Add" method="post">
           
                <div class="row g-3">
                    <div class="col-lg-12">
                        <label for="exampleFormControlTextarea1" class="form-label">Sipariş Sohbetleri</label>
                        <textarea class="form-control bg-light border-light"  asp-for="Mesaj" id="siparisMessage" rows="3" placeholder="Sipariş İle İlgili Yorum Yaz"></textarea>
                    </div><!--end col-->
                    <div class="col-12 text-end">
                        <div class="form-group row">
                            <div class="col-md-9">
                                <label for="fileUpload">
                                    <i class="ri-attachment-line fs-16"></i>
                                </label>
                                <input type="file" name="Attachments" id="fileUpload" multiple="multiple" accept=".jpg,.jpeg,.pdf,.zip,.rar,.doc" style="display:none"/>
                            </div>
                        </div>      
                    <button type="submit" class="btn btn-sm btn-block dropdownStyling" id="break-submit" style="margin-left: -1rem; width:15rem;">Yorum Yaz</button>                            
                    </div>
                </div><!--end row-->
                <input asp-for="UyeId" style="visibility:hidden" />
                <input asp-for="SiparisId" style="visibility:hidden" />
                <input asp-for="CevapId" style="visibility:hidden" />
            </form>
        
        @section scripts {
            <script asp-location="Footer">              
        
                $(document).ready(function () {
        
                    // bind event to your form
                    $("#comment-form").submit(function (e) {
        
                        // prevent regular form submit
                        e.preventDefault();
                        var form = $(this);
                        var formData = new FormData(form[0]);
                        console.log(formData);
        
                        $.ajax({
                            url: '@Url.Action("Add","SiparisMesajlari")',
                            type: 'POST',
                            data: formData,
                            success: function (result) {
                                console.log(result);
        
                                // refresh
                                $(" #comment-form ").load(window.location.href + " #comment-form ");
                                //$(" .audioAlert ").load(window.location.href + " .audioAlert ");
                            },
                            error: function (err) {
                                console.log(err);
                            }
                        });
                    })
                });
        
        </script>
        }

它在模态视图和提交按钮（“Yorum Yaz”）中的形式：