locked
How to integrate jquery-pjax in asp.net web forms? RRS feed

  • Question

  • User-1078128378 posted

    Hi All,

    I have an existing application it was developed in asp.net webforms.

    it contains masterpage and lot of childpages.

    when i click on any page link from master page then entire page is reloading so i want to apply Jquery-pjax for reloading whole page again.

    i found pjax links from here

    https://www.npmjs.com/package/jquery-pjax

    https://pjax.herokuapp.com/

    i didn't find any article related to pjax with asp.net webforms.

    could any one plase give me an example for integrating pjax with asp.net web forms.

    Thanks,

    Monday, September 17, 2018 1:54 PM

All replies

  • User-893317190 posted

    Hi Murali,

    As the pjax's github website has said, pjax is a jQuery plugin that uses ajax and pushState to deliver a fast browsing experience with real permalinks, page titles, and a working back button.With pjax you could enable history with ajax.

    Because pjax uses a container which shows the content  returned by  pjax call , you should return partial html page in every pjax call.To return partial html call, I use ashx.

    Below is my code. "#container" select the div which will serve as the container of partial html  every pjax call returns. The first parameter of the method pjax represents the a links which trigger the pjax call. The pjax will make a pjax call using the a link's href property as request address.

    <head runat="server">
        <title></title>
          <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script src="pjax.js"></script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="/Services/res1.ashx">theFirstPage</asp:HyperLink>
            <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="/Services/res2.ashx" >theSecondPage</asp:HyperLink>
            
    
            <div id="container"></div>
        </form>
    </body>
    
        <script>
            $(function () {
               
                $(document).pjax("a", "#container");
            })
        </script>

    And my ashx page.

    //the first asxh
     public void ProcessRequest(HttpContext context)
            {
                context.Response.ContentType = "text/plain";
                context.Response.Write("<div style='background:red;'>the first page</div>");
            }
    
    //the second ashx
      public void ProcessRequest(HttpContext context)
            {
                context.Response.ContentType = "text/plain";
                context.Response.Write("<div style='background:red;'>the second page</div>");
            }

    And the result.

    You could also use the method below to make a pjax call. Using this way, you could register a click event for your pjax call.

    $('#th').click(function(){
            $.pjax({
                url: './res3.php',
                container: '#container'
            });
        });

    For more information, you could refer to https://github.com/defunkt/jquery-pjax

    Best regards,

    Ackerly Xu

    Tuesday, September 18, 2018 2:55 AM
  • User-1078128378 posted

    Hi Ackerly,

    Thank you so much for your help.

    In my application i have masterpage and child pages.

    all navigation links are in master page and child page content will be loaded in master page content place holder.

    could you please provide me above example in master page and child aspx pages instead of handlers then it would be very helpful to me.

    Thank you,

    Tuesday, September 18, 2018 5:24 AM
  • User-893317190 posted

    Hi murali,

    Do you want to switch child page through the navigation links?

    If so , you couldn't meet your requirement through pjax. Because  pjax could only return partial html. If you want an aspx page, this is a whole html.

    So , I suggest you could use iframe as  an alternative.

    You could consider using  an aspx page(without master page)  and put an iframe in it , when you click the navigation links  you could replace the content of the iframe.

    About how to use iframe ,please refer to http://www.tagindex.net/html/frame/a_target.html

    Best regards,

    Ackerly Xu

    Tuesday, September 18, 2018 6:26 AM