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..

Reklamlar

[Blog] Web Geliştiricilerin Visual Studio 2013 Yenilikleri Hakkında Bilmesi Gerekenler

Web Geliştiricilerin Visual Studio 2013 Yenilikleri Hakkında Bilmesi Gerekenler

Mahmut Can Sozeri

Merhaba Arkadaşlar,

Dün Visual Studio 2013 release oldu ve indirilmeye hazır. İşte Visual Studio 2013 için öne çıkan bazı notlar:

  • ASP.NET MVC 5, Razor 3, ASP.NET Web API 2, Entity Framework 6 ve SignalR 2.0 i içeren ASP.NET’in yeni versiyonu
  • Yeni ASP.NET, tek ASP.NET olmasına odaklanıldı yani temel özellikler ve web araçları tüm ASP.NET template leri arasında kullanılabilir. Örneğin ASP.NET MVC Controller’i, Web Forms Application a eklenebilecek
  • Yeni template lerin temeli Visual Studio 2013 Preview’da olduğu ve beklenildiği gibi Bootstrap oldu
  • Yeni Scaffolding sistemi getirildi
  • Yeni identity sistemi getirildi ki bu konu ile ilgili yazmak istediğim oldukça fazla yazı var

Yükleme Sırasında

vs2013_Ultimate

Eğer sadece Web Geliştirecekseniz, yukarıdaki gibi hızlı yükleme için “Microsoft Web Developer Tools” seçebilirsiniz. Diğer geliştirme araçlarınıda kullanacaksanız seçmeniz yeterlidir. Ek olarak eğer “Windows Phone 8.0 SDK” yükleyecekseniz, Windows 8.1 yüklemek zorundasınız.

Yükleme sırasında dikkat edeceksiniz, eğer hızlı bir internetiniz varsa yüklemenizde oldukça…

View original post 745 kelime daha

[Blog Post] ASP.NET MVC 5 ve SignalR ile 5 Dakika’da Chat/Mesajlaşma Uygulaması Yazmak

Asp.Net MVC5 SignalR Kullanımı

Mahmut Can Sozeri

Merhaba arkadaşlar,

Geçen sene yazımda bu 5 dakikada chat uygulamasının yazılmasını ingilizce olarak paylaşmıştım sizlerle. SignalR teknolojisi kullanarak yapacağım bu örnekte SignalR’ın işlev olarak çok küçük bir parçasını göstermiş olacağım. SignalR hakkında daha fazla bilgiyi buradan faydalabilirsiniz.

Hazırlık

Bu uygulamayı geliştirirken .Net Framework 4.5 ile Visual Studio 2013 Professional kullanacağım. Express sürümünü buradan indirebilirsiniz.

Uygulama

1) Visual Studio 2013’te New Project diyerek aşağıdaki gibi “ASP.NET Web Application” diyoruz.

SignalRileChatUygulamasi_ASPNETMVC_5

2) Empty template seçip, MVC içinde klasör ve temel referansları ekleyecek şekilde tamam diyoruz.

SignalRileChatUygulamasi_ASPNETMVC_5_EmptyMVC

3) SignalR kullanmamız için gerekli bazı dll ve javascript dosyaları var. Bunlar için Nuget package kullanacağız. Tools > Library Package Manager > Package Manager Console’a tıklayıp açıyoruz.

SignalRileChatUygulamasi_ASPNETMVC_5_EmptyMVC_NugetPackageConsole

4) Açılan konsola “Install-Package Microsoft.AspNet.SignalR” yazıyoruz ve Enter diyoruz.

SignalRileChatUygulamasi_ASPNETMVC_5_packageInstaller_Install-package-signalr-client

Gerekli yüklemeler yapıldıktan sonra solution’ımızın yeni durumu aşağıdaki şekilde olacaktır.

SignalRileChatUygulamasi_ASPNETMVC_5_packageInstaller_Install-package-signalr-client_visual_studio

5) Projemize ChatHub isminde bir SignalRHub Class ekliyoruz ve içerisine bir takım kodlar yazıyoruz.

SignalRileChatUygulamasi_ASPNETMVC_5_packageInstaller_Install-package-signalr-client_visual_studio_chatHubSignalR

