Herkese merhaba,
Bugün sizlerle sitelerimizde veya uygulamalarımızda kullanacağımız yükleniyor simgesinin yapımı hakkında konuşacağız.
Özellikle uzun sürecek işlemlerin sağlıklı olması adına basit bir şekilde bu yöntem kullanılabilir.
Göstereceğimiz yapının mantığı aslında şöyle;
Display none olan bir div alanımızın içerisinde bulunan .gif uzantılı resmimizi,
Form submit işleminin ardından görünür hale getirmek.
Böylece form submit işlemi başladığında bir diğer sayfamıza geçiş yaparken resmimizin gözükmesi ile yükleniyor ifadesi ekranda olacaktır.
1 ) Html BeginForm ile formumuzu oluşturuyoruz.
@using (Html.BeginForm("AddData", "Home", FormMethod.Post, new { id = "myform", enctype = "multipart/form-data" }))
{
<div class="form-group">
<label class="control-label">Kullanıcı:</label>
<div>
<input type="text" class="form-control input-lg" name="Name" value="@Model.Name @Model.Surname" readonly>
</div>
</div>
<div class="form-group">
<label class="control-label">Sicil:</label>
<div>
<input type="text" class="form-control input-lg" name="RegisterId" value="@Model.RegisterId" readonly>
</div>
</div>
<div class="form-group">
<label class="control-label">Dosya Yükle:</label>
<div>
<input type="file" class="form-control" name="File" required>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-sm btn-primary">Yükle</button>
</div>
}
2 ) Display none olarak div alanımızı ayarlarız.İçerisine dilerseniz bootstrap in sağladığı spinner yapısı yada gif koyabilirsiniz.
Örnek spinnerler için tiklayiniz
<div id="myLoadingElement" class="spinner-border text-primary" role="status" style=" display:none; width:80px; height:80px;">
<span class="visually-hidden"></span>
</div>
3 ) Son olarak id'sini belirlediğimiz form için submit işlemi gerçekleştiğinde div alanını görünür hale getiririz.
$("#myform").submit(function (e) {
$("#myLoadingElement").show();
});
İşlemlerin sonunda verdiğimiz div ekranda belirir ve diğer sayfaya geçiş olana dek ekranda görüntülenir.
Bir sonraki yazıda görüşmek üzere.
Loading...
Kayıtlar
