pjax實例demo(c#,iis)

時間 2020-08-10

標籤 pjax 實例 demo c# iis 欄目 C# 简体版

原文原文鏈接

pjax 百度都是api 也沒找到demo 本身寫了一個 C#寫的須要iis架設javascript

測試ie10 和火狐成功 html

ie10不要用兼容模式否則很差使java

iis 能夠直接架設webDemo1文件夾(源碼)jquery

打開根目錄Default.html
點pjax_demo進入git

pjax靜態頁沒實現出來目前只能架設服務器後使用github

下載鏈接: pjax實例下載web

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="aaaa.aspx.cs" Inherits="pjax_aaaa" %>

<%
    bool bb = false;
    try
    {
        bb = bool.Parse(Request.Params["pjax"]);
    }
    catch
    {

    }
    if (bb)
    {%>
<div id="Div1" style="border: 1px solid red;">
    <a href="bbbb.aspx" title="abc">bbb</a>
    <a href="cccc.aspx" title="abc">ccc</a>
    <a href="dddd.aspx" title="abc">ddd</a>
    <br />
    <br />
    <br />
    <br />
    異步,刷新我都變AAAAAAAAAAAA
</div>
<%}
    else
    { %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="jquery.pjax.js" type="text/javascript"></script>
    <script>
        //快捷獲取DOM
        function A(id) {
            if (typeof id == "string") {
                return document.getElementById(id);
            }
            else if (typeof id == "object") {
                return id;
            }
        }
        $(function () {
            $.pjax({
                selector: 'a',
                container: '#container', //內容替換的容器
                show: 'fade',  //展示的動畫，支持默認和fade, 能夠自定義動畫方式，這裏爲自定義的function便可。
                cache: false,  //是否使用緩存
                storage: true,  //是否使用本地存儲
                titleSuffix: '', //標題後綴
                fitler: function (href) {
                    //對於wordpress後臺的URL和wp-content裏的URL不使用pjax
                    //if (href.indexOf('/555') || href.indexOf('/666')) {
                    //    return true;
                    //}
                },
                callback: function (status) {
                    var type = status.type;
                    switch (type) {
                        case 'success':; break; //正常
                        case 'cache':; break; //讀取緩存 
                        case 'error':; break; //發生異常
                        case 'hash':; break; //只是hash變化
                    }
                }
            });
            $('#loading').hide();
            $('#container').bind('pjax.start', function () {
                $('#loading').show();
            })
            $('#container').bind('pjax.end', function () {
                $('#loading').hide();
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <br />
            <h1>異步我不變,刷新頁面我會變AAAAAAAAAA</h1>
            <div id="container" style="border: 1px solid red;">
                <a href="bbbb.aspx" title="abc">bbb</a>
                <a href="cccc.aspx" title="abc">ccc</a>
                <a href="dddd.aspx" title="abc">ddd</a>
                <br />
                <br />
                <br />
                <br />
                異步,刷新我都變AAAAAAAAAAAA
            </div>
            <div id="loading">pjax異步加載中....</div>
        </div>
    </form>
</body>
</html>
<%}%>