CSS3 / Genel / HTML5 / Javascript / Jquery / MVC / Web
20

Mvc ile Gelişmiş Arama

Yazar: borsoft · 29 Mart 2015

Selamlar arkadaşlar;

Bugün Mvc ile asenkron, multitasking, jquery post bir arama yapıp sonuçları Partail View dönen bir web uygulaması yazacağız.

Öncelikle boş bir DetaylıAra adında Mvc Web Application yaratılır.

Index.cshtml: Arama yapılacak Index sayfası aşağıdaki gibi kodlanmıştır. Sayfanın tepesinde gözüken bir header, içine logo ve detaylı aramanın yapılacağı txtSearch id’li ‘textbox’. Ve yanına arama button’u konur. Hemen aşağısında aram sonuçlarının içine basılacağı ‘searchDiv’ bulunmaktadır.

<body>
    <!-- HTML for SEARCH BAR -->
    <div id="searchHead">
        <div id="tfheadsearch">www.borakasmer.com</div>
        <img src="~/Content/bk.png" width="60" style="padding: 10px;" />
        <form id="tfnewsearch">
            <table>
                <tr>
                    <td>
                        <input type="text" id="txtSearch" class="tftextinput2" name="q" size="21" maxlength="120" value="Detaylı ara?"><input type="button" value=">" class="tfbutton2" id="srcButton">
                    </td>
                </tr>
                <tr style="background-color:#C7DDE2">
                    <td>
                        <div class="divResult" id="searchDiv"></div>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</body>

<body>

<div id="tfheadsearch">www.borakasmer.com</div>

<table>

<tr>

<td>

<input type="text" id="txtSearch" class="tftextinput2" name="q" size="21" maxlength="120" value="Detaylı ara?"><input type="button" value=">" class="tfbutton2" id="srcButton">

</td>

</tr>

<td>

</td>

</tr>

</table>

</form>

</div>

</body>

Index.html için oluşturulan Css dosyası: Header ile alakalı stillerin tanımlaması aşağıdaki gibi yapılmıştır.

 <!-- CSS styles for standard search box with placeholder text-->
    <style type="text/css">
        #searchHead {
            background-color: #c3dfef;
        }
        #tfheadsearch {
            float: left;
            padding: 20px;
            font-style: italic;
            font-family: 'Arial Rounded MT';
            color: purple;
            font-size:xx-large;
        }

        #tfnewsearch {
            float: right;
            padding: 20px;
        }		
        .tftextinput2 {
            margin: 0;
            padding: 5px 15px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #666;
            border: 1px solid #0076a3;
            border-right: 0px;
            border-top-left-radius: 5px 5px;
            border-bottom-left-radius: 5px 5px;
        }

        .tfbutton2 {
            margin: 0;
            padding: 5px 7px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            font-weight: bold;
            outline: none;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            color: #ffffff;
            border: solid 1px #0076a3;
            border-right: 0px;
            background: #0095cd;
            background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
            background: -moz-linear-gradient(top, #00adee, #0078a5);
            border-top-right-radius: 5px 5px;
            border-bottom-right-radius: 5px 5px;
        }

            .tfbutton2:hover {
                text-decoration: none;
                background: #007ead;
                background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
                background: -moz-linear-gradient(top, #0095cc, #00678e);
            }
            /* Fixes submit button height problem in Firefox */
            .tfbutton2::-moz-focus-inner {
                border: 0;
            }

        .divResult {
            clear: both;
        }
    </style>

#searchHead {

background-color: #c3dfef;

}

#tfheadsearch {

float: left;

padding: 20px;

font-style: italic;

font-family: 'Arial Rounded MT';

color: purple;

font-size:xx-large;

}

#tfnewsearch {

float: right;

padding: 20px;

}

.tftextinput2 {

margin: 0;

padding: 5px 15px;

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;

color: #666;

border: 1px solid #0076a3;

border-right: 0px;

border-top-left-radius: 5px 5px;

border-bottom-left-radius: 5px 5px;

}

.tfbutton2 {

margin: 0;

padding: 5px 7px;

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;

font-weight: bold;

outline: none;

cursor: pointer;

text-align: center;

text-decoration: none;

color: #ffffff;

border: solid 1px #0076a3;

border-right: 0px;

background: #0095cd;

background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));

