Asp.net Web Form ile Modal üzerinden veri düzenleme ve Dropzone dosya yükleme işlemi.

Ürünler listemizde Boostrap Modal ve Javascript ile güncelleme yapacağız. Aynı zamanda bu işlemler esnasında Dropzone kütüphanesi ile dosya yükleme işlemlerimiz olacak.

Listemizde bulunan bir ürünü Modal ile açmak için onclick ile tetikleme yapıyor ve ürün id si gönderiyoruz.

<script>
        function details(id) {
            $('#productEdit .modal-body').load('/productDetail.aspx?id=' + id);

            $('#productEdit').modal();
        }
</script>

Burada productEdit id si bulunan modal'ın .modal-body classına sahip div içerisinde load('link') içerisindeki linki yükleyeceğiz. (  bu linkteki sayfa Modal için gerekli bootsrap html kodlarına sahip bağımsız bir sayfa olacak. Göndermiş olduğumuz id bilgisi ile ürün bilgileri içerisinde dolacak. Bu işleme farklı çözümlerde üretilebilir.

Urun Listesi sayfası Modal kodları ; 

    <div class="modal fade" id="productEdit" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="form">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ModalLabel">Ürün Detay / Düzenle</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body modal-xl">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Kapat</button>
                    <button class="btn btn-outline-success btn-block" onclick="Update()">Güncelle</button>
                </div>
            </div>
        </div>
    </div>

Ürün Detay sayfası Modal iç kısım kodları

        <form class="dropzone" id="dropzoneDiger">
            <div class="dz-message">
                <i class="ti-import text-primary font-40"></i>
                <div class="mt-3 font-20">Ürün Dosyaları</div>
                <div class="text-muted">(Ürün dosyalarını seçmek için tıklayın veya dosyaları bu alana sürükleyin.)</div>
            </div>
        </form>

Bu alanı Boostrap ile kendinize göre tasarlayabilirsiniz.
 

 

Bu kısımda Dropzone ile bağlantılı yaşadığım bir sorun vardı 

Uncaught Error: Invalid dropzone element.

hatası alıyordum  bu hatanın çözümü için Dropzone nesneniz ile ilgili bir kaç düzenleme gerekiyor.

Eğer dropzone nesneniz/leriniz aşağıdaki gibi ise ;
 

var Drp;
//Dropzone.options.dropzone = {
//    autoProcessQueue: false,
//    paramName: "file", // The name that will be used to transfer the file
//    url: "/FileUpload.aspx",
//    maxFiles: 15,
//    maxFilesize: 50, // MB
//    addRemoveLinks: !0,
//    parallelUploads: 20,

//    init: function () {
//        this.on("addedfile", function () {
//            this.removeFile(this.files[0]);
//        })
//    },
//    init: function () {
//        Drp = this;
//    }
//};

Bu şekilde güncelleyin;

Dropzone.autoDiscover = false;
var Drp;
$("#dropzone").dropzone({
    autoProcessQueue: false,
    paramName: "file", 
    url: "/FileUpload.aspx",
    maxFiles: 15,
    maxFilesize: 50, // MB
    addRemoveLinks: !0,
    //accept: function (file, done) {
    parallelUploads: 20,

    init: function () {
        this.on("addedfile", function () {
            this.removeFile(this.files[0]);
        })
    },
    init: function () {
        Drp = this;
    }
});

Dropzone tanımlamalarını yaptığınız script kod bloğunuzun en üstüne 

Dropzone.autoDiscover = false;

eklemelisiniz.

Sorunu bu şekilde çözebilirsiniz.
 

Artık update işlemlerinizi javascript/Ajax ve WebMethod aracılığı ile gerçekleştirebilirsiniz. İyi çalışmalar.