Multi Task Search:
Selam arkadaşlar,
Bugün anlatacağımız pratik dersimizde, autocomplete ile birlikte çoklu arama yapacağız.
Sistemlerimiz üzerinde bulunan search kısmı ile birlikte kullanıcının aradığı text leri backend e alıp birçok alanda eşleştirerek kullanıcıya öneriler sunacağız.
Birçok derslerde olduğu gibi kendisinden ilham aldığım sevgili Bora Kaşmer hocamıza burdan teşekkürlerimi iletmeden geçmiyorum.
1) Arama sonucunun ekrana basılacağı div alanını oluştururuz.
<div class="divResult" id="searchDiv"></div>
2) Arama yapacağımız alanın html kodunu yazarız.
<input class="form-control mdb-autocomplete form-control-sm mr-3 w-75" name="itemcode" type="text" id="automplete" placeholder="Enter an item keyword..."aria-label="Search">
3) Aranan değeri post edeceğimiz script kodlarını yazarız.
$('#automplete').keyup(function (event) {
if (event.keyCode != 13 && event.keyCode != 37 && event.keyCode != 39) {
if ($.trim($(automplete).val()).length > 2) {
delay(function () {
var data = { searchKey: $('#automplete').val() };
$.ajax({
type: "POST",
data: data,
url: "/Content/MultiSearch",
success: function (data) {
$("#searchDiv").html(data);
$("#searchDiv").show();
},
error: function (error) {
if (error.status == 500) {
window.location.href="/Home/Index";
} else {
if (error.status != 0) {
alert(err.statusText);
}
}
}
})
}, 500);
} else {
$("#searchDiv").hide();
}
}
})
var delay = (function () {
var timer = 0;
return function (callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
4) Controller tarafında post ettiğimiz kod içeriği:
- Oluşturduğumuz task sayısı aynı anda yapcağımız işlem sayısı olarak düşünebilirsiniz.
- Dönüş tipi olarak partialviewresult döneceğiz.Döndüğümüz bu değeri ekrana basacağız.
-Not:Dönüş için _SearchResult adında partialview oluşturmamız gerekiyor.
public async Task MultiSearch(string searchKey)
{
try
{
var tasks = new Task[3];
int i = 0;
SearchModel viewModel = new SearchModel();
viewModel.SearchKey = searchKey;
List TaskList = GetSeachResult(searchKey, viewModel);
foreach (Task tsk in TaskList)
{
tasks[i] = tsk;
i++;
}
await Task.WhenAll(tasks);
return PartialView("_SearchResult", viewModel);
}
catch (Exception ex)
{
_logger.LogCrud(_loggedUser.RegisterId, Data.Enum.CrudEnum.Error.ToString(), ex);
throw;
}
}
--Arama Yapılan method:
private List GetSeachResult(string search, SearchModel model)
{
List Tasks = new List();
var taskWithKeyword1 = Task.Factory.StartNew(() =>
{
model.ItemMasterWithKeyword = _itemservice.getItemListWithKeyword(search);
if (model.ItemMasterWithKeyword.Count()>0)
{
model.ItemImages = _itemservice.getmatchingitemskeyword(model.ItemMasterWithKeyword);
Tasks.Add(taskWithKeyword1);
}
});
var taskWithKeyword2 = Task.Factory.StartNew(() =>
{
model.ItemMasterWithKeyword = _itemservice.getItemListWithKeyword(search);
if (model.ItemMasterWithKeyword.Count()>0)
{
model.ItemImages = _itemservice.getmatchingitemskeyword(model.ItemMasterWithKeyword);
Tasks.Add(taskWithKeyword2);
}
});
var taskWithKeyword3 = Task.Factory.StartNew(() =>
{
model.ItemMasterWithKeyword = _itemservice.getItemListWithKeyword(search);
if (model.ItemMasterWithKeyword.Count()>0)
{
model.ItemImages = _itemservice.getmatchingitemskeyword(model.ItemMasterWithKeyword);
Tasks.Add(taskWithKeyword3);
}
});
_logger.LogCrud(_loggedUser.RegisterId, Data.Enum.CrudEnum.View.ToString(), taskWithKeyword);
return Tasks;
}
5)Methodumuzdan dönen modelimizi oluşturduğumuz partialview e göndeririz.Böylece gönderdiğimiz modeli partialview üzerinden ana ekranda göstermiş oluruz.Örnek olarak partialview kodları.
@model Data.DTO.SearchModel
<div class="card">
<div class="card-header">
<div class='MenuItemHeader SearchResultHead'>
<div class='SearchResultHeadLeft'>Item Keyword Contains</div><div class='SearchResultHeadRight'>
</div><div class='clear'></div>
</div>
</div>
<div class="card-body">
<div>
@if (Model.ItemMasterWithKeyword.Count() > 0)
{
<table class="table table-bordered">
<thead>
<tr>
<th class="font-weight-bold">Item Picture</th>
<th class="font-weight-bold">Item Code</th>
<th class="font-weight-bold">Item Keywords</th>
<th class="font-weight-bold">Go Item</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.ItemMasterWithKeyword)
{
<tr>
<td>
@if (Model.ItemImages.Count > 0)
{
@foreach (var item2 in Model.ItemImages.Where(x => x.ItemCode == item.ItemCode))
{
if (item2.ItemCode != null)
{
<img src="/Images/ProjectImages/@item2.ItemImagePath" width="50" height="50" alt="">
}
else
{
<img src="~/uploads/no-images/no-images.jpg" width="50" height="50" />
}
}
}
else
{
<img src="~/uploads/no-images/no-images.jpg" width="70" height="70" />
}
</td>
<td class='SearchResultItem'>
@Html.Raw(item.ItemCode)
</td>
<td>@item.ItemKeywords</td>
<td>
<a href="@Url.Action("ItemDetail","Content",new {itemcode=item.ItemCode })" class="btn btn-sm btn-primary">View</a>
</td>
</tr>
}
</tbody>
</table>
}
else
{
<span class="badge badge-warning">No Result</span>
}
</div>
</div>
</div>
Sonuç olarak arama yaptığımız değer ile eşleşen sonuçlarımızı partialview ile ekrana gönderiyoruz.
Temsili örnek olarak aşağıdaki görüntüyü bırakıyorum.
Bir sonraki makalede görüşmek dileğiyle.
Kayıtlar