background: -moz-linear-gradient(top, #00adee, #0078a5);

border-top-right-radius: 5px 5px;

border-bottom-right-radius: 5px 5px;

}

.tfbutton2:hover {

text-decoration: none;

background: #007ead;

background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));

background: -moz-linear-gradient(top, #0095cc, #00678e);

}

/* Fixes submit button height problem in Firefox */

.tfbutton2::-moz-focus-inner {

border: 0;

}

.divResult {

clear: both;

}

</style>

Index.cshtml (Javascript) Datayı Çekme: Aşağıda document.ready() function’ında search textbox’ına “,” , “%”ve enter haricinde bir tuşa basılır ise tuşun yukarı hareketinde ilgili javascript çalıştırılır. Girilen karakter sayısı 3 ve 3’den büyük ise delay() function’ı çağrılır. Burada amaç text içine hızlı bir şekilde yazı yazılması durumunda herbir karakter için ilgili script’in çalıştırmamasıdır. Home Controller’ın Search action’ına aranacak kelime parametre olarak Post edilir. Daha sonra dönen result yani Partial View searchDiv‘inin içine basılır. Hata durumunda ilgili uyarılar verilir. Aynı şekilde id’si ‘srcButton‘ olan search button’una tıklanınca txtSearch’in keyup event’i tetiklenir. Böylece aranacak isim post edilmiş olunur. En sonda txtSearch‘ün üstüne gelinip odaklanıldığında içindeki “Detaylı ara?” yazısı kaybolur. Yine aynı şekilde text’den ayrılınıldığı zaman içine bir yazı yazılmamış ise yani içerik boş ise gene üstüne default “Detaylı ara?” yazısı yazılır. Burada amaç kullanıcıya mümkün olduğunca algıda kolaylık sağlamaktır.

 <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <!-- JAVASCRIPT text alana tıklanınca temizler -->
    <script type="text/javascript">
        $(document).ready(function() {	
            var searchboxID = "#txtSearch";
	           $('#srcButton').click(function(){
			$(searchboxID).keyup();
	           });	
            $(searchboxID).keyup(function (event) {
                if (event.keyCode != 13 && event.keyCode != 37 && event.keyCode != 39) {
                    if ($.trim($(searchboxID).val()).length > 2) {

                        delay(function () {

                            var options = {};
                            options.url = '/Home/Search',
		            options.type = "POST";
                            options.data = "{searchKey:'" + $(searchboxID).val() + "'}",
                            options.contentType = "application/json; charset=utf-8",
                            options.success = function (result) {
                                $("#searchDiv").html(result);
                                $("#searchDiv").show();
                            };
                            options.error = function (err) {
                                if (err.status == 500) {
                                    window.location.href = "/Home/Index";
                                } else {
                                    if (err.status != 0) {
                                        alert(err.statusText);
                                    }
                                }
                            };
                            $.ajax(options);
                        }, 500);
                    } else {
                        $("#searchDiv").hide();
                    }
                }
            });
        });

        var delay = (function () {
            var timer = 0;
            return function (callback, ms) {
                clearTimeout(timer);
                timer = setTimeout(callback, ms);
            };
        })();

        $(function () {
            $("#txtSearch").click(function () {
                if ($("#txtSearch").val() == "Detaylı ara?") {
                    $("#txtSearch").val("");
                }
            });
            $("#txtSearch").blur(function () {
                if ($("#txtSearch").val().trim() == "") {
                    $("#txtSearch").val("Detaylı ara?");
                }
            });
        });     
    </script>

