none
Asp.Net MVC Bootsrap modal popup hakkında yardım edebilirimisiniz. RRS feed

  • Soru

  • Merhabalar...

    Mvc ile ilgi bir proje çalışıyorum ancak bir yerde takıldım yardımcı olursanız çok sevirim.

    Yapmak istediğim şu.

    verilerimi controllerden kaydettikten sonra yani db.savechange() yaptıktan sonra "Kayıt Başarılı" gibi bir popup yapmak istiyorum. Ancak ne hikmetse internette hep bir butona bağlı popup görüyorum.

    Ben controllerden  tetiklenecek bir popup yapmak istiyorum.

    Bunu nasıl yapabileceğim. 

    Yardımcı olursanız çok sevinirim.

    19 Kasım 2017 Pazar 19:42

Yanıtlar

  • Sadece bir şey gerçek anlamda modal türü pencereler programı kestiği için kullanıcı açısından çok da iyi bir arayüz tasarımı olmuyor bence. "Kayıt başarılı" programı kesmek için o derece önemli bir mesaj değil. Bu daha çok bilgi amaçlı. O nedenle bu tür mesajları toastr gibi notify eklentilerini kullanarak verebilirsiniz. Toastr'inin helpinde mvc için nasıl entegre edileceği adım adım açıklanmış durumda. Hem kullanıcı tarafında js ile hem de server tarafından sayfaya dinamik js script gömerek kullanılabiliyor.

    pgnchess.com

    dergikapaklari.com

    • Yanıt Olarak İşaretleyen CÜNEYT.A 22 Kasım 2017 Çarşamba 19:05
    21 Kasım 2017 Salı 12:54

Tüm Yanıtlar

  • Controller a isteği nasıl gönderiyorsunuz?

    Ajax ile gönderiyorsanız success callback fonksiyonunda 

    $('#modalID').modal('show');

    şeklinde gösterebilirsiniz. 

    Yok eğer doğrudan sayfaya link veriyorsanız o zaman işlem sonucunu Model, Viewbag, ViewData gibi yapılar ile taşıyarak view içinde bunu kontrol edip yine gösterebilirsiniz. Örneğin

    //Controller 
    public ActionResult Save(TestModel model)
    {
      bool saveResult;
      ......
      int result = db.SaveChanges();
      saveresult = result > 0;
      ViewBag.Result = saveresult;
      return View();
    }
    
    
    //View
    
    <script>
      $(function() {
       if(@ViewBag.Result) {
          $('#modalID').modal('show');
       }
    
      });
    
    </script>
    şeklinde

    20 Kasım 2017 Pazartesi 06:37
  •     <div class="container">
            <h2>Modal Example</h2>
           
    
            <!-- Modal -->
            <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog">
    
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Modal Header</h4>
                        </div>
                        <div class="modal-body">
                            <p>Some text in the modal.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
    
                </div>
            </div>
    
        </div>
    
    
        <script>
            $(function() {
                if(@ViewBag.Result) {
                   $('#myModal').modal('show')
            }
    
            });
    
        </script>

    Bu şekilde yapıyorum scripteki alttaki iki süslü parantezde hata veriyor ve popup çalışmıyor :(

    İstediğim tam bu şekildeydi.

    20 Kasım 2017 Pazartesi 17:59
  • ilgili action da ViewBag.Result = true şeklinde bir atama var mı? Kodları paylaşabilir misiniz?
    21 Kasım 2017 Salı 06:21
  • Sadece bir şey gerçek anlamda modal türü pencereler programı kestiği için kullanıcı açısından çok da iyi bir arayüz tasarımı olmuyor bence. "Kayıt başarılı" programı kesmek için o derece önemli bir mesaj değil. Bu daha çok bilgi amaçlı. O nedenle bu tür mesajları toastr gibi notify eklentilerini kullanarak verebilirsiniz. Toastr'inin helpinde mvc için nasıl entegre edileceği adım adım açıklanmış durumda. Hem kullanıcı tarafında js ile hem de server tarafından sayfaya dinamik js script gömerek kullanılabiliyor.

    pgnchess.com

    dergikapaklari.com

    • Yanıt Olarak İşaretleyen CÜNEYT.A 22 Kasım 2017 Çarşamba 19:05
    21 Kasım 2017 Salı 12:54
  • Halil bey mükemmel bir insansınız. süper oldu...

    Benim gibi araştıran arkadaşlar için izin verirseniz kodları koymak istiyorum.

    Controller kısmında kayıt işlemi yapıyorum ve sonunda db.Savechange(); sonun aşağıdaki kodları ekliyorum.

    VeliBilgileri VeliBilgileriEkle = new VeliBilgileri()
                    {
                        Ogrenci_id = OgrenciIdYakalama,
                        VeliAdiSoyadi = model.VeliAdiSoyadi,
                        VeliMail=model.VeliMail,
                        VeliTel=model.VeliTel,
                        YakinlikDereceleri_id=(int)model.YakinlikDereceleri_id,                
                    };
                    db.VeliBilgileris.Add(VeliBilgileriEkle);
    
                    
                    int KayitDurumu = db.SaveChanges();               
                    if (KayitDurumu > 0)
                    {
                        ViewBag.Success = true;
                        ViewBag.Message = "Kayıt Başarıyla Eklendi";
                    }
                    
                    return View();

    Yukarıda kayıt işlemi yaptım ve ViewBag içine kayıt durumu gerçekleşti ve gösterilecek bilgiyi ekledim.

    Şimdi View kısmına geldik.

    en başına şunu ekliyoruz.

     <link href="~/Content/toastr.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-3.2.1.js"></script>
        <script src="~/Scripts/toastr.js"></script>
       
    
    
            @if (ViewBag.Success == true)
            {
            <script type="text/javascript">
                window.onload = function () {
                     toastr.success("@ViewBag.Message");
                    
                };
        </script>
            }

    bunlarıda ekledik. Burada mutlaka toastın çalışması gereken

    toastr.css
    jquery-3.2.1.js
    toastr.js

    bunları mutlaka eklememiz gerekiyor. 

    Artık çalıştırma zamanı. Ekranda kayıt başarılı olduğunda uyarı mesajı geliyor.ve bunu istediğiniz gibi ayarlıyorsunuz. Sayfanın sağ üst köşesi, alt,sol, sol üst vs.. ve istediğiniz süre kadar kalabiliyor veya tamam butonu ekleyip kapatabiliyorsunuz.

    umarım bu yazdıklarım arkadaşlara yardımcı olur.

    Herkese başarılı kod yazmalar dileğiyle...

    22 Kasım 2017 Çarşamba 19:15
  • Merhaba,

    Yazmış olduğun kodları kendi uygulamama ekledim ama maalesef sende çıkan popup bende çıkmıyor. scirpt'leri view'ın en altına ekledim. Acaba etkisi olur mu ? Farklı bir yere mi yazmalıyım ? Controller kodlarını da kullanıcı kaydını yaptığım alanda db.savechanges() altına ekledim. nuget'tan toastr'yi de download ettim. Neden çalışmadığını çözmedim. Yapılması gereken başka bir şey varsa yazabilir misin ? Teşekkür ederim.

    20 Nisan 2018 Cuma 16:30