Html Contenti jsPDF Kütüphanesi ile Pdf Olarak Export Etmek

Merhaba, bu yazımda render edilmiş herhangi bir html viewi (imageler da dahil olmak üzere) pdf olarak nasıl export ediceğimizden bahsedeceğim.

Öncelikle  sayfamızın header kısmına 2 farklı script kütüphanesi import etmemiz gerekiyor.


<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

Pdf olarak export edeceğimiz divi ekleyelim :

<div id="content" style="background-color: white;">
// Content Here
</div>
<button id="cmd" class="button btn-block">PDF Export</button>

‘content’ id’li divin içerisine her türlü html elementi ekleyebilirisiniz. Image tipindeki inputlar da dahil olmak üzere div içerisindeki tüm contenti pdf içerisinde görüntüleyebilirsiniz. Aşağıda ise jsPDF kütüphanemizi kullanarak pageContent.pdf dosyasına export eden basit bir jquery kodumuz bulunuyor.

$('#cmd').click(function () {
     var options = {
            pagesplit: true
      };
      var pdf = new jsPDF('p', 'pt', 'a4');
         pdf.addHTML($("#content"), 15, 15, options, function () {
               pdf.save('pageContent.pdf');
       });
});

İşte bu kadar basit. İyi Çalışmalar.

Reklamlar

DataTables Kullanımı

DataTables Kullanımı

ALİ ÖZDEMİR

Web projeleri geliştirilirken en çok kullanılan kontrollerin başında şüphesiz verilerin gösterileceği gridler gelir.Bu nedenle bugün sizlere DataTables hakkında bilgi vermek istiyorum.
DataTables geliştiricilere kod yazmadan; sıralama, sayfalama, çıktı alma gibi özellikler sunabilen özelleştirilmiş bir kontroldür. Detaylı bilgi için http://www.datatables.net/ bu siteyi ziyaret edebilirsiniz.

Örneğimiz herhangi bir kaynaktan edindiğimiz verileri bir tablo üzerinde sergilemek.
Asp.net mvc projemde bir view sayfam ve burada ise bir tablo var. Kodlar şu şekidle,

<table id=”tblCustomer” class=”table table-striped table-bordered”>
<thead>
<tr>
<th>
Adı
</th>
<th>
Yaşı
</th>
<th>
Adres
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.Name</td>
<td>@item.Age</td>
<td>@item.Address</td>
</tr>
}
</tbody>
</table>
Daha sonrasında ise sayfama DataTable ın özelliklerini kullanabilmem için script kodlarımı ekliyorum.

@section scripts{

$(document).ready(function () {
$(‘#tblCustomer’).dataTable();
});

}

Yukardaki kodda da görüldüğü gibi tblCustomer idsine sahip olan tabloyu datatable yap diyoruz.Çıktı aşağıdaki gibi oluyor.

DataTablesImg

DataTable ayrıca bootstrap ile geliştirilmiş projelere çok uygun. Örnek olarak buraya bakabilirsiniz.
http://www.datatables.net/manual/styling/bootstrap

View original post

Bir Formu Post Etmeden Önce Client Tarafında Validation Kontrolünün Yapılması

Bazen bir formu post etmeden önce client tarafında spesifik olarak ön tarafta validation kontrolü yapmak isteyebiliriz. Server side kısmında yapılan kontroller biraz daha işimizi uzatabilir. Mesela bir email adresinin validationu veya yüklenecek bir dosyanın boyutunun kontrolünü formu post etmeden önce jquery ile yapmak isteyebiliriz. Bunu bir örnekle göstermek istiyorum. Formumuz şu şekilde olsun :

<form action="@Url.Action("SaveDocuments", "ImportCsv")" id="Form1" method="post" enctype="multipart/form-data">
    <div class="divmain">
        <div class="divlefttext">
            CSV Dosyası Seçiniz
        </div>
        <div class="divleftinput">
            <input type="file" id="fileCsv" name="fileCsv" />
        </div>
    </div>
    <div class="divmain">
        <div class="divlefttext">
        </div>
        <div class="divleftinput">
            <input type="submit" id="UploadFile" />
        </div>
    </div>
</form>

Yukarıdaki fileCsv id’li file tipindeki input elemanına dosya yüklenip yüklenmediğini kontrol etmek için şu scripti kullanabiliriz:

$("#Form1").submit("click", function () {
            var fileInputDP = document.getElementById('fileCsv');
            if (fileInputDP.files.length == 0) {
 
                $.jGrowl("Lütfen bir csv dosyası seçiniz..", {
                    life: 3000,
                    type: "error",
                    position: 'bottom-right'
                });
                return false;
            }
            else {
 
                var status = confirm("Dosyayı Yüklemek İstediğinizden Emin misiniz?");
                if (status == false) {
                    return false;
                }
                else {
                    $('input[type=submit]', this).attr('disabled', 'disabled');
                    $('body').oLoader({
                        wholeWindow: true, //makes the loader fit the window size
                        lockOverflow: true, //disable scrollbar on body
 
                        backgroundColor: '#000',
                        fadeInTime: 1000,
                        fadeLevel: 0.4,
                        image: '../Images/oLoader/loader4.gif',
                        //hideAfter: 1500
                    });
                    return true;
                }
            }
        });

Yukarıdaki script kod bloğunda yüklenen dosya uzunluğu 0 ise yani dosya yüklenmemişse false döner ve form post olmaz. Aksi durumda da true değer döner ve form post olur. Aynı şekilde jquery confirm() methodundan dönen result ile de formun post olup olmayacağına yönlendirebiliriz.

Formun post işlemi esnasında loading paneli göstermek için ise oLoader.js kullandım. Bu kütüphane ile yapılmış load paneli örneklerini http://projects.ownage.sk/jquery/oLoader/examples sitesinden görebilirsiniz. Benim projemde çalışan load ekranı ise şu şekilde:

Capture

Kolay Gelsin. İyi çalışmalar diliyorum.

Jquery ile TextBox’ta Kalan Karakter Sayısını Hesaplama

Bu yazımda twitterdan da aşına olduğumuz karakter sayısı sınırlı olan bir input girişinde kullanıcıyı girdiği karakter sayısına göre uyaran bir jquery scripti yazacağız.

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $.enFazlaKarakterSayisi = 50;
        $.karakterSayisi = $("#durum").val().length;
        $.kalanKarakterSayisi = $.enFazlaKarakterSayisi - $.karakterSayisi;
        $("#kalanKarakterSayisi").text($.kalanKarakterSayisi + " karakter kaldı").css("color", "grey");
 
        $("#durum").keyup(function () {
            $.karakterSayisi = $("#durum").val().length;
            $.kalanKarakterSayisi = $.enFazlaKarakterSayisi - $.karakterSayisi;
            $("#kalanKarakterSayisi").text($.kalanKarakterSayisi + " karakter kaldı");
            if ($.kalanKarakterSayisi > 20) {
                $("#kalanKarakterSayisi").css("color", "grey");
                $("#durumGonder").removeAttr("disabled");
            }
            else if ($.kalanKarakterSayisi >= 0) {
                $("#kalanKarakterSayisi").css("color", "#5c0000");
                $("#durumGonder").removeAttr("disabled");
            }
            else {
                $("#kalanKarakterSayisi").css("color", "red");
                $("#durumGonder").attr("disabled", "disabled");
            }
        });
    });
