locked
In one time don't interactive then page not reload when click for postback RRS feed

  • Question

  • User-475949336 posted

    Dear Friend

    I buil web form asp.net, it running good in pc, mobile.

    But I have problem: the first, I open the page and put it here no interactive in one time (about 10 minutes) then I comeback to click on somthing for postback (example click change dropdownlist value...,) but the page not load again, it have paused, so I much refresh  or re enter URL page on adress bar.

    Please help me:

    It's my code

    1- Main.master

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="demo.Main" %>

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta name="viewport" content="width = device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

    <title></title>

    <link rel="stylesheet" href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' media="screen" /
    >
    <script type="text/javascript" src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>

    <script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>


    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/css/footable.min.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/js/footable.min.js"></script>

    <link href="./css/my.css" rel="stylesheet" type="text/css" />


    <style type="text/css">

    @media (max-width: 992px) {
    .navbar-header {
    float: none;
    }
    .navbar-left,.navbar-right {
    float: none !important;
    }
    .navbar-toggle {
    display: block;

    }
    .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);

    }
    .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
    display: none!important;
    }
    .navbar-nav {
    float: none!important;
    margin-top: 7.5px;

    }
    .navbar-nav>li {
    float: none;
    }
    .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    }
    .collapse.in{
    display:block !important;

    }
    }

    .dropdown-submenu
    {
    ;
    }
    .dropdown-submenu > .dropdown-menu
    {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;

    }
    .dropdown-submenu > a:after
    {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
    margin-right: -10px;
    }
    .dropdown-submenu:hover > a:after
    {
    border-left-color: #555;

    }
    .dropdown-submenu.pull-left
    {
    float: none;

    }
    .dropdown-submenu.pull-left > .dropdown-menu
    {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
    }
    </style>

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

    </head>
    <body>
    <form id="main" runat="server">

    <div class="navbar navbar-default" style="font-family:Arial; background-color: #0066CC">
    <div class="container-fluid" style="font-family:Arial">
    <div class="navbar-header" style="font-family:Arial">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
    aria-expanded="false">
    <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
    class="icon-bar"></span><span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="./">ASP</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="font-family:Arial;background-color: #1A8CFF" >
    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"

    RenderingMode="List" IncludeStyleBlock="false" StaticMenuStyle-CssClass="nav navbar-nav" DynamicMenuStyle-CssClass="dropdown-menu">

    </asp:Menu>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    Sys.WebForms.Menu._elementObjectMapper.getMappedObject = function () {
    return false;
    };
    $(function () {
    $(".navbar-nav li, .navbar-nav a, .navbar-nav ul").removeAttr('style');
    $(".dropdown-menu").closest("li").removeClass().addClass("dropdown-toggle");
    $(".dropdown-toggle").find("a[href='javascript:;']").attr("data-toggle", "dropdown");
    $(".dropdown-toggle").find("a[href='javascript:;'].level1").append("<span class='caret'></span>");
    $(".dropdown-toggle").find("a[href='javascript:;']:not(.level1)").closest('li').addClass('dropdown-submenu');
    $("a.selected").closest("li").addClass("active");
    $("a.selected").closest(".dropdown-toggle").addClass("active");
    $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
    event.preventDefault();
    event.stopPropagation();
    $(this).parent().siblings().removeClass('open');
    $(this).parent().toggleClass('open');
    });
    });
    </script>
    <hr />

    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
    </form>
    </body>
    </html>

    2- Main.master.cs

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.IO;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;

    namespace demo
    {
    public partial class Main : System.Web.UI.MasterPage
    {
    protected void Page_Load(object sender, EventArgs e)
    {
    if (!this.IsPostBack)
    {
    DataTable dt = this.GetData(0);
    PopulateMenu(dt, 0, null);
    }
    }


    private DataTable GetData(int parentMenuId)
    {

    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[4] {
    new DataColumn("ParentMenuId"),
    new DataColumn("MenuId"),
    new DataColumn("Title"),
    new DataColumn("Url") });

    dt.Rows.Add(0, 1, "Home", "~/frmtab.aspx"); // main tab
    dt.Rows.Add(0, 2, "Services", "javascript:;");
    dt.Rows.Add(0, 3, "About", "javascript:;");
    dt.Rows.Add(0, 4, "Contact ", "~/Contact.aspx");
    dt.Rows.Add(2, 5, "Consulting", "~/Consulting.aspx");
    dt.Rows.Add(2, 6, "Outsourcing ", "~/Outsourcing.aspx");
    dt.Rows.Add(3, 7, "About1", "javascript:;");
    dt.Rows.Add(3, 8, "About2", "~/About2.aspx");
    dt.Rows.Add(7, 9, "About11", "~/About11.aspx");
    dt.Rows.Add(7, 10, "About12", "~/About12.aspx");

    DataTable dtFinal = dt.Clone();
    DataRow[] dr = dt.Select("ParentMenuId=" + parentMenuId);
    if (dr.Length > 0)
    {
    dtFinal = dr.CopyToDataTable();
    }

    return dtFinal;
    }

    private void PopulateMenu(DataTable dt, int parentMenuId, MenuItem parentMenuItem)
    {
    string currentPage = Path.GetFileName(Request.Url.AbsolutePath);
    foreach (DataRow row in dt.Rows)
    {
    MenuItem menuItem = new MenuItem
    {
    Value = row["MenuId"].ToString(),
    Text = row["Title"].ToString(),
    NavigateUrl = row["Url"].ToString(),
    Selected = row["Url"].ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase)
    };
    if (parentMenuId == 0)
    {
    Menu1.Items.Add(menuItem);
    DataTable dtChild = this.GetData(int.Parse(menuItem.Value));
    PopulateMenu(dtChild, int.Parse(menuItem.Value), menuItem);
    }
    else
    {
    parentMenuItem.ChildItems.Add(menuItem);
    if (parentMenuId > 0)
    {
    DataTable dtChild = this.GetData(int.Parse(menuItem.Value));
    PopulateMenu(dtChild, int.Parse(menuItem.Value), menuItem);
    }
    }
    }
    }

    }
    }

    3- Frmtab.aspx

    <%@ Page Title="" Language="C#" MasterPageFile="~/Main.master" EnableEventValidation="false" AutoEventWireup="true" CodeBehind="frmtab.aspx.cs" Inherits="demo.frmtab" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

    </asp:Content>

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>

    <div class="tab-content" style="width: auto; border:none; font-family:Arial; font-size:larger; color:#1443AB; font-weight:bold; text-align:center; padding: 1px; margin: 1px">
    LIST
    </div>
    <div class="panel panel-default" style="width: auto; padding: 6px; margin: 6px">

    <div id="dvTab">

    <ul class="nav nav-tabs" role="tablist" style="font-weight: bold">
    <li runat="server" id="idListtab" class="active"><a href="#Listtab" style="outline:none" aria-controls="Listtab" role="tab" data-toggle="tab">Danh sách</a></li>
    <li runat="server" id="idAddnewtab"><a href="#Addnewtab" style="outline:none" aria-controls="Addnewtab" role="tab" data-toggle="tab">Tạo mới</a></li>
    <li runat="server" id="idEdittab"><a href="#Edittab" style="outline:none" aria-controls="Edittab" role="tab" data-toggle="tab">Sửa</a></li>
    <li runat="server" id="idViewtab"><a href="#Viewtab" style="outline:none" aria-controls="Viewtab" role="tab" data-toggle="tab">Chi tiết</a></li>

    </ul>

    <div class="tab-content" style="padding-top: 5px">

    <!-- Begin List -->
    <div role="tabpanel" class="tab-pane active" id="Listtab">

    <div class="form-inline" >

    <asp:ScriptManager ID="toolScriptManageer1" runat="server">
    </asp:ScriptManager>

    <label for="txtFrom">Fom date &nbsp;&nbsp;&nbsp;
    <asp:TextBox ID="txtFrom" width="128px" Height ="30px" runat="server" MaxLength="10" AutoPostBack="true" OnTextChanged="txt_TextChanged" ></asp:TextBox>
    <ajaxToolkit:CalendarExtender ID="Calendarfromdate" popupbuttonid="imgPopup" runat="server" targetcontrolid="txtFrom" format="dd/MM/yyyy" />
    </label>


    <label for="txtTo">To date &nbsp;

    <asp:TextBox ID="txtTo" width="128px" Height ="30px" AutoPostBack="true" runat="server" MaxLength="10" OnTextChanged="txt_TextChanged"></asp:TextBox>
    <ajaxToolkit:CalendarExtender ID="Calendartodate" popupbuttonid="imgPopup" runat="server" targetcontrolid="txtTo" format="dd/MM/yyyy" /> </label>


    <label for="trangthai">Status&nbsp;
    <asp:DropDownList ID="txtStatus" width="128px" Height ="30px" AutoPostBack="true" runat="server" OnTextChanged="txt_TextChanged">
    <asp:ListItem Text="All" Value="0"></asp:ListItem>
    <asp:ListItem Text="Ok" Value="1"></asp:ListItem>
    <asp:ListItem Text="Not Ok" Value="2"></asp:ListItem>
    </asp:DropDownList>
    </label>

    </div>
    <br/>

    <asp:GridView ID="grv1" CssClass="footable" runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="#BED7F3" HeaderStyle-Height="30px" HeaderStyle-BorderStyle="None" HeaderStyle-ForeColor="#144383" Font-Names="Arial" HeaderStyle-Font-Size="13px" >

    <Columns>

    <asp:TemplateField HeaderText="Name">
    <ItemTemplate>
    <asp:HiddenField ID="hidId" Value='<%# Eval("id") %>' runat="server" /><%--use this to store customer id--%>
    <asp:Label ID="Label4" runat="server" Text='<%# Eval("name") %>'></asp:Label>
    </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Mobile Number">
    <ItemTemplate>
    <asp:Label ID="Label5" runat="server" Text='<%# Eval("mobile") %>'></asp:Label>
    </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Email Id">
    <ItemTemplate>
    <asp:Label ID="Label6" runat="server" Text='<%# Eval("email") %>'></asp:Label>
    </ItemTemplate>
    </asp:TemplateField>

    <asp:TemplateField HeaderText="Action">
    <ItemTemplate>
    <asp:Button ID="bttEdit" runat="server" Text="Edit" OnClick="bttEdit_Click" Class="btn-primary" />

    </ItemTemplate>
    </asp:TemplateField>

    </Columns>
    </asp:GridView>


    </div>
    <!-- End List -->


    <!-- Begin Addnew -->
    <div role="tabpanel" class="tab-pane" id="Addnewtab">

    <asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>

    <asp:TextBox ID="txtName" runat="server" ValidationGroup="reg"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtName" ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>

    <asp:Label ID="Label2" runat="server" Text="Mobile Number"></asp:Label>

    <asp:TextBox ID="txtMobile" runat="server" ValidationGroup="reg"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtMobile" ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>
    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtMobile" ErrorMessage="Invalid Number" ForeColor="#CC3300" ValidationExpression="\d{10}" ValidationGroup="reg"></asp:RegularExpressionValidator>


    <asp:Label ID="Label3" runat="server" Text="Email"></asp:Label>

    <asp:TextBox ID="txtEmail" runat="server" ValidationGroup="reg"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtEmail" ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>
    <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="txtEmail" ErrorMessage="Invalid Email" ForeColor="#CC3300" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="reg"></asp:RegularExpressionValidator>

    <label for="tungay">Tháng/Năm &nbsp;&nbsp;&nbsp;
    <asp:TextBox ID="txtThangnam" width="128px" Height ="30px" runat="server" onkeyup="ValidateText(this);" MaxLength="7"></asp:TextBox>

    <ajaxToolkit:CalendarExtender ID="calendar1" ClientIDMode="Static" runat="server" TargetControlID="txtThangnam" Format="MM/yyyy"
    DefaultView="Months" OnClientShown="onCalendarShown"
    OnClientHidden="onCalendarHidden" PopupButtonID="imgStart" />
    </label>


    <asp:Button ID="Save" runat="server" Text="Save" OnClick="Save_Click" />&nbsp;


    </div>
    <!-- End Addnew -->

    <!-- Begin Edit -->
    <div role="tabpanel" class="tab-pane" id="Edittab">

    EDIT

    </div>
    <!-- End Edit -->


    <!-- Begin View -->
    <div role="tabpanel" class="tab-pane" id="Viewtab">
    View
    </div>
    <!-- End View -->
    </div>

    </div>
    </div>

    <asp:HiddenField ID="HiddenTab" runat="server" />

    </ContentTemplate>
    </asp:UpdatePanel>

    <!-- Panel End-->

    <script type="text/javascript">

    function Tabs() {
    var Tab = $("#<%=HiddenTab.ClientID%>");
    var tabId = Tab.val() != "" ? Tab.val() : "Addnewtab";
    $('#dvTab a[href="#' + tabId + '"]').tab('show');
    $("#dvTab a").click(function () {
    Tab.val($(this).attr("href").substring(1));
    //replace("#", ""));
    //substring(1));
    });
    }

    function pageLoad() {
    $('[id*=grv1]').footable();
    Tabs();
    }
    </script>

    </asp:Content>

    4-Frmtab.aspx.cs

    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using System;
    using System.Data.SqlClient;

    namespace demo
    {
    public partial class frmtab : System.Web.UI.Page
    {
    public static string constr = "server=(local);uid=sa;database=test;pwd=111111; MultipleActiveResultSets=true"; // for Local

    SqlConnection con = new SqlConnection(constr);

    protected void Page_Load(object sender, EventArgs e)
    {
    HiddenTab.Value = "listtab";
    idViewtab.Visible = false;
    idEdittab.Visible = false;

    if (!IsPostBack)
    {
    GridView();
    Laptop_PC_Mobile();
    }
    else
    Laptop_PC_Mobile();
    }


    protected void GridView()
    {

    try
    {
    con.Open();
    SqlCommand cmd = new SqlCommand("select * from register", con);
    SqlDataAdapter adp = new SqlDataAdapter(cmd);
    DataSet ds = new DataSet();
    adp.Fill(ds);
    if (ds.Tables[0].Rows.Count > 0)
    {
    GridView1.DataSource = ds;
    GridView1.DataBind();
    }
    else
    {
    ds.Tables[0].Rows.Add(ds.Tables[0].NewRow());
    GridView1.DataSource = ds;
    GridView1.DataBind();
    int columncount = GridView1.Rows[0].Cells.Count;
    GridView1.Rows[0].Cells.Clear();
    GridView1.Rows[0].Cells.Add(new TableCell());
    GridView1.Rows[0].Cells[0].ColumnSpan = columncount;
    GridView1.Rows[0].Cells[0].Text = "No Records Found";
    }
    }
    catch (Exception ex)
    {
    ScriptManager.RegisterStartupScript(Page, this.GetType(), "Error", "alert('" + "ERROR : " + ex.Message.ToString() + "')", true);
    }
    finally
    {
    con.Close();
    }
    }

    public void Laptop_PC_Mobile()
    {
    if (grv1.Rows.Count > 0)
    {
    //Attribute to show the Plus Minus Button.
    grv1.HeaderRow.Cells[0].Attributes["data-class"] = "expand";
    //Attribute to hide column in Phone.
    grv1.HeaderRow.Cells[2].Attributes["data-hide"] = "phone,tablet";

    //Adds THEAD and TBODY to GridView.
    grv1.HeaderRow.TableSection = TableRowSection.TableHeader;
    }
    }

    protected void Save_Click(object sender, EventArgs e)
    {
    try
    {
    con.Open();
    SqlCommand cmd = new SqlCommand("insert into register values('" + txtName.Text + "','" + txtMobile.Text + "','" + txtEmail.Text + "')", con);
    cmd.ExecuteNonQuery();
    ScriptManager.RegisterStartupScript(Page, this.GetType(), "popup", "alert('Register Sucessfully')", true);
    ScriptManager.RegisterStartupScript(Page, this.GetType(), "redirect", "window.location.replace('./frmTab.aspx')", true);//refresh current page to reload data for your user control frmList
    }
    catch (Exception ex)
    {
    ScriptManager.RegisterStartupScript(Page, this.GetType(), "Error", "alert('" + "ERROR : " + ex.Message.ToString() + "')", true);
    }
    finally
    {
    con.Close();
    }

    }

    protected void txt_TextChanged(object sender, EventArgs e)
    {
    GridView();
    Laptop_PC_Mobile();

    }

    }
    }

    5-my.css

    /* Style the form - display items horizontally */
    .form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    }

    /* Add some margins for each label */
    .form-inline label {
    margin: 2px 2px 2px 0;
    padding-left: 0.4em;
    font-weight: bold !important;
    background-color: #FCFCFC;
    color: #1443B9;
    font-family: Arial;
    font-size: 13px;
    }

    /* Style the input fields */
    .form-inline input {
    vertical-align: middle;
    margin: 2px 2px 2px 0;
    padding: 3px;
    background-color: #fff;
    border: 1px solid #ddd;
    }

    /* Style the submit button */
    .form-inline button {
    padding: 1px 1px;
    background-color: dodgerblue;
    border: 1px solid #ddd;
    color: red;
    }

    .form-inline button:hover {
    background-color: royalblue;
    }

    /* Add responsiveness - display the form controls vertically instead of horizontally on screens that are less than 800px wide */
    @media (max-width: 600px)
    {
    .form-inline input {
    margin: 1px 0;
    font-family: Arial;
    font-size: 15px;
    }

    .form-inline {
    flex-direction: column;
    align-items: stretch;

    }
    }

    Friday, March 27, 2020 11:30 AM

