I have developed a Web App that displays a live view of an HMI process.
Essentially it consists of master-detail solution. Within one of the detail pages is an image that refreshes every second on a timer tick. The image is displayed within a panel, itself inside an UpdatePanel. The updatepanel is explicitly refreshed on a timer tick (btw I've tried all variations/combinations of updatepanel properties without success).
On desktop Chrome, IE, Firefox, this solution works well. Sometimes, for some unknown reason, the page insists on doing a full refresh but overall the animation is smooth. Below is a screenshot of what the page looks like
When this app is viewed in Safari/Opera/Dolphin (build 5) (iOS 5 and 7), the results are very different. In between refreshes, the page is rendered minus the image and then finally with the image. The result is horrible shuddering of the page. The page in fact appears to be doing a full refresh (even the nav bar at the top resizes). The below image is what appears in between the update of the main image:
And when it's sorted itself out, the full page:
Occasionally this behaviour occurs on Chrome/Firefox on the desktop versions - this was minimised by disabling hardware acceleration within the browsers. But for Safari, it happens every refresh and has become a serious, app-killer problem since the majority of intended users will be iPad/iPhone users.
I've searched for days for a solution, adding various things to web.config, Page PreInit etc, but with no luck.
This is some of what I've tried :
Web.Config
<browserCaps userAgentCacheKeyLength="256" />
Source Code:
protected void Page_PreInit(object sender, EventArgs e)
{
if (Request.UserAgent != null && Request.UserAgent.IndexOf("AppleWebKit", StringComparison.CurrentCultureIgnoreCase) > -1)
{
this.ClientTarget = "uplevel";
}
I've done some playing around with how the image is inserted into the page ( it's a Base64 jpg string). I thought there was a problem with the image, but cutting a long story short, I inserted instead a tiny standard project image (.jpg) with the url suffixed with a random number to prevent caching - and the problem still happened (i.e. a full refresh still occurred in between timer ticks). So it's not an issue with the base64 encoded string. I've also removed all other controls apart from the image and still I get the full page refresh and violent screen shudder.
This is driving me nuts. I've tried it on iOS5 and 7 and both have the same refresh problem. It's really quite serious, since this makes the app unusable on iPads/iPhones.
I hope someone can please help.
Thanks
Here's the aspx code of the Master Page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="PracticonWebMimic.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<%-- <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">--%>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - Practicon Factory Viewer</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta http-equiv=”Page-Exit” content=”progid:DXImageTransform.Microsoft.Fade(duration=.5)” />
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server" EnablePartialRendering="true">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="bootstrap" />
<asp:ScriptReference Name="respond" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Path="~/Scripts/webkit.js" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" runat="server" href="~/">Practicon Factory View</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" id="mimicList" visible="false"
href="~/RestrictedAccess/MimicList.aspx">Views</a></li>
<li><a runat="server" id="mimicListArchive" visible="false"
href="~/RestrictedAccess/MimicList.aspx?archive=<%= DateTime.Now.Ticks %>">Archive Views</a></li>
<!-- <li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li> -->
</ul>
<asp:LoginView runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul class="nav navbar-nav navbar-right">
<!-- <li><a runat="server" href="~/Account/Register">Register</a></li> -->
<li><a runat="server" href="~/Account/Login">Log in</a></li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<ul class="nav navbar-nav navbar-right">
<li>
<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
</li>
</ul>
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
</div>
<div class="container body-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<hr />
<p >Tip: For optimal viewing experience, please ensure you have <b>disabled</b> <i>Hardware Acceleration</i> in your browser's settings. Google Chrome is the recommended browser.</p>
<hr />
<footer>
<p>© <%: DateTime.Now.Year %> - Practicon Factory <i>View</i></p>
<asp:Label id="lbError" runat="server" Text=""></asp:Label>
</footer>
</div>
</form>
</body>
</html>
and the code for the detail page
<%# Page Title="Factory View" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="MimicDetails.aspx.cs" Inherits="PracticonWebMimic.MimicDetails" %>
<%# Register Assembly="TimePicker" Namespace="MKB.TimePicker" TagPrefix="MKB" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<link href="/Content/PrBlueTable.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-sliderAccess.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.css">
<script src="//cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
});
function InitializeRequest(sender, args) { }
function EndRequest(sender, args) {
// after update occur on UpdatePanel re-init the DatePicker
$('.ui-datepicker').datetimepicker({
inline: true,
showOtherMonths: true,
showOn: 'focus',
showButtonPanel : true,
dateFormat: "dd/mm/yy",
nextText: ">>",
prevText : "<<",
timeFormat: "HH:mm:ss",
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
});
}
</script>
<script type="text/javascript" >
if (typeof (Sys.Browser.WebKit) == "undefined") {
Sys.Browser.WebKit = {};
}
if (navigator.userAgent.indexOf("WebKit/") > -1) {
Sys.Browser.agent = Sys.Browser.WebKit;
Sys.Browser.version = parseFloat(navigator.userAgent.match(/WebKit\/(\d+(\.\d+)?)/)[1]);
Sys.Browser.name = "WebKit";
}
</script>
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(beginRequest);
function beginRequest() {
prm._scrollPosition = null;
}
</script>
<asp:FormView ID="mimicDetail" runat="server"
ItemType="PracticonWebMimic.Models.Mimic" SelectMethod ="GetMimic"
RenderOuterTable="false">
<ItemTemplate>
<div>
<h2>
<asp:Label ID="lblActive_MimicDetails" runat="server" Visible="true"/>
<%#:Item.MimicName %>
</h2>
</div>
<br />
<table>
<tr>
<td>
<asp:UpdatePanel ID="upMimic_MimicDetails" runat="server" UpdateMode="Conditional" ChildrenAsTrigger="false">
<Triggers>
<%-- <asp:AsyncPostBackTrigger ControlID="tmrMimic_MimicDetails" EventName="Tick"/> --%>
</Triggers>
<ContentTemplate>
<asp:Label ID="lbConditionName_MimicDetails" runat="server" CssClass="btn-primary" Visible="False"/>
<asp:Panel ID="pnMimic" runat="server" style="margin-bottom: 2px">
<asp:image id="imMimic_MimicDetails" runat="server" />
<h4><asp:Label id="lbDirection_MimicDetails" runat="server" CssClass="btn-default" Text=""></asp:Label> </h4>
<%-- Action Buttons starts here ------------------------------------------------------------------------------------------------------------------------------- --%>
<asp:Table class="tbActionButtonBar" runat="server" CssClass="prTable">
<asp:TableRow >
<asp:TableCell>
<asp:Table class="tbActionButtonBar" runat="server">
<asp:TableRow >
<asp:TableCell >
<asp:ImageButton id="btnRestart_MimicDetails" runat="server" onclick="imgRestart_Click" Width="50" ToolTip="Restart playback from beginning." />
<asp:ImageButton id="btnStop_MimicDetails" runat="server" onclick="imgStop_Click" Width="50" ToolTip="Stop playback and show the LIVE Factory View." />
<asp:ImageButton id="btnRewind_MimicDetails" runat="server" onclick="imgRewind_Click" Width="50" ToolTip="Rewind the animation" />
<asp:ImageButton id="btnPlay_MimicDetails" runat="server" onclick="imgPlay_Click" Width="50" ToolTip="Start playback of animation from current time." />
<asp:ImageButton id="btnFForward_MimicDetails" runat="server" onclick="imgFForward_Click" Width="50" ToolTip="Fast-forward through animation." />
<asp:ImageButton id="btnPause_MimicDetails" runat="server" onclick="imgPause_Click" Width="50" ToolTip="Pause playback of animation." />
</asp:TableCell>
<asp:TableCell>
<asp:ImageButton id="btnTrends_MimicDetails" runat="server" Width="50" ToolTip="Show the Trends for the current Factory View" />
</asp:TableCell>
<asp:TableCell>
<asp:ImageButton id="btnConditionMonitoring_MimicDetails" runat="server" Width="50" ToolTip="View Condition Monitoring for this Factory View." />
</asp:TableCell>
<asp:TableCell>
<h5><asp:Label ID="lbStatus_MimicDetails" runat="server" CssClass="btn-default" Text=""></asp:Label></h5>
</asp:TableCell>
<asp:TableCell>
<h5><asp:Label ID="lbSession_MimicDetails" runat="server" CssClass="btn-default" Text=""></asp:Label></h5>
</asp:TableCell>
<asp:TableCell>
<asp:Button ID="btnSession_MimicDetails" runat="server" Text="RESET" CssClass="btn btn-default" onclick="btnSession_MimicDetails_Click"> </asp:button>
</asp:TableCell >
</asp:TableRow>
</asp:Table>
</asp:TableCell >
</asp:TableRow>
</asp:Table>
<%-- DateTime control starts here ------------------------------------------------------------------------------------------------------------------------------- --%>
<asp:Table id="tbActionDateBar_MimicDetails" runat="server" CssClass="prBlueTable">
<asp:TableRow>
<asp:TableCell >
<asp:Label Text="FROM : " runat="server" id="lbFrom_MimicDetails"></asp:Label>
<asp:TextBox type="text" id="txtStartDate_MimicDetails" runat="server" OnTextChanged="txtStartDate_MimicDetails_TextChanged" />
<asp:Label id="lbFromDate_MimicDetails" runat="server"/>
</asp:TableCell><asp:TableCell>
<asp:CheckBox Text=" End date? " runat="server" id="chkEndDate_MimicDetails" AutoPostBack="true" OnCheckedChanged="chkEnableEndDate_CheckedChanged"></asp:CheckBox>
</asp:TableCell><asp:TableCell >
<asp:Label Text="TO : " runat="server" ID ="lbTo_MimicDetails"></asp:Label>
</asp:TableCell><asp:TableCell>
<asp:TextBox type="text" id="txtEndDate_MimicDetails" runat="server" OnTextChanged="txtEndDate_MimicDetails_TextChanged"/>
<asp:Label id="lbEndDate_MimicDetails" runat="server"/>
</asp:TableCell><asp:TableCell>
<asp:CheckBox Text="Auto-restart?" runat="server" id="chkAutoRewind_MimicDetails" OnCheckedChanged="chkAutorewind_MimicDetails_CheckedChanged"></asp:CheckBox>
</asp:TableCell></asp:TableRow></asp:Table><asp:Timer ID="tmrMimic_MimicDetails" runat="server" Interval="1000" OnTick="MimicTimer_Tick" ClientIDMode="AutoID"> </asp:Timer>
<asp:Label ID="lbServiceResponse_MimicDetails" runat="server" CssClass="btn-default" Text="" ></asp:Label><br /><asp:Label id="lbRefreshRequested_MimicDetails" runat="server" Text=""></asp:Label>
<asp:Label id="lbRefreshed_MimicDetails" runat="server" Text=""></asp:Label>
<br /><asp:Label ID="lbServiceAddress_MimicDetails" runat="server" Text=""></asp:Label><br/>
<asp:Label ID="lbError_MimicDetails" runat="server" Text=""></asp:Label>
<asp:Label ID="lbSessionID_MimicDetails" runat="server" Text=""></asp:Label>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</ItemTemplate>
</asp:FormView>
</asp:Content>
Related
I'm working on displaying tabular data from a SQL database in a 'aspx' page that I added into an mvc template project I have made inside Visual Studio 2013.
I have a SQL DataSource connected to a database bringing back a basic table. I can display the information in the 'DataTable.aspx' file. I am not able to get the dataTables.js or the .css files to run. Or I do not think that they are running. This is what I have checked so far..
I can see jquery as having loaded, and I did install both jquery and datatables in the 'NuGet' package manager through Visual Studio 2013 (demo)
The .net tab in FireFox (sometimes shows that the .js and .cs files in the debug session in black or gray.
-I think my 'DataTables.aspx' file is correct (below).
<%: Title %>.
TaskTable
<div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:TaskRFIDatabaseConnectionString %>"
SelectCommand="SELECT [TaskID], [TaskTypeID], [TaskCreatedBy], [TaskName], [TaskDescription], [TaskCreatedDateTime] FROM [TaskTable]">
</asp:SqlDataSource>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<HeaderTemplate>
<table id="DataTable">
<thead>
<tr>
<th>TaskID</th>
<th>TaskTypeID</th>
<th>TaskCreatedBy</th>
<th>TaskName</th>
<th>TaskDescription</th>
<th>TaskCreatedDateTime</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%# Eval("TaskId") %></td>
<td><%# Eval("TaskTypeID") %></td>
<td><%# Eval("TaskCreatedBy") %></td>
<td><%# Eval("TaskName") %></td>
<td><%# Eval("TaskDescription") %></td>
<td><%# Eval("TaskCreatedDateTime") %></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
The site master has the references to the .js and .css files for dataTables.
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Compass.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - Compass</title>
<link href="Content/DataTables-1.10.3/css/jquery.dataTables.css" rel="stylesheet" />
<script src="Scripts/jquery-2.1.1.js"></script>
<script src="Scripts/DataTables-1.10.3/media/js/jquery.dataTables.js"></script>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="bootstrap" />
<asp:ScriptReference Name="respond" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" runat="server" href="~/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
<li><a runat="server" href="~/DataTable">DataTable</a></li>
</ul>
<asp:LoginView runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/Account/Register">Register</a></li>
<li><a runat="server" href="~/Account/Login">Log in</a></li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName() %> !</a></li>
<li>
<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
</li>
</ul>
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
</div>
<div class="container body-content">
<asp:ContentPlaceHolder ID="HeaderContent" runat="server">
<link href="Content/DataTables-1.10.3/css/jquery.dataTables.css" rel="stylesheet" />
<script src="Scripts/jquery-2.1.1.js"></script>
<script src="Scripts/DataTables-1.10.3/jquery.dataTables.js"></script>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<hr />
<footer>
<p>© <%: DateTime.Now.Year %> - My ASP.NET Application</p>
</footer>
</div>
</form>
</body>
</html>
Where else would you check? All of the examples I have read have been either dealing with a simple page or are using different methods. This is from a base web/mvc template from Visual Studio 2013 and jQuery dataTables.js installed through NuGet.
Some of the other pages I have already hit:
jQuery DataTable not working in asp.net mvc 4
http://www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part
Is there anyplace else I should be looking?
Andy..
Woo Hoo.. Found it.
I'm learning the ropes in the world of MVC 5 and jQuery/dataTables.
Let me restate the problem: I had a VS(2013) project (Web / .NetFramework4.5.1 / ASP.NET Web Application / WebForms (checkd 'WebForms', MVC)) I added in the references for jQuery & DataTables through the NuGet Package Manager. wrongly thought that this magically put all of the references I needed for the wireup
I added the following objects via drag drop to the cookie cutter template I used above from Data toolbox:
Repeater (source set to the 'SqlDataSource1')
SqlDataSource (setup with connection to my database)
So I thought I had all of the jQuery / js / css for using DataTables. I have done this in straight javascript before (Aptana) and could not figure out where the references for the css would have to be inserted. I about drove me crazy.
I know, get to it.. The scripts were there but not really doing anything. A table was generated but didn't have the css or scripty goodness that I wanted. That was the problem no css or script behavior I expected from dataTables.
What I did:
1. Started over with a new project, Added jQuery and DataTables through NuGet Package Manager.
2. Opened up "Site.Master" file and added references to the css in the section
<Link href="Content/DataTables-1.10.3/css/jquery.dataTables.css" rel="stylesheet"/>
Added the reference to the jquery.dataTables.js file in the same file "Site.Master"..
<asp:ScriptManager runat="server">
<Scripts>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Path="~/Scripts/DataTables-1.10.3/jquery.dataTables.js" />
<asp:ScriptReference Name="bootstrap" />
<asp:ScriptReference Name="respond" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
Cleaned / Rebuilt project
Added the final script call to the aspx page (final markup below)
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="maybe._Default" %>
StaffID
LName
FName
WorkPhone
<%# Eval("StaffID") %>
<%# Eval("LName") %>
<%# Eval("FName") %>
<%# Eval("WorkPhone") %>
"myselection text">
$('#DataTable').dataTable();
Rebuilt and then ran it .. Worked!!.
Andy
sources:
http://www.youtube.com/watch?v=bfCLyaWHvcM Sql Repeater
http://msdn.microsoft.com/en-us/library/bb398991%28v=vs.100%29.aspx
Using a basic <ul> and <li> within asp.net project with input controls, can't figure out why <ul> will not expand to full browser width? The <ul> will expand with wider <li> content.
<ul data-role="listview" id="ul-edit-picks" data-divider-theme="a" data-inset="true" data-scroll="true">
<li data-role="list-divider">
<h2 id="itemTitle">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("FDID")%>' Font-Bold="True" Font-Size="Medium"></asp:Label>
: Selections</h2>
</li>
<li>1st Week:
<asp:TextBox ID="CHOICE1TextBox" runat="server" Text='1st Week' ReadOnly="True"></asp:TextBox><br />
<asp:HiddenField ID="CHOICE1HiddenField" runat="server" Value='<%# Bind("CHOICE1")%>' />
</li>
<li>2nd Week:
<asp:TextBox ID="CHOICE2TextBox" runat="server" Text='' ReadOnly="True"></asp:TextBox><br />
<asp:HiddenField ID="CHOICE2HiddenField" runat="server" Value='<%# Bind("CHOICE2")%>' />
</li>
...
<li>
<asp:Button ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"
Text="Update Selections" ToolTip="Click to change your selections..."></asp:Button>
<asp:Button ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
Text="Cancel"></asp:Button>
</li>
</ul>
Screen Shots:
Try with data-inset="false" on < ul >
ok the problem was in the <FormView> of the .net section of my page, see: asp.net formview generates table at fixed width 259px
it's seems the default width of 259px is auto generated in the form based on content size.
I use a master page for my site and for some reason, I can no longer view the master page in design view. All that appears is a blank page with a blinking cursor. I've been at it for over 2 hours and can't figure it out. Yet when I run it, everything looks and behaves great. What am I missing?
Here is the Site.Master code:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication2.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<%--Here is where you reference your style sheets and JQuery library. The link href takes the
relative path and publishes fine for the directory. With <script> and <style> tags, copies
like the JQuery reference, you will need to use the '<%# Page.ResolveClientUrl() %>' to get
the same relative path behavior at publishing time. Typically you would define a code block
and choose '<%=' however page headers don't play nice with code blocks. '<%#' defines as a
databinding expression and then when you add Page.Header.Databind() to your code behind for
the master page, The DataBind method evaluates all the databinding expression(s) in your
header at load time--%>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Styles/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%# Page.ResolveClientUrl("~/Scripts/jquery-1.4.1.min.js") %>"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<%--The ScriptManager is a what is used by the Microsoft controls to provide AJAX functionality.
It needs to exist for the the AJAX libraries to be referenced and placing it right below the
Master's page Form tag is the best place--%>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="page">
<div class="header">
<div class="title">
<h1>
SalesPro Technologies Online
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ Log In ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server"
LogoutAction="RedirectToLoginPage" LogoutText="Log Out"
LogoutPageUrl="~/Account/Login.aspx"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div id="divMenu" class="clear hideSkiplink">
<%-- The following code is for a traditional menu bar to appear:
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false"
Width="40%" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
</Items>
</asp:Menu> --%>
<asp:LinkButton CssClass="LinkCss floatleft" ID="linkHome" runat="server"
PostBackUrl="~/Default.aspx">Home</asp:LinkButton>
<asp:LinkButton CssClass="LinkCss floatright" ID="linkAbout" runat="server"
PostBackUrl="~/About.aspx">About</asp:LinkButton>
<asp:LinkButton CssClass="LinkCss floatright" ID="linkOptions" runat="server">Options</asp:LinkButton>
<asp:LinkButton CssClass="LinkCss floatright" ID="linkReports" runat="server"
PostBackUrl="~/reports.aspx">Reports</asp:LinkButton>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
I think your comments with ASP tags in it are confusing Visual Studio. Try removing <%= <%# %> from within your comments and see if that helps. If this is your problem you may need to add spaces within the tags so they don't confuse VS. ie. < % = You should still be able to understand your comments.
I want to use custom buttons in my MVC Page. I am designing the View Page.
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
MainMenu
<!-- Main Menu Div-->
<form id="MainMenu" runat="server">
<div id="MainMenuFirstView">
<h2 class="LabelHeader">
<b>
        <u>View </u>
</b>
</h2>
<h3>
<asp:Button ID="btnHome" runat ="server" Text ="Home" Width="15%" CssClass="Button" SkinID= "Button" />
<asp:Button ID="btnNewUser" runat ="server" Text ="Add New User" Width="15%" CssClass="Button"/>
<asp:Button ID="btnAmendUser" runat ="server" Text ="Amend User" Width="15%" CssClass="Button" />
<asp:Button ID="btnAddNewAbsence" runat ="server" Text ="Add New Absence" Width="15%" CssClass="Button" />
<asp:Button ID="btnAmendAbsence" runat ="server" Text ="Amend Absence" Width="15%" CssClass="Button" />
<asp:Button ID="btnAddJobRole" runat ="server" Text ="Add Job Role" Width="15%" CssClass="Button" />
<asp:Button ID="btnAmendJobRole" runat ="server" Text ="Amend Job Role" Width="15%" CssClass="Button" />
<asp:Button ID="btnAddShiftEvent" runat ="server" Text ="Add Shift Event" Width="15%" CssClass="Button" />
<asp:Button ID="btnAmendShiftEvent" runat ="server" Text ="Amend Shift Event" Width="15%" CssClass="Button" />
<asp:Button ID="btnAddDMICase" runat ="server" Text ="Add DMI Case" Width="15%" CssClass="Button" />
<asp:Button ID="btnAmmendDMICase" runat ="server" Text ="Amend DMI Case" Width="15%" CssClass="Button" />
</h3>
</div>
</form>
</asp:Content>
If I want to use this a CSS file, How do I link it in this page?
Like: <link rel="stylesheet" type="text/css" href="style.css" />
In which part of the page I have to use this?
You can add the stylesheet reference directly to your master page and it will be applied to all pages like
<head>
<!-- ...other stuff here -->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Or if you want to be able to add different stylesheets to different pages then you can add a content placeholder to your master page
<head>
<!-- ...other stuff here -->
<asp:ContentPlaceHolder ID="Styles" runat="server"></asp:ContentPlaceHolder>
</head>
Then on your view page use
<asp:Content ContentPlaceHolderID="Styles" runat="server">
<link rel="stylesheet" type="text/css" href="style.css" />
</asp:Content>
Also note that in MVC you do not use controls or other WebForms server controls. You should use HtmlHelpers or HTML directly.
<button id="btnHome" class="button">Home</button>
I created an ASP.Net Web Application in VS 2010. That in turn creates an example Site.Master, Default.aspx, and several other example files.
I then opened Default.aspx in Expression Web 4 and get the error message
The Master Page file 'Site.Master'
cannot be loaded.
Default.aspx can still be displayed fine in VS 2010.
Source.Master:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="SampleWebApp.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
font-family: Tunga;
}
</style>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1 class="style1">
My Application
Master Page</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ Log In ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home">
<asp:MenuItem NavigateUrl="~/Home/NewItem.aspx" Text="New Item"
Value="New Item"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Home/AnotherItem.aspx" Text="Another Item"
Value="Another Item"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
<asp:MenuItem NavigateUrl="~/ContactUs.aspx" Text="ContactUs" Value="ContactUs">
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
Default.aspx:
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="SampleWebApp._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<style type="text/css">
.style2
{
color: #669900;
}
.style3
{
background-color: #FFFFCC;
}
</style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome to MY page!
</h2>
<p>
To learn more <span class="style2"><strong><em><span class="style3">about</span></em></strong></span> ASP.NET visit www.asp.net.
</p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
</asp:Content>
Any idea how to get the master page to work properly in Expression Web 4?
Did you try the Open Site option? (Click the yellow folder in the toolbar and then Open Site)
You can go to menu bar and click on Site menu and then on Open Site now this way it'll open and work properly in the designer and now master page error.