</script>
</head>
<body>
    <div>
        <input type="text" id="durum" style="width:300px;" /><br />
        <input type="button" id="durumGonder" value="Gönder" />
    </div>
    <div id="kalanKarakterSayisi"></div>
</body>

Ekran görüntülerimiz işe şu şekilde olacaktır:

Capture1

Capture2

Capture3

Herkese iyi çalışmalar..

Email ve Telefon Alanını Regular Expression ile Validate Etmek

Merhaba. Bu yazımda bir modelde telefon veya email alanına validate için attribute eklemeden regular expression ifadelerle bu alanları nasıl validate edebileceğimizi göreceğiz.

Öncelikle bir .js uzantılı bir dosya ekleyelim; adı validate.js olsun ve içine regular expression ifadelerini içeren scriptleri ve functionları ekleyelim.

function validateEmail(email) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}
 
function validateTel(tel) {
    var re = /\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/;
    return re.test(tel);
}

Daha sonra kullanacağımız view sayfasına oluşturduğumuz js dosyasını import edelim

<script src="~/Scripts/Validate.js"></script>

Bundan sonra ise yapmamız gereken view sayfamızda validate.js dosyasının içindeki fonksiyonları kullanmak. Bu fonksiyonlara email veya tel input id’sini göndermek, oradan boolean bir ifade elde etmek.

if (validateEmail($("#emailtext").val())) {
    // Email validate olduğunda yapıalacak olanlar..             
}
if (validateTel($("#teltext").val())) {
    // Tel numarasını validate olduğunda yapılacak olanlar..
}

Jquery Append Methodu

Herhangi bir html etiketi içine html girdileri eklemek için Jquery’de append() methodu kullanılır. Mesela html <select> tagı içine bir veya birden çok <option> tagı eklemek için şöyle bir scriptten yararlanabiliriz.

$.each(criterias, function (index, criteria) {
      $('#SelectItems').append('<option value="' + criteria.sno + '">' + criteria.DisplayName + '</option>');
                                });

Jquery ile Css Tanımlama

Eğer bir elementin içinde style tanımlamak istemiyorsanız veya bazı eventlar tetiklendiği an style’i değiştirmek isterseniz bunu Jquery’nin css() methodu ile yapmanız mümkün. Örneğin istenilmeyen bir durumla karşılaşıldığında veya validationdan bir hata fırlatıldığında text alanının border özelliklerini bu şekilde değiştirebiliriz

$("#emailtext").css({ "border": "1px solid #f00" });

Tekrar eski haline getirmek istersek ise :

$("#emailtext").css({ "border": "" });