جستجو اتوماتیک با Ajax در MVC 5
0 0

جستجو اتوماتیک با Ajax در MVC 5


جستجو اتوماتیک با Ajax در MVC 5

در این پست قصد تا به طور کامل نحوه جستجوی اتوماتیک با استفاده از Ajax در Asp.Net MVC 5 را آموزش دهیم.

ابتدا یک متدد به صورت زیر در کنترلی که می خواهید جستجو اتوماتیک  انجام دهید ایجاد کنید.

public ActionResult GetData(string str)
{
    var query = (from p in db.Posts
                 orderby p.Id ascending
                 where p.PostName.Contains(str)
                 select p).Take(10);

    return Json(query.ToList(), JsonRequestBehavior.AllowGet);
}

در متدد بالا اطلاعات را از دیتابیس خواند وسپس 10 تای آنها را توسط json ارسال می کنیم.

کد های قسمت View

<input id="autoSearch" list="item" class="form-control " placeholder="جستجو..." />
<datalist id="item" style="direction: rtl;"></datalist>

اگر به کدهای بالا نگاه کنید یک input برای نوشتن متن جستجو و سپس از یک datalist برای نمایش کارکتر جستجو شده استفاده کردیم و همچنین برای ارتباط input و datalist از ویژه گی list در input را برابر با id آن قرار دادیم.

کدهای Jquery

<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function () {

        $('#autoSearch').on("input", function () {

            var str = $('#autoSearch').val();

            if ($.trim(str).length) {
                getData(str);
            }
        });

        function getData(str) {
            $.ajax({
                type: 'GET',
                url: '/Home/GetData',
                data: { "str": str },
                dataType: 'json',
                success: function (data) {
                    if (data != null) {
                        $("#item").empty();
                        for (var i = 0; i < data.length; i++) {
                            $("#item").append("<option value=" + data[i].PostName + ">" + data[i].PostName + "</option>");
                        }
                    }
                },
                beforeSend: function () {

                },
                complete: function () {

                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(jqXHR + textStatus + errorThrown);
                }
            });
        }
    });
</script>

سپس توسط توسط jquery هنگامی که چیزی داخل input وارد می شود تابع getData را فراخوانی می کنیم و سپس اطلاعات را از سرور دریافت و در DataList نمایش می دهیم.

خروجی

جستجو اتوماتیک با Ajax در MVC 5

دانلود

نویسنده حسین فتحی
گروه مطلب MVC
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۵ آبان ۱۳۹۴
منبع ایران گنج
تعداد نظرات ۲
قیمت کاربران VIP
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha

تعداد نظرات : ۲

  • کیانوش

    اخر این اموزش نوشته خرید VIP . ینی اموزش تصویری هم داره ؟ سوال دیگه اینکه اگه من VIP یک ماهه بخرم ، توی این یک ماه من هرچی بخوام میتونم رایگان دانلود کنم ؟

    پاسخ
    • حسین فتحی

      سلام

      نه تصویری نیست و فقط سورس شو می تونید دانلود کنید. با خرید VIP می تونید تمام مطالبی که مربوط به کاربر VIP هستش رو دانلود کنید.

      پاسخ

این صفحه را می‌پسندم