locked
Prevent Web page blinking RRS feed

  • Question

  • User-1235671040 posted

    Dear all

    How to solve the problem of web page blinking when each control is used in this web page, So please any suggestions to prevent web page blinking other than using update panel.

    Thanks in advance

    Regards,

    Wednesday, October 2, 2019 11:44 AM

All replies

  • User475983607 posted

    How to solve the problem of web page blinking when each control is used in this web page, So please any suggestions to prevent web page blinking other than using update panel.

    Other options are jQuery AJAX  or fetch to create HTTP requests from JavaScript code running in the browser.  This approach requires that you write code to update the DOM.  You'll also need to create Web Methods to handler the request.

    I recommend moving to MVC/Web API as Web Forms can be challenging once you move away from using standard server controls like the Update Panel.

    Wednesday, October 2, 2019 12:10 PM
  • User-1235671040 posted

    Dear mgebhard

    Can you give me example of  Web Methods to handler the request

    Regards,

    Thursday, October 3, 2019 10:19 AM
  • User475983607 posted

    Can you give me example of  Web Methods to handler the request

    This pattern is very mature a Google search will find many examples. The key is writing code to update the DOM which is generally unique to your application. You'll need to set aside some time to learn fundamental JavaScript/jQuery.  Also the Web Method in the example below is static which means the method is NOT able to see the instance members which includes server controls.

    Standard AJAX pattern with a simple DOM update.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxDemo.aspx.cs" Inherits="WebFormsDemo.AjaxDemo" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
       
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
        </form>
        <div id="result">
    
        </div>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script>
    
            $("#<%= LinkButton1.ClientID%>").click(function (e) {
                e.preventDefault();
                var data = {
                    inputParam: "Hello World"
                }
                    $.ajax({
                        type: "POST",
                        url: '/AjaxDemo.aspx/DoSomething',
                        data: JSON.stringify(data),
                        dataType: 'json',
                        contentType: "application/json; charset=utf-8",
                    }).done(function (data) {
                        //Write to the browser's dev tools console (F12)
                        console.log(data);
                        //Update the DOM
                        $('#result').text(data.d);
                    });
            });
        </script>
    </body>
    </html>
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading;
    using System.Web;
    using System.Web.Script.Services;
    using System.Web.Services;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebFormsDemo
    {
        public partial class AjaxDemo : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            [WebMethod]
            public static string DoSomething(string inputParam)
            {
                return $"You sent {inputParam}.";
            }
    
        }
    }

    Thursday, October 3, 2019 10:59 AM
  • User-2054057000 posted

    By web page blinking you mean postback. You can prevent it making using asynchronous request to your C# pages i.e. .aspx.cs.

    In web forms you can use jQuery to easily call [WebMethod] and making the use of asynchronous solutions. I recommend you to read article - jQuery to call WebMethod asynchronously.

    Thursday, October 3, 2019 12:23 PM