ASP NET CORE RAZOR PAGE BAKIM TEKNİK SERVİS PROJESİ 044 SWEET ALERT JAVASCRIPT MODAL KULLANIMI

Bu dersimizde modal popup kullanımı ile ilgili örnekleme yapmak istiyorum. Modal Popup olarak Sweet Alert kullanacağım. Modal Popu nedir bilmeyenler için tek bir tümcede açıklamak gerekirse, açılılr pencere olarak düşünebilirsiniz. Herhangi bir uyarı penceresi, herhangi bir bilgi girişi için kullanılan asıl sayfamıza bağımlı bir grafik kontrol üyesidir modal popup pencereleri.

Daha detaylı anlatım ve kod takibi için video:

Sweet Alert için aşağıdaki sayfaya giriyor ve burada yer alan CDN kısmındaki kodu kopyalıyorum.

https://sweetalert.js.org/guides/

Bu kodu ben bakımlar için oluşturduğum Create sayfasının fornt end tarafında yani ilgili view alanında javascript için oluşturacağım section bölümünde kullanacağım.

Daha detaylı bilgi ve kod takibi için video eğitime göz atınız.

@page
@model GursoyCNCBakim.Pages.Bakimlar.CreateModel
@{
    ViewData["Title"] = "Create";
    Layout = "~/Pages/Shared/_Layout.cshtml";
}


    

        
Yeni Bakım Oluştur
    

    

        Listeye Geri Dön
    





    

        

            

                
            

            

                @Model.MakineBakimHizmetiViewModel.Makine.ApplicationUser.AdSoyad

                @Model.MakineBakimHizmetiViewModel.Makine.ApplicationUser.Email / @Model.MakineBakimHizmetiViewModel.Makine.ApplicationUser.PhoneNumber

            

            

                @Model.MakineBakimHizmetiViewModel.Makine.Marka @Model.MakineBakimHizmetiViewModel.Makine.Model 

                @Model.MakineBakimHizmetiViewModel.Makine.MakineTipi @Model.MakineBakimHizmetiViewModel.Makine.Yil
            
            

                
            
        

        

            

                

                    
                    
                    
                    
                    

                    

                        

                            

                                
Bakım Ekle
                            

                            

                                

                                    

                                     
                                    

                                    

                                        
                                            Ekle                                    

                                
                            
                        
                    

                    

                        
Bakim Özet Bilgi
                        @if (Model.MakineBakimHizmetiViewModel.BakimHizmetKart.Count == 0)
                        {
                            

                                Herhangi bir bakım tipi eklenmemiştir. Lütfen bakım hizmeti için ilgili bakım tipini seçiniz!
                            
                        }

                        else
                        {
                            

                                

                                    

                                        @foreach (var item in Model.MakineBakimHizmetiViewModel.BakimHizmetKart)
                                        {
                                            
                                        }

                                        

                                        

                                            
@Html.DisplayNameFor(a=>Model.MakineBakimHizmetiViewModel.BakimTipleriListesi.FirstOrDefault().BakimAdi)
                                            
@Html.DisplayNameFor(a=>Model.MakineBakimHizmetiViewModel.BakimTipleriListesi.FirstOrDefault().BakimFiyati)
                                            



                                        

                                                
@Html.DisplayFor(a=>item.BakimTipi.BakimAdi)
                                                

                                                    @Html.DisplayFor(a=>item.BakimTipi.BakimFiyati)
                                                
                                                

                                                    
                                                        
                                                    
                                                
                                               
                                            

                                            

                                                
Toplam Fiyat:
                                            
                                            

                                                
@Model.MakineBakimHizmetiViewModel.BakimHizmetiGenel.ToplamFiyat   TL
                                            
                                        

                                    
                                

                                

                                    

                                        


                                            Makine Saati:
                                            @**@
                                        

                                        

                                            
                                        

                                    

                                    

                                        

                                            
                                        
                                    

                                    

                                        

                                            Bakım Tamamlandı
                                        
                                    
                                
                            

                            

                        }

                    

                
            
        


    





@section Scripts{ 







}

Test ettiğimizde çalıştığını göreceğiz.