SignalRileChatUygulamasi_ASPNETMVC_5_packageInstaller_Install-package-signalr-client_chatApplication

6) Startup Dosyası Oluşturuyoruz ve İçerisine…

View original post 25 kelime daha

C# ta PDF dosyası nasıl oluşturulur? (itextsharp)

ItextSharp Kütüphanesiyle Pdf Oluşturma

Cemelma'dan küçük hatırlatmalar

Fatura vb. pdf oluşturmak için itextsharp dll kullanılabilir. Nuget ile “Install-Package iTextSharp” komutu ile de yüklenilebilir. Dll’i buradan indirebilirsiniz.
Fatura oluşturmak için kullandığım method;

void BillSend() { #region kullanılan klasörleri oluştur if (!Directory.Exists(@"c:ITrack")) { Directory.CreateDirectory(@"c:ITrack"); Directory.CreateDirectory(@"c:ITrackimg"); Directory.CreateDirectory(@"c:ITrackpdf"); } #endregion #region Font seç BaseFont trArial = BaseFont.CreateFont(@"C:WINDOWSFontstahoma.ttf", BaseFont.IDENTITY_H, BaseFont.NOT_EMBEDDED); iTextSharp.text.Font fontArial = new iTextSharp.text.Font(trArial, 10, iTextSharp.text.Font.NORMAL, iTextSharp.text.BaseColor.DARK_GRAY); iTextSharp.text.Font fontArialHeader = new iTextSharp.text.Font(trArial, 13, iTextSharp.text.Font.BOLD, iTextSharp.text.BaseColor.BLACK); iTextSharp.text.Font fontArialbold = new iTextSharp.text.Font(trArial, 9, iTextSharp.text.Font.BOLD, iTextSharp.text.BaseColor.DARK_GRAY); iTextSharp.text.Font fontArialboldgeneral = new iTextSharp.text.Font(trArial, 10, iTextSharp.text.Font.BOLD, iTextSharp.text.BaseColor.BLACK); #endregion #region Fatura pdf oluştur iTextSharp.text.Document pdfFile = new iTextSharp.text.Document(); PdfWriter.GetInstance(pdfFile, new FileStream("C:ITrackpdfFirst.pdf", FileMode.Create)); pdfFile.Open(); #endregion #region Fatura oluşturan bilgileri pdfFile.AddCreator("ITrack"); //Oluşturan kişinin isminin eklenmesi pdfFile.AddCreationDate();//Oluşturulma tarihinin eklenmesi pdfFile.AddAuthor("ITrack v.1.0"); //Yazarın isiminin eklenmesi pdfFile.AddHeader("Başlık", "PDF UYGULAMASI OLUSTUR"); pdfFile.AddTitle("ITrack Aylık Fatura"); //Başlık ve title eklenmesi #endregion #region Fatura firma resmi ve tarihi oluştur iTextSharp.text.Image jpgimg = iTextSharp.text.Image.GetInstance(@"C:ITrackimgkipa.png"); jpgimg.ScalePercent(35); jpgimg.Alignment = iTextSharp.text.Image.LEFT_ALIGN; PdfPTable pdfTableHeader = new PdfPTable(3); pdfTableHeader.TotalWidth = 500f; pdfTableHeader.LockedWidth =…

View original post 213 kelime daha

Asp.Net Mvc Bir Excel Dosyasını Import Edip Table’a Kayıt Ekleme

Bu yazımda, projemize bir excel dosyası upload edip, excel dosyasındaki her satırı ilgili tablomuza kayıt olarak eklemeyi göstericeğim.

1. Öncelikle bir Controller ekleyelim, Controller ismi ImportFromExcel olsun. Index actionuna view sayfası ekleyelim. Index Viewı içine form elemanlarımız ekleyelim:

@using (Html.BeginForm("ImportExcelFileToDatabase", "ImportExcel", FormMethod.Post, new { enctype = "multipart/form-data" }))
{ 
<div>       
     <input type="file" id="FileUpload" name="FileUpload" required data-val="true"
data-val-required="please select a file"/>
            
     <input type="submit" id="Submit" class="submit" value="Upload" title="Click to upload file"/> 
        
</div>

}

Ekran görüntümüz şöyle olacaktır:

Capture

2. Sql Server’da örnek bir müşteri tablosu oluşturalım:

Customer

3. Daha sonra bir excel dosyası oluşturalım ve içinde de müşteriye ait satırlar ve sütıunlar oluşturalım.

ExcelPic

4. ImportExcel adlı oluşturduğumuz controller içine de formda post olmasını istediğimiz action name olarak belirttiğimiz ImportExcelFileToDatabase actionı ekleyelim:

[HttpPost]
public ActionResult ImportExcelFileToDatabase(HttpPostedFileBase FileUpload)
{
      try
      {
                DataSet ds = new DataSet();
                if (Request.Files["FileUpload"].ContentLength > 0)
                {
                    string fileExtension = System.IO.Path.GetExtension(Request.Files["FileUpload"].FileName);
 
                    if (fileExtension == ".xls" || fileExtension == ".xlsx")
                    {
                        string fileLocation = Server.MapPath("~/Content/") + Request.Files["FileUpload"].FileName;
                        if (System.IO.File.Exists(fileLocation))
                        {
 
                            System.IO.File.Delete(fileLocation);
                        }
                        Request.Files["FileUpload"].SaveAs(fileLocation);
                        string excelConnectionString = string.Empty;
                        excelConnectionString = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" +
                        fileLocation + ";Extended Properties=\"Excel 12.0;HDR=Yes;IMEX=2\"";
                        //connection String for xls file format.
                        if (fileExtension == ".xls")
                        {
                            excelConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" +
                            fileLocation + ";Extended Properties=\"Excel 8.0;HDR=Yes;IMEX=2\"";
                        }
                        //connection String for xlsx file format.
                        else if (fileExtension == ".xlsx")
                        {
                            excelConnectionString = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" +
                            fileLocation + ";Extended Properties=\"Excel 12.0;HDR=Yes;IMEX=2\"";
                        }
                        //Create Connection to Excel work book and add oledb namespace
                        OleDbConnection excelConnection = new OleDbConnection(excelConnectionString);
                        excelConnection.Open();
                        DataTable dt = new DataTable();
 
                        dt = excelConnection.GetOleDbSchemaTable(OleDbSchemaGuid.Tables, null);
                        if (dt == null)
                        {
                            return null;
                        }
 
                        String[] excelSheets = new String[dt.Rows.Count];
                        int t = 0;
                        //excel data saves in temp file here.
                        foreach (DataRow row in dt.Rows)
                        {
                            excelSheets[t] = row["TABLE_NAME"].ToString();
                            t++;
                        }
                        OleDbConnection excelConnection1 = new OleDbConnection(excelConnectionString);
 
 
                        string query = string.Format("Select * from [{0}]", excelSheets[0]);
                        using (OleDbDataAdapter dataAdapter = new OleDbDataAdapter(query, excelConnection1))
                        {
                            dataAdapter.Fill(ds);
                        }
                    }
                    if (fileExtension.ToString().ToLower().Equals(".xml"))
                    {
                        string fileLocation = Server.MapPath("~/Content/") + Request.Files["FileUpload"].FileName;
                        if (System.IO.File.Exists(fileLocation))
                        {
                            System.IO.File.Delete(fileLocation);
                        }
 
                        Request.Files["FileUpload"].SaveAs(fileLocation);
                        XmlTextReader xmlreader = new XmlTextReader(fileLocation);
                        // DataSet ds = new DataSet();
                        ds.ReadXml(xmlreader);
                        xmlreader.Close();
                    }
 
                    for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                    {
                        string conn = ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString;
                        SqlConnection con = new SqlConnection(conn);
                        string query = "Insert into TestExcelCustomerTable(Name,Surname,Tel, Address, Email) Values('" +
                        ds.Tables[0].Rows[i][0].ToString() + "','" + ds.Tables[0].Rows[i][1].ToString() +
                        "','" + ds.Tables[0].Rows[i][2].ToString() + "', '" + ds.Tables[0].Rows[i][3].ToString() + "', '" + ds.Tables[0].Rows[i][4].ToString() + "')";
                        con.Open();
                        SqlCommand cmd = new SqlCommand(query, con);
                        cmd.ExecuteNonQuery();
                        con.Close();
                    }
                    ViewBag.State = "Success";;
                }
                else
                {
                    ViewBag.State = "NoFile";      
                }
                return View("Index");
                
     }
     catch (Exception ex)
     {
          ViewBag.State = "Error";
          return View("Index");
     }
}

Böylece excel dosyasındaki tüm satırlar ve tüm sütunlar tabloya kayıt olarak eklenmiş olur.

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..
}

