MVC Popup Modal

  1. ibrahimkarali
    3
    20
    9.06.2020 18:12:00

    Herkese merhaba, MVC ile geliştirmeye çalıştığım bir projem var. Controller üzerinden View e liste gönderip dataları listeliyorum. Her datanın sonunda bir buton var bu butona tıklandığında seçili elemanın bilgilerini popup modal üzerinden nasıl gösterebilirim? Yardımcı olabilecek birisi var mı ? Ajax tarafında biraz araştırma yaptım ama post işlemini gerçekleştiremedim.

    asp.net-mvc ajax 2 ay önce 131 Görüntüleme

( 1 ) Cevap

  1. mfatih
    2
    4703
    10.06.2020 15:20:00

    Popup açmak için aşağıdaki linke bir göz atabilirsin.

    https://code.replyfeed.com/sorular/3412/lightbox-popup-acma

    Popup ı açtın, içini nasıl dinamik oalrak dolduracağım dersen, dediğin gibi Ajax kullanacaksın, Ajax post yapmana gerek yok, Get işlemi ile de çözebilirsin.

    1) Tam butona basınca, jquery ile basılan butonun id sini alacaksın.(Her datanın sonunda var dediğin her butona ilgili kaydın id sini verdiğini varsayıyorum)

    2) Ajax Get ile Mvc Controller tarafındaki action a istek atıp o id nin verilerini çekiyorsun.

    3) Ajax Get işlemi başarılı ise, veriyi alıp, açacağın modalın içinin html kısmını dinamik olarak hazırlıyorsun

    4) Dinamik olarak elinde göstermek istediğin veri Html oalrak var, artık geriye modalın içine basıp açaman kalıyor

    Yani sana verdiğim linkte, butona basınca bir eventin başladığı şu kısım

     $(document).ready(function(){
        //otomatik açma // bir butona tıklayınca
        //açmak için alttaki satırı jquery buton eventi içine koyun
        $("#modalCodeReplyFeed").modal('show');
    });
    

    sende şu şekilde olacak, 3 tane de butonun olsun;

    <button id="1"></button>
    <button id="2"></button>
    <button id="3"></button>
    

    buton tıklayınca ;

    $("button").click(function() {
    
        //hangi butona bastıysa o id
        var userId = this.id;
        $.ajax({
            url: "/User/GetUser",
            cache: false,
            data: {
                UserId: userId
            },
            success: function (data) {
    
               //data senin mvc controller tarafından gelen data
                if (data != null ) {
                    //burada data ile dinamik html ini oluştur
                     var html = "<p>Hoşgeldin </p>" + data.userName +"</br>"+ data.userLastName ;//dinamik html oluşturma
                     $("#modalCodeReplyFeed").append(html);//modalın içine html ini bas.
                     $("#modalCodeReplyFeed").modal('show');//sonrada popupını aç
                }
            },
            error: function (html) {
    
            }
        });
    
    
    }); 
    

    bu kadar,

Cevabınız