کلیک برروی صفحه 2 و ... کلیک یک درخواست ajax ارسال می کند ؟

بله با کلیک روی صفحات 2 و 3 و .. به صفحات دیگه پیجر میرود (به صورت Ajax ی) و پیجر به درستی کار میکند فقط Tooltip ها در صفحه باقی میمانند :

ویدیو کامل تر

کد های HTML که رندر شده قرار بدید.

یک نمونه رو ساده از کد هاش :

کد های View :

@using MvcPaging
@model WebShopping2017.Models.ViewModels.Product.SearchPro_ViewModel

@{
    Layout = "~/Views/Shared/Layout/_AdminLayout.cshtml";
}

@using (Ajax.BeginForm("Index", "Product",
                           new AjaxOptions { UpdateTargetId = "grid-list", HttpMethod = "Post", LoadingElementId = "loading", OnBegin = "beginPaging", OnSuccess = "successPaging", OnFailure = "failurePaging" },
                           new { id = "frm-search" }))
{
    <div id="grid-list" class="container-fluid">
        @{ Html.RenderPartial("_AjaxEmployeeList", Model); }
    </div>
}

@section Scripts{

    <script>

        $(function () {
            $('a').tooltip();
        });


        function beginPaging(args) {
            // Animate
            $('#grid-list').fadeOut('normal');
        }

        function successPaging() {
            // Animate
            $('#grid-list').fadeIn('normal');
            $('a').tooltip();
        }

        function failurePaging() {
            alert("Could not retrieve list.");
        }

    </script>
}

کد پارشیال ویو AjaxEmployeeList_ که در هر بار درخواست  فراخوانی میشود :

@using MvcPaging
@model WebShopping2017.Models.ViewModels.Product.SearchPro_ViewModel
<table class="table table-bordered table-hover">
    <thead>
    <tr>
        <th>
            ID
        </th>
        <th>
            Name
        </th>
        <th>
            Email
        </th>
        <th>
            Phone
        </th>
        <th>
            City
        </th>
    </tr>
    </thead>
    <tbody>
    @foreach (var item in Model.Products)
    {
        <tr>
            <td>
                @item.Id
            </td>
            <td>
                @item.Title
            </td>
            <td>
                @item.PrimaryPrice
            </td>
            <td>
                @item.ExistCount
            </td>
            <td>
                @item.TotalPriceSales
            </td>
        </tr>
    }
    </tbody>
</table>

<div class="container">
    @Html.Raw(Ajax.Pager(
            new Options
            {
                PageSize = Model.PageSize,
                TotalItemCount = Model.TotalItemCount,
                CurrentPage = Model.CurrentPage,
                ItemTexts = new ItemTexts() { Next = "Next", Previous = "Previous", Page = "P" },
                ItemIcon = new ItemIcon() { First = "icon-backward", Previous = "icon-chevron-left", Next = "icon-chevron-right", Last = "icon-forward" },
                TooltipTitles = new TooltipTitles() { Next = "Next page", Previous = "Previous page", Page = "Page {0}." },
                Size = Size.normal,
                Alignment = Alignment.centered,
                IsShowControls = true,
                IsShowFirstLast = true,
                //CssClass = ""
            },
            new AjaxOptions
            {
                UpdateTargetId = "grid-list",
                OnBegin = "beginPaging",
                OnSuccess = "successPaging",
                OnFailure = "failurePaging"
            }, new { controller = "Product", action = "Index", CatName = ViewData["CatName"] }))
    <div class="well">
        شروع از محصول شماره <span class="badge badge-success">@Model.ItemStart</span> تا محصول <span class="badge badge-success">@Model.ItemEnd</span>
        و تعدا کل یافته ها : <span class="badge badge-info">@Model.TotalItemCount</span>
    </div>
</div>

پس از اتمام هر درخواست  ajax آن را hide کنید

$('#element').tooltip('hide')

انجام دادم تاثثیری نداره تو صفحه میمونه , به احتمال زیادمشکل ناسازگراری با Bootstrap 4 alpha6 و اون فایل techer.js هست.

مورد مشابهی که مستقل از Bootstrap عمل کنه و شیوه کارش به همین شکل ساده باشه و در آدرس بار مرورگر هشتک نندازه  رو سراغ دارید

که البته با Jquery 3 سازگار باشه !