All replies

  • User475983607 posted

    Please take a few moments to do basic troubleshooting.  Are you sure the browser is not submitting a POST?  The easiest way to check this is using the browser's dev tool and watching the Network View.  If the browser is not submitting a POST, are there validation errors that stop the POST?

    https://developers.google.com/web/tools/chrome-devtools/network

    If the browser is submitting a POST then set a break points key locations to single step through your code.   I see you are using an Update Panel.  Maybe there is an error and you your code hides the error.  

    https://docs.microsoft.com/en-us/visualstudio/debugger/debugger-feature-tour?view=vs-2019

    You need to understand that dumping your code on the forum without debugging is not helpful.  Take the time to learn how to use the very robust debugging tools.

    Friday, March 27, 2020 11:47 AM
  • User-475949336 posted

    Hi AgaveJoe

    first load, page activity are nomal, no error. but when don't interactive page in a time (about ten minutes) when return page click on some control as dropdown, canlendar for postback and submit but the page not response, pause, no action.

    all events on controls no error.

    Friday, March 27, 2020 2:55 PM
  • User475983607 posted

    test0101

    Hi AgaveJoe

    first load, page activity are nomal, no error. but when don't interactive page in a time (about ten minutes) when return page click on some control as dropdown, canlendar for postback and submit but the page not response, pause, no action.

    all events on controls no error.

    Repeating yourself is not helpful.  You've already explained that 10 minutes of inactivity causes unexpected behavior.   You need to do basic debugging to figure out what's happening.   For the second time, you need to determine there there is a HTTP request coming from the browser.  Since you are using an update panel, it is possible that the there is an HTTP POST but you are not seeing the POST because you are not using debugging tools.  It is also possible that there is a JavaScript error which can be found using the browser's developer tools.  If you are unfamiliar with the debugging tools then you'll need to stop coding and learn.  Otherwise, you will not be able to move forward.

    Friday, March 27, 2020 3:23 PM
  • User-475949336 posted

    thank mgebhard, i will try as you said

    Friday, March 27, 2020 3:55 PM