$(document).ready(function() {

var searchboxID = "#txtSearch";

$('#srcButton').click(function(){

$(searchboxID).keyup();

});

$(searchboxID).keyup(function (event) {

if (event.keyCode != 13 && event.keyCode != 37 && event.keyCode != 39) {

if ($.trim($(searchboxID).val()).length > 2) {

delay(function () {

var options = {};

options.url = '/Home/Search',

options.type = "POST";

options.data = "{searchKey:'" + $(searchboxID).val() + "'}",

options.contentType = "application/json; charset=utf-8",

options.success = function (result) {

$("#searchDiv").html(result);

$("#searchDiv").show();

};

options.error = function (err) {

if (err.status == 500) {

window.location.href = "/Home/Index";

} else {

if (err.status != 0) {

alert(err.statusText);

}

};

$.ajax(options);

}, 500);

} else {

$("#searchDiv").hide();

}

});

var delay = (function () {

var timer = 0;

return function (callback, ms) {

clearTimeout(timer);

timer = setTimeout(callback, ms);

};

})();

$(function () {

$("#txtSearch").click(function () {

if ($("#txtSearch").val() == "Detaylı ara?") {

$("#txtSearch").val("");

}

});

$("#txtSearch").blur(function () {

if ($("#txtSearch").val().trim() == "") {

$("#txtSearch").val("Detaylı ara?");

}

});

</script>

Database işlemleri için Code First kullanılmıştır. Öncelikle aşağıdaki gibi DAL adında Bir Class Library yaratılıp NorthContext adında Entity Data Model oluşturulur. Daha sonra var olan Northwind database’inden CoderFirst ile Customers,Employees ve Suppliers poco nesneleri oluşturulup, North DBContext class’ı oluşturulur.

1-) Class Library ve Entity Data Model

2-) Var olan database üzerinden Code First ve Poco Nesneleri:

NorthContext.cs:

namespace DAL
{
    using System;
    using System.Data.Entity;
    using System.ComponentModel.DataAnnotations.Schema;
    using System.Linq;

    public partial class NorthContext : DbContext
    {
        public NorthContext()
            : base("name=NorthContext")
        {
        }

        public virtual DbSet<Customers> Customers { get; set; }
        public virtual DbSet<Employees> Employees { get; set; }
        public virtual DbSet<Suppliers> Suppliers { get; set; }

        protected override void OnModelCreating(DbModelBuilder modelBuilder)
        {
            modelBuilder.Entity<Customers>()
                .Property(e => e.CustomerID)
                .IsFixedLength();

            modelBuilder.Entity<Employees>()
                .HasMany(e => e.Employees1)
                .WithOptional(e => e.Employees2)
                .HasForeignKey(e => e.ReportsTo);
        }
    }
}

namespace DAL

{

using System;

using System.Data.Entity;

using System.ComponentModel.DataAnnotations.Schema;

using System.Linq;

public partial class NorthContext : DbContext

{

public NorthContext()

: base("name=NorthContext")

{

}

public virtual DbSet<Customers> Customers { get; set; }

public virtual DbSet<Employees> Employees { get; set; }

public virtual DbSet<Suppliers> Suppliers { get; set; }

protected override void OnModelCreating(DbModelBuilder modelBuilder)

{

modelBuilder.Entity<Customers>()

.Property(e => e.CustomerID)

.IsFixedLength();

modelBuilder.Entity<Employees>()

.HasMany(e => e.Employees1)

.WithOptional(e => e.Employees2)

.HasForeignKey(e => e.ReportsTo);

}

Şimdi sıra HomeController’dan dataların çekilmesinde. Öncelikle sorgulanacak search key’e göre Customer, Supplier ve Employee’den multitasking data aşağıdaki gibi çekilir. Task.Factory.StartNew(() => ile herbir tablodan linq ile çekilen data bir task’a atanır. Daha sonra List<Task> döndüren GetSeachResult() methodu oluçturulan taskCustomer, taskSupplier, taskEmployee’, bir Task listesine ekleyip geri döndürür. Bu arada sonuçların gösterileceği Search View Model burada doldurulur.

SearchModel.cs:

 public class SearchModel
    {
        public List<Customers> CustomerList { get; set; }
        public List<Employees> EmployeeList { get; set; }
        public List<Suppliers> SupplierList { get; set; }
        public string SearchKey { get; set; }       
    }

public class SearchModel

{

public List<Customers> CustomerList { get; set; }

public List<Employees> EmployeeList { get; set; }

public List<Suppliers> SupplierList { get; set; }

public string SearchKey { get; set; }

}

HomeController.cs(Search) : Client Side tarafından jquery post yapılacak Search() methodunda GetSearchResult() ile dönen tasklerin await Task.WhenAll(tasks) ile tamamlanması beklenir. Asenkron işlem için Search() methodunun başına async ifadesi konur. Aynı şekilde taskların tamamlanması await keyword’u ile asenkron olarak beklenilir. Bu işlem sonucunda ViewModel doldurulmuş olunur. Daha sonra sonuçlar ilgili model ile birlikte Partial View olarak döndürülür. Burada altını çizmek istediğim nokta geri dönüş tipinin Partial View olması yani arama sonucu için ayrıca bir html üretilmemesidir. Jquery ile client side tarafında yapılan request sonucu dönen Partial View divResult‘in içine aşağıdaki gibi basılır. DAL projesinin DetaylıAra projesine referance olarak eklenmesi, Nuget’den EntityFramework’ün projeye eklenmesi ve Web.config’e connection strings’in tanımlanması unutulmamalıdır.

  public async Task<PartialViewResult> Search(string searchKey)
        {
            var tasks = new Task[3];
            int i = 0;
            viewModel = new SearchModel();
            viewModel.SearchKey = searchKey;
            List<Task> TaskList = GetSeachResult(searchKey, viewModel);
            foreach (Task tsk in TaskList)
            {
                tasks[i] = tsk;
                i++;
            }
            await Task.WhenAll(tasks);

            return PartialView("ResultView", viewModel);
        }

        private List<Task> GetSeachResult(string search,SearchModel model)
        {
            //NorthContext dbContext = new NorthContext();
            List<Task> Tasks = new List<Task>();
            var taskCustomer = Task.Factory.StartNew(() =>
            {
                using (NorthContext dbContext = new NorthContext())
                {
                    model.CustomerList = dbContext.Customers.Where(cus => cus.ContactName.Contains(search)).ToList();                    
                }
            });
            Tasks.Add(taskCustomer);
            var taskSupplier = Task.Factory.StartNew(() =>
            {
                using (NorthContext dbContext = new NorthContext())
                {
                    model.SupplierList = dbContext.Suppliers.Where(sup => sup.ContactName.Contains(search)).ToList();                    
                }
            });
            Tasks.Add(taskSupplier);
            var taskEmployee = Task.Factory.StartNew(() =>
            {
                using (NorthContext dbContext = new NorthContext())
                {
                    model.EmployeeList = dbContext.Employees.Where(emp => emp.FirstName.Contains(search)).ToList();                    
                }
            });
            Tasks.Add(taskEmployee);
            return Tasks;
        }

public async Task<PartialViewResult> Search(string searchKey)

{

var tasks = new Task[3];

int i = 0;

viewModel = new SearchModel();

viewModel.SearchKey = searchKey;

List<Task> TaskList = GetSeachResult(searchKey, viewModel);

foreach (Task tsk in TaskList)

{

tasks[i] = tsk;

i++;

}

await Task.WhenAll(tasks);

return PartialView("ResultView", viewModel);

}

private List<Task> GetSeachResult(string search,SearchModel model)

{

//NorthContext dbContext = new NorthContext();

List<Task> Tasks = new List<Task>();

var taskCustomer = Task.Factory.StartNew(() =>

{

using (NorthContext dbContext = new NorthContext())

{

model.CustomerList = dbContext.Customers.Where(cus => cus.ContactName.Contains(search)).ToList();

}

});

Tasks.Add(taskCustomer);

var taskSupplier = Task.Factory.StartNew(() =>

{

using (NorthContext dbContext = new NorthContext())

{

model.SupplierList = dbContext.Suppliers.Where(sup => sup.ContactName.Contains(search)).ToList();

}

});

Tasks.Add(taskSupplier);

var taskEmployee = Task.Factory.StartNew(() =>

{

using (NorthContext dbContext = new NorthContext())

{

model.EmployeeList = dbContext.Employees.Where(emp => emp.FirstName.Contains(search)).ToList();

}

});

Tasks.Add(taskEmployee);

return Tasks;

}

ResultView.cshtml(Partial View): Aşağıdaki ResultView model olarak SearchModel beklemektedir. Gelen Customer, Employee ve Supplier listeleri içinde tek tek dönülerek bulunan resultlar ekrana basılır. Databaseden filitrelenen isimler yazılırken search ekranında aranan harflerin yerleri ismin içinde bulunup font rengi değiştirilir. Bu işlem yapılırken ismin büyük veya küçük harf ile başlaması gibi bir çok olasılık denenerek ilgili harfler çağrılan result data içiresinde bulunur. Burada amaç kullanıcının algısını arttırarak, aranan harflerin ilgili ismlerin içinde nerelerde geçtiğini göstermektir. Ayrıca Partial View’da DetaylıAra.Controllers adında bir namespace tanımlanmıştır. Amaç HtmlHelperExtensions.UppercaseFirst extension’ı kullanılarak aranacak kelimenin baş harfini büyütmektir. Böylece başharfi büyük olan search’ler de kelime içinde bulunularak font’u değiştirilir.

UppercaseFirst Extension:

 public static class HtmlHelperExtensions
    {
        public static string UppercaseFirst(string s)
        {
            if (string.IsNullOrEmpty(s))
            {
                return string.Empty;
            }
            char[] a = s.ToCharArray();
            a[0] = char.ToUpper(a[0]);
            return new string(a);
        }
    }

public static class HtmlHelperExtensions

{

public static string UppercaseFirst(string s)

{

if (string.IsNullOrEmpty(s))

{

return string.Empty;

}

char[] a = s.ToCharArray();

a[0] = char.ToUpper(a[0]);

return new string(a);

}

ResultView.cshtml(Partial View):

@model DetaylıAra.Controllers.SearchModel
@using DetaylıAra.Controllers;
<div class='MenuItemHeader SearchResultHead'>
    <div class='SearchResultHeadLeft'>CUSTOMERS</div><div class='SearchResultHeadRight'>
    </div><div class='clear'></div>
</div>
<div>
    <ul class='SearchResultItemHead'>
        @foreach (var item in Model.CustomerList)
        {
            <li class='SearchResultItem'> » @Html.Raw(item.ContactName.Replace(Model.SearchKey, "<b><font color='#990066'>" + Model.SearchKey + "</font></b>")
                                             .Replace(HtmlHelperExtensions.UppercaseFirst(Model.SearchKey), "<b><font color='#990066'>" + HtmlHelperExtensions.UppercaseFirst(Model.SearchKey) + "</font></b>")
                                             .Replace(Model.SearchKey.ToLower(), "<b><font color='#990066'>" + Model.SearchKey.ToLower() + "</font></b>")
                                             .Replace(Model.SearchKey.ToUpper(), "<b><font color='#990066'>" + Model.SearchKey.ToUpper() + "</font></b>")
                                             .Replace(HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToLower()), "<b><font color='#990066'>" + HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToLower()) + "</font></b>")
                                             .Replace(HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToUpper()), "<b><font color='#990066'>" + HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToUpper()) + "</font></b>")
                                           )</li>
        }
    </ul>
</div>
<div class='MenuItemHeader SearchResultHead'>
    <div class='SearchResultHeadLeft'>EMPLOYEES</div><div class='SearchResultHeadRight'>
    </div><div class='clear'></div>
</div>
<div>
    <ul class='SearchResultItemHead'>
        @foreach (var item in Model.EmployeeList)
        {
            <li class='SearchResultItem'> » @Html.Raw(item.FirstName.Replace(Model.SearchKey, "<b><font color='#990066'>" + Model.SearchKey + "</font></b>")
                                             .Replace(HtmlHelperExtensions.UppercaseFirst(Model.SearchKey), "<b><font color='#990066'>" + HtmlHelperExtensions.UppercaseFirst(Model.SearchKey) + "</font></b>")
                                             .Replace(Model.SearchKey.ToLower(), "<b><font color='#990066'>" + Model.SearchKey.ToLower() + "</font></b>")
                                             .Replace(Model.SearchKey.ToUpper(), "<b><font color='#990066'>" + Model.SearchKey.ToUpper() + "</font></b>")
                                             .Replace(HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToLower()), "<b><font color='#990066'>" + HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToLower()) + "</font></b>")
                                             .Replace(HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToUpper()), "<b><font color='#990066'>" + HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToUpper()) + "</font></b>")
                                           )</li>
        }
    </ul>
