jquery.blockUI.js kullanımı (mesaj, modal dialog v.b.) * mvc- web api- ajax reguest sırasında *

web apiden jquery ajax reguest ile çağırılan jsonresult sırasında "jquery.blockui" kullanarak "lütfen bekleyiniz" tarzında modal popup kullanımı. Ekran görüntüleri ve kodlar;














KODLAR : 

 HTML TARAFI :

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>web api test-- </title>


 <style>
div.growlUI {
background: url(images/tick_green.png) no-repeat 5px 5px
}

 div.growlUI h1, div.growlUI h2 {
color: white;
padding: 5px 5px 5px 75px;
text-align: left
}
    
</style>
<script src="Scripts/jquery-3.2.1.min.js"></script>
<script src="Security/config.js"></script>
<script src="Scripts/jquery.blockUI.js"></script>

 </head>
<body>
<div>
<p> 
<a href="ProductsListFromApi.html">Api den listele</a>
  </p>
<p>
<a href="sifreliindex.html">şifrelenmiş index sayfası</a>
</p>


   <ul id="products" />
</div>
<div>
<h2>Search by ID</h2>
<input type="text" id="prodId" size="5" />
<input type="button" id="btnARA" value="Search" />
<!--onclick="find();"--> 
<p id="PghProduct" />
</div>
   
<script>
var uri = 'api/Products';
 
function formatItem(item) {
return "Ürün Adı : " + item.ProductName + " -- Ürün ID : " + item.ProductID ;
  }

 function find() {
var id = $('#prodId').val();
$.ajaxSetup({
headers: {
'Api_key':  config.Api_Key ,
  }
});

 $.getJSON(uri + '/' + id)
.done(function (data) {
$('#PghProduct').text(formatItem(data));
})
.fail(function (jqXHR, textStatus, err) {
$('#PghProduct').html('Error: ' + err + "</br>" + new Date().toLocaleString());
});
//...............
//TODO: aşağısı, fonksiyon bazında unblock.
$.unblockUI();
//...............
}
</script>
<script type="text/javascript">
$("#prodId").on('keydown', function (e) {
if (e.which == 13) {
find();
 
}
});
 
</script>

 <script type="text/javascript">
$(document).ready(function () {
//TODO:aşağısı,sayfadaki herhangi bir ajax request bittiğinde kapatır(ajaxStop).
  //$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
//TODO:aşağısı, bit butona tıklandığında css vererek başlatıyor
//TODO: css vermeden: $.blockUI();
//TODO: mesaj vererek:$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
//TODO: basit css:$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });
//TODO: standart lütfen bekleyiniz mesajını,jquery.blockUI.js içinden de direkt değiştirilebilir................
$('#btnARA').click(function () {
  $.blockUI({
css: {
  border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
}
});
//...............
//setTimeout($.unblockUI, 500);//TODO:bu süre ayarlı kapanır.
//...............
find();
//...............
});
});
//...............
$.growlUI('Merhaba sayın kullanıcı..', 'Hoş geldiniz!');
//...............
</script>




</body >

</html >

KODLAR :

 WEB API CONTROLLER :
// GET: api/Products/5
[ResponseType(typeof(Products))]
public async  Task<IHttpActionResult> GetProduct(int id)
{
  var product = await (from u in db.Products
where u.ProductID == id
select new
{
u.ProductID
,u.ProductName
,u.UnitPrice
,u.SupplierID
,u.CategoryID
,u.QuantityPerUnit
,u.UnitsInStock
,u.UnitsOnOrder
,u.ReorderLevel
,u.Discontinued
,u.Categories.CategoryName
,u.Categories.Picture

 }).FirstOrDefaultAsync();

 if (product == null)
{
return NotFound();
}
return Ok(product);
}







Yorumlar

Yorum Gönder