Asp.Net Mvc Projesinde ReCaptcha Kullanımı

Merhabalar bu yazımda herhangi bir projede güvenliği arttırmak için kullanılan googlea ait ReCaptcha apisinin Mvc projemizde nasıl kullanılacağını anlatacağım.

1. Öncelikle reCaptcha.dll dosyasını sitesinden indirin.

2. Projenize reCaptcha.dll dosyasını referans olarak dahil edin.

ReCaptchaReferans

 

 

 

 

 

3. Captcha validasyonun kullanmak için bir Action Filter oluşturun.

public class CaptchaValidatorAttribute : ActionFilterAttribute
    {
        private const string CHALLENGE_FIELD_KEY = "recaptcha_challenge_field";
        private const string RESPONSE_FIELD_KEY = "recaptcha_response_field";
 
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            var captchaChallengeValue = filterContext.HttpContext.Request.Form[CHALLENGE_FIELD_KEY];
            var captchaResponseValue = filterContext.HttpContext.Request.Form[RESPONSE_FIELD_KEY];
            var captchaValidtor = new Recaptcha.RecaptchaValidator
            {
                PrivateKey =  "-- SİZE AİT RECAPTCHA PRİVATE KEY --",
                RemoteIP = filterContext.HttpContext.Request.UserHostAddress,
                Challenge = captchaChallengeValue,
                Response = captchaResponseValue
            };
 
            var recaptchaResponse = captchaValidtor.Validate();
 
            // this will push the result value into a parameter in our Action  
            filterContext.ActionParameters["captchaValid"] = recaptchaResponse.IsValid;
 
            base.OnActionExecuting(filterContext);
        }
    }