</div>
<div class='MenuItemHeader SearchResultHead'>
    <div class='SearchResultHeadLeft'>SUPPLIERS</div><div class='SearchResultHeadRight'>
    </div><div class='clear'></div>
</div>
<div>
    <ul class='SearchResultItemHead'>
        @foreach (var item in Model.SupplierList)
        {
            <li class='SearchResultItem'> » @Html.Raw(item.ContactName.Replace(Model.SearchKey, "<b><font color='#990066'>" + Model.SearchKey + "</font></b>")
                                             .Replace(HtmlHelperExtensions.UppercaseFirst(Model.SearchKey), "<b><font color='#990066'>" + HtmlHelperExtensions.UppercaseFirst(Model.SearchKey) + "</font></b>")
                                             .Replace(Model.SearchKey.ToLower(), "<b><font color='#990066'>" + Model.SearchKey.ToLower() + "</font></b>")
                                             .Replace(Model.SearchKey.ToUpper(), "<b><font color='#990066'>" + Model.SearchKey.ToUpper() + "</font></b>")
                                             .Replace(HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToLower()), "<b><font color='#990066'>" + HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToLower()) + "</font></b>")
                                             .Replace(HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToUpper()), "<b><font color='#990066'>" + HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToUpper()) + "</font></b>")
                                           )</li>
        }
    </ul>