شما میتوانید به راحتی این مشکل رو با دستوری که گفتم حل کنید علت کار نکردنش هم در این قسمت وجود چند tooltip است ونمی داند برروی کدام کلیک شده که آن را hide کند برای حل این مسئله ازEvent delegation استفاده کنید

Understanding Event Delegation | jQuery Learning Center

ممنون مهندس , به شکلی که گفتید عمل کردم و مشکل حل شد :

    <script>

        $(function () {
            $('a').tooltip();
        });


        function beginPaging(args) {
            // Animate
            //$('#grid-list').fadeOut('normal');
            $('a').tooltip('hide');
        }

        function successPaging() {
            // Animate
            //$('#grid-list').fadeIn('normal');
            $('a').tooltip();
        }

        function failurePaging() {
            alert("Could not retrieve list.");
        }

    </script>

من دوتا قالب و _Layout در پروژم دارم یکی مال ظاهر سایت که با bootstrap 3.3.7 هست و قالب مدیریت که با boorstrap4 alpha6 هست) .

View موردنظر  رو با قالب 3.3.7 اجرا کردم Tooltip ها بدرستی اجرا میشن و مشکلی نیست ,

فقط مشکل ناسازگاری با قالب مدیریت  bootstrap 4 و قطعا فایل techer هست.

برای اطمینان از اینکه بقیه فایل های .js قالب تاثیری در این مورد ندارد صفحه رو بصورت زیر هم تست گرفتم ولی مشکل همچنان پابرجا بود!

@using MvcPaging
@model WebShopping2017.Models.ViewModels.Product.SearchPro_ViewModel

<!DOCTYPE html>
<html>
<head>
    <!-- Bootstrap Core CSS -->
    <link href="~/Content/bootstrap-4.0.0-alpha.6-dist/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<br /><br /><br />
<div class="container">

    @using (Ajax.BeginForm("Index", "Product",
        new AjaxOptions { UpdateTargetId = "grid-list", HttpMethod = "Post", LoadingElementId = "loading", OnBegin = "beginPaging", OnSuccess = "successPaging", OnFailure = "failurePaging" },
        new { id = "frm-search" }))
    {
        <div id="grid-list" class="container-fluid">
            @{ Html.RenderPartial("_AjaxEmployeeList", Model); }
        </div>
    }

</div>
    
<!--jquery 3.2.0-->
    <script src="~/Scripts/jquery/jquery-3.2.1.min.js"></script>
<script src="~/Scripts/jquery/jquery.unobtrusive-ajax.min.js"></script>

@Scripts.Render("~/bundles/jqueryval")
<!-- Bootstrap tether Core JavaScript -->
<script src="~/Content/monster-admin/assets/plugins/bootstrap/js/tether.min.js"></script>
<script src="~/Content/bootstrap-4.0.0-alpha.6-dist/bootstrap-4.0.0-alpha.6-dist/js/bootstrap.min.js"></script>

<script>

    $(function () {
        $('a').tooltip();
    });


    function beginPaging(args) {
        // Animate
        //$('#grid-list').fadeOut('normal');
        $('a').tooltip('hide');
    }

    function successPaging() {
        // Animate
        //$('#grid-list').fadeIn('normal');
        $('a').tooltip();
    }

    function failurePaging() {
        alert("Could not retrieve list.");
    }

</script>
</body>
</html>

بازهم ممنونم مهندس واقعا همیشه عالی جواب میدید,
راجب مورد زیر هم چیزی به نظرتون میاد :
بعد از اولین درخواست ایجکسی Tooltip ها رو در بالا سمت چپ نشون میده :
فیلم

در کدی که گذاشتن واضح است که توانایی تشخیص tooltip را ندارد و باید از روشی که بالا گفتم اضافه کنید.

در مورد آخر بررسی کنید که چه چیزی پس از ارسال درخواست ajax تغییر می کند

کلا اون پلگین رو حذف کردم و به شکل دیگه ای اون قسمت ویرایش رو طراحی کردم.

ممنون دیگه مشکل این حله .

مهندس یه پیجر جدید هم پیدا کردم که با bootstrap 3.3.7 کاملا سازگاره -  میخوام برای بخش خود سایت استفادش کنم  - تاپیک جدا زدم , لطفا راهنمایی کنید !