4. Form Submit Olduğunda Captcha Validasyonunu Kullanmak için Controllerınızda bir Action Methodu Oluşturun.

[CaptchaValidator]
[AcceptVerbs(HttpVerbs.Post)]
 public ActionResult CreateComment(Int32 id, bool captchaValid)
 {
            if (!captchaValid)
            {
                ModelState.AddModelError("_FORM", "You did not type the verification word correctly. Please try again.");
                return View();
            }
            else
            {
                // If we got this far, something failed, redisplay form
                return View();
            }
        
}

Yukarıdaki oluşturduğumuz Action methoduna daha önce kendimiz oluşturduğumuz CaptchaValidator attribute dahil ettik. Bu attribute, Action Filtere giderek Captchanın doğruluğunu kontrol eder ve CreateCommand isimli Action methodu içindeki captchaValid değerine true veya false bir değer set eder.

5. Bir Html Helper Oluşturun ve Sayfanıza Bu Helperi Render Edin.

public static string GenerateCaptcha(this HtmlHelper helper)
        {
            var captchaControl = new Recaptcha.RecaptchaControl
            {
                ID = "recaptcha",
                Theme = "White",
                PublicKey = "-- RECAPTCHA PUBLİC KEY",
                PrivateKey = "-- RECAPTCHA PRİVATE KEY"
            };
 
            var htmlWriter = new HtmlTextWriter(new StringWriter());
 
            captchaControl.RenderControl(htmlWriter);
 
            return htmlWriter.InnerWriter.ToString();
        }

Şimdi ise View sayfanıza oluşturduğunuz Html Helper’ı render edin.

@Html.Raw(Html.GenerateCaptcha())

Şimdi ise nasıl bir sayfayla karşılaşacağımıza bakalım:

LoginReCaptcha

 

 

 

 

 

 

 

 

 

İşte bu kadar basit. https://www.google.com/recaptcha/admin#whyrecaptcha sitesinden de kendi recaptcha hesabınız için kullanacağınız Private Key ve Public Keyini elde etmeniz gerekmektedir. Şimdiden Kolay Gelsin.