</div>

@model DetaylıAra.Controllers.SearchModel

@using DetaylıAra.Controllers;

<div class='SearchResultHeadLeft'>CUSTOMERS</div><div class='SearchResultHeadRight'>

</div><div class='clear'></div>

</div>

<div>

@foreach (var item in Model.CustomerList)

{

<li class='SearchResultItem'> » @Html.Raw(item.ContactName.Replace(Model.SearchKey, "<b><font color='#990066'>" + Model.SearchKey + "</font></b>")

.Replace(HtmlHelperExtensions.UppercaseFirst(Model.SearchKey), "<b><font color='#990066'>" + HtmlHelperExtensions.UppercaseFirst(Model.SearchKey) + "</font></b>")

.Replace(Model.SearchKey.ToLower(), "<b><font color='#990066'>" + Model.SearchKey.ToLower() + "</font></b>")

.Replace(Model.SearchKey.ToUpper(), "<b><font color='#990066'>" + Model.SearchKey.ToUpper() + "</font></b>")

.Replace(HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToLower()), "<b><font color='#990066'>" + HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToLower()) + "</font></b>")

.Replace(HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToUpper()), "<b><font color='#990066'>" + HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToUpper()) + "</font></b>")

)</li>

}

</ul>

</div>

<div class='SearchResultHeadLeft'>EMPLOYEES</div><div class='SearchResultHeadRight'>

