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
{
position: relative;
}
.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
<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
<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
<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
<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" />
</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;
}
}