</div><div class='clear'></div>

</div>

<div>

@foreach (var item in Model.EmployeeList)

{

<li class='SearchResultItem'> » @Html.Raw(item.FirstName.Replace(Model.SearchKey, "<b><font color='#990066'>" + Model.SearchKey + "</font></b>")

.Replace(HtmlHelperExtensions.UppercaseFirst(Model.SearchKey), "<b><font color='#990066'>" + HtmlHelperExtensions.UppercaseFirst(Model.SearchKey) + "</font></b>")

.Replace(Model.SearchKey.ToLower(), "<b><font color='#990066'>" + Model.SearchKey.ToLower() + "</font></b>")

.Replace(Model.SearchKey.ToUpper(), "<b><font color='#990066'>" + Model.SearchKey.ToUpper() + "</font></b>")

.Replace(HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToLower()), "<b><font color='#990066'>" + HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToLower()) + "</font></b>")

.Replace(HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToUpper()), "<b><font color='#990066'>" + HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToUpper()) + "</font></b>")

)</li>

}

</ul>

</div>

<div class='SearchResultHeadLeft'>SUPPLIERS</div><div class='SearchResultHeadRight'>

</div><div class='clear'></div>

</div>

<div>

@foreach (var item in Model.SupplierList)

{

<li class='SearchResultItem'> » @Html.Raw(item.ContactName.Replace(Model.SearchKey, "<b><font color='#990066'>" + Model.SearchKey + "</font></b>")

.Replace(HtmlHelperExtensions.UppercaseFirst(Model.SearchKey), "<b><font color='#990066'>" + HtmlHelperExtensions.UppercaseFirst(Model.SearchKey) + "</font></b>")

.Replace(Model.SearchKey.ToLower(), "<b><font color='#990066'>" + Model.SearchKey.ToLower() + "</font></b>")

.Replace(Model.SearchKey.ToUpper(), "<b><font color='#990066'>" + Model.SearchKey.ToUpper() + "</font></b>")

.Replace(HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToLower()), "<b><font color='#990066'>" + HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToLower()) + "</font></b>")

.Replace(HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToUpper()), "<b><font color='#990066'>" + HtmlHelperExtensions.UppercaseFirst(Model.SearchKey.ToUpper()) + "</font></b>")

)</li>

}

</ul>

</div>

Böylece Mvc ile aranan bir ismi sql database’deki farklı tablolardan asenkron multitasking olarak search edip, partial view olarak dönen result’ı jquery ile bir div içine bastık.

Geldik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere hoşçakalın. Source kodlar ve ilgili NortWind database’i aşağıdadır.

Hoşçakalın.

NorthWind DataBase : http://www.microsoft.com/en-us/download/details.aspx?id=23654

Source Code : http://www.borakasmer.com/projects/DetaylıAra.rar

Etiketler: Ajax asenkron code first entity framwork jqery multi task mvc partial view Razor Task

Bunlar da hoşunuza gidebilir...

Veysel dedi ki:

30 Mart 2015, 01:08

Selamlar Bora Hocam;
Öncelikle çok güzel ve detaylı bir yazı olmuş. Elinize sağlık. Tam da search yapısı ile ilgili türkçe kaynak ararken taze taze karşıma bu sizin makaleniz çıktı. En kısa zamanda var olan sistemimizi asenkron ve multitasking’e çevirmeye karar verdim. Yazınız için bir daha teşekkürler.

Cevapla
- borsoft dedi ki:
  
  30 Mart 2015, 01:10
  
  Teşekkürler Veysel;
  Sistemi asenkron bir yapıya çevirince, performans sonuçlarını benle de paylaşırsan sevinirim.
  
  İyi çalışmalar.
  
  Cevapla
Yigit dedi ki:

30 Mart 2015, 15:00

Merhaba hocam,

Gectigimiz gunlerde 5+ webservis uzerinden ayni anda sonuc alma istegi gelmisti. SignalR ile gelistirmistim uygulamayi. Yaptiginiz gibi ben de Multitask PartialView cevirdim.

Elinize saglik.

Cevapla
- borsoft dedi ki:
  
  30 Mart 2015, 15:58
  
  Selam Yiğit;
  İşinize yaradı ise ne mutlu bana:)
  
  Cevapla
Cem dedi ki:

30 Mart 2015, 22:16

Selamlar Hocam;
Çok güzel bir yazı olmuş. Eminim birçok kişinin işine yarıyacaktır. Ben de elimdeki birçok yapıyı asenkron yapıya geçirmeyi planlıyorum.

Elinize sağlık. Teşekkürler.

Cevapla
Ferit dedi ki:

6 Nisan 2015, 11:02

Selamlar, paylaştığınız içerik için teşekkür ederim. Ben ilk karakteri büyük yapmak için CultureInfo.CurrentCulture.TextInfo.ToTitleCase(stringValue); şeklinde kullanıyorum.

Cevapla
- borsoft dedi ki:
  
  6 Nisan 2015, 12:12
  
  Selam Ferit;
  Senin de belirttiğin gibi ilk harfi büyütme işini CulterInfo class’ı ile de yapabilirdik. Bu yazıda amacım, konu arasında Mvc View Engine’de yani Razor’da Extension kullanımını da göstermekti.
  Yine de daha kısa bir yola örnek verdiğin için teşekkürler.
  
  İyi çalışmalar.
  
  Cevapla
Yaşar dedi ki:

2 Ağustos 2015, 21:27

Bu makalenizde anlattığınız konuyu 3-4 gündür internette arıyorum. Gerçekten çok güzel bir örnek. Böyle bir örneği paylaşmanız harika bir şey. Bu kadar yoğun bir tecrübe ve bilgi birikimi sonrası oluşmuş bu örneği paylaşmanızı haddim olmayarak takdir ediyorum.
Çok teşekkür ederim.

Cevapla
- borsoft dedi ki:
  
  3 Ağustos 2015, 09:55
  
  Teşekkürler Yaşar;
  Şimdiye kadar ki engüzel teşekkür mesajı idi:)
  
  Cevapla
Zehra dedi ki:

11 Ağustos 2015, 15:23

Paylaşımınız için tşk ederim.Gerçekten aradığım ve bulamadığım örneklerden birtanesi.Kodlarınızı denedim sonuca ulaştım :)
Okurlara faydası olacağını düşündüğüm için eklemek istediğim; Task.WhenAll() kullanımını .Net Framework 4.5 destekliyor..Net Framework 4.0’de Task.WhenAll yerine TaskEx.WhenAll kullanılıyor.Bunun içinde https://www.nuget.org/packages/Microsoft.Bcl.Async/1.0.168 adresindeki sürümün yüklenmesi gerekiyor.
Yeniden tşk ederim.İyi Çalışmalar

Cevapla
- borsoft dedi ki:
  
  11 Ağustos 2015, 15:52
  
  Teşekkürler Zehra;
  İşine yardı ise ne mutlu bana. Artık .Net 4.6 kullanmanın tam zamanı:)
  
  Cevapla
  - Zehra dedi ki:
    
    11 Ağustos 2015, 18:58
    
    Elimdeki projeyi bitirdikten sonra inş :)
    
    Cevapla
Zehra dedi ki:

11 Ağustos 2015, 16:20

Benim sormak istediğim bir konu var ki bulunan sonuçlar arasından bir tanesini seçip textbox içine id değerini aktarmak istiyorum.Nasıl bir yol izlemem gerekiyor.Şimdiden teşekkür ederim.

Cevapla
ahmet dedi ki:

10 Haziran 2016, 10:08

Şuan o kadar çok işime yaradı ki bu makale anlatamam. Çok teşekkür ediyorum bora abi.

Cevapla
- borsoft dedi ki:
  
  13 Haziran 2016, 11:01
  
  Teşekkürler Ahmet.
  İşine yaradı ise ne mutlu bana :)
  
  Cevapla
Sadık Gök dedi ki:

15 Haziran 2019, 11:52

çok teşekkür ederim. çok güzel anlatmışsınız.
Allah Razı olsun.

Cevapla
- borsoft dedi ki:
  
  15 Haziran 2019, 15:15
  
  Ben teşekkür ederim.
  İşinize yaradı ise ne mutlu bana :)
  
  Cevapla
Onur dedi ki:

6 Kasım 2020, 20:45

Hocam sizin için gurur verici bizim içinse sevinç kaynağı. Bu örneğinize ek olarak Tablo sayısını ve o tablolardaki kolon sayısını artırmak istersek performansla alakalı bir sorun yaşar mıyız? Arama yapılacak kelime yaklaşık 15 adet tabloda ve her tablonun içerisinde birden fazla kolonlarda arama yapılması gerekiyor. Bu tarz bir yapıda nasıl ilerlemek doğru olur. Bazıları tablo içindeki satırlarda bulunan kolonlardaki verileri txt_Search tarzında bir kolonun içerisine birleştirip yazıyor ve bu kolon içerisinde aramalar yapıyor. Bunların dışında farklı bir yöntem var mıdır? Sonuçta bu kolondaki veriler sürekli güncellenecek ve txt_Search kolonunu temizleyip her seferinde yeniden oluşturmak gerekiyor ki bu da server kaynaklarını tüketecektir diye düşünüyorum. Sizin yorumunuz ne olur?

Cevapla
- borsoft dedi ki:
  
  6 Kasım 2020, 23:35
  
  Selamlar Onur,
  
  Öncelikle Teşekkürler. Şiddetle ElasticSearch’ü size tavsiyem ediyorum. Bloğumdan arayabilirsiniz. SqlDB üzerinden bahsettiğiniz şekilde aramayı yapmayınız.
  Alternatif olarak DocumentDB örnek MongoDB, Firebase, CosmosDB gibi çözümlere de gidebilirsiniz..Yanlız bu durumda değişen veye yeni eklenen her yeni data için ya Elastice Index atmanız ya da bekleyip geceleri Time Schedule ile bulk index atabilirsiniz.
  
  İyi çalışmalar.
  
  Cevapla
  - Onur dedi ki:
    
    9 Kasım 2020, 21:34
    
    Çok teşekkür ederim, yorumlarınız çok değerli. Bahsetmiş olduğunuz konuları ve blog’taki yazılarınızı ve diğer dış kaynakları araştırdım. Çok yararlı oldu benim için.
    
    Cevapla

Mvc ile Gelişmiş Arama

Bunlar da hoşunuza gidebilir...

20 Cevaplar

borsoft için bir cevap yazın Cevabı iptal et

About

Son Yazılar

Kategoriler

Son Yorumlar

Arşivler

Mvc ile Gelişmiş Arama

Bunlar da hoşunuza gidebilir...

Equals ve Eşittir Karşılaştırma Operatörleri Arasındaki Farklar Nelerdir?

Mvc’de Çoklu Resim Yükleme ve DropBox’a Yedekleme

Bir Resmi Dinamik Olarak Url Parametreleri İle Resize Etme

20 Cevaplar

borsoft için bir cevap yazın Cevabı iptal et

About

Son Yazılar

Kategoriler

Son Yorumlar

Arşivler