I had been using Visual Studio with Ajax Control Toolkit Version 7.1213 from Nuget. But when i try to use the ModalPopupExtender it was not doing anything at all. I had done a lot of surfing at Stackoverflow, Codeproject as well as other reputed sites but none of their suggestion work on my code.
I had also found from the search that Many users who are using Latest AjaxControlToolkit with Visual Studio 2012 are facing the issue.
Here is the Master Page
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="Attendance1.Site1" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html>
<html lang="en">
<head id="Head1" runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:BundleReference ID="BundleReference1" runat="server" Path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
<body>
<form id="Form1" runat="server">
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
<img src="Images/logo.png" />
</p>
</div>
<div class="float-right">
<section id="login">
<asp:LoginView ID="LoginView1" runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<p>
Hello, <a id="A1" runat="server" class="username" href="~/Account/Manage" title="Manage your account">
<asp:LoginName ID="LoginName1" runat="server" CssClass="username" /></a>!
<asp:LoginStatus ID="LoginStatus1" runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" />
</p>
</LoggedInTemplate>
</asp:LoginView>
</section>
<nav>
<ul id="menu">
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
<section class="content-wrapper main-content clear-fix">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=272931&clcid=0x409 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.combined" />
<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>
<asp:ContentPlaceHolder runat="server" ID="MainContent" />
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© <%: DateTime.Now.Year %> - My ASP.NET Application</p>
</div>
</div>
</footer>
</form>
</body>
</html>
this is my Content Page
<%# Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site1.Master" CodeBehind="Login.aspx.cs" Inherits="abc" %>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:panel ID="Panel1" style="display:none" runat ="server">
<div class="HelloWorldPopup">
<div class="PopupHeader" id="PopupHeader">Header</div>
<div class="PopupBody">
<p>This is sample modal dialog</p>
</div>
<div class="Controls">
<input id ="btnOk" type="button" value="Done" />
<input id="btnCancel" type="button" value="Cancel" />
</div>
</div>
</asp:panel>
<asp:Button ID="Button1" runat="server" Text="Click here to show the modal" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DynamicServicePath="" PopupControlID="Panel1" Enabled="True" CancelControlID="btnCancel" TargetControlID="Button1">
</ajaxToolkit:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
Thanks in advance
You should change the line:
<asp:ScriptManager ID="ScriptManager1" runat="server">
with this one:
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnableScriptGlobalization="true">
Related
I am trying to do a simple project where I can use the required tag on an input field so I can achieve instant form validation. However, I cannot get the validation to trigger. I am using IE11 and Chrome Version 53. Reference: http://www.instantshift.com/2016/05/16/html5-form-validation-floating-input-label/
Site.Master
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - My ASP.NET Application</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 name="viewport" content="width=device-width" />
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.combined" />
<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>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
<a runat="server" href="~/">your logo here</a>
</p>
</div>
<div class="float-right">
<section id="login">
<asp:LoginView runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul>
<li><a id="registerLink" runat="server" href="~/Account/Register.aspx">Register</a></li>
<li><a id="loginLink" runat="server" href="~/Account/Login.aspx">Log in</a></li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<p>
Hello, <a runat="server" class="username" href="~/Account/Manage.aspx" title="Manage your account">
<asp:LoginName runat="server" CssClass="username" /></a>!
<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" />
</p>
</LoggedInTemplate>
</asp:LoginView>
</section>
<nav>
<ul id="menu">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About.aspx">About</a></li>
<li><a runat="server" href="~/Contact.aspx">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
<section class="content-wrapper main-content clear-fix">
<asp:ContentPlaceHolder runat="server" ID="MainContent" />
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© <%: DateTime.Now.Year %> - My ASP.NET Application</p>
</div>
</div>
</footer>
</form>
input used in here
Default.aspx
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<div>
<label for="name">Name (required):</label>
<input type="text" id="name" name="name" value="" required>
</div>
<div>
<label for="email">Email (required):</label>
<input type="text" id="email" name="email" value="" required="">
</div>
</asp:Content>
You need an event for validating the inputs regardless of what you use.
The following will work if the user enters a value, removes it and moves away from the input.
<asp:TextBox ID="txtInput" runat="server" CausesValidation="True"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ValidationGroup="form" ControlToValidate="txtInput" ErrorMessage="Please provide a value" Display="Dynamic"></asp:RequiredFieldValidator>
Once you know when to validate the input, use the Page_IsValid function to check if the form is in a valid state in javascript.
Please look at the following for validation using HTML5 elements:
<label for="name">Name (required):</label>
<input type="text" id="name" name="name" value="" required="" onblur="validate(this)" runat="server"/>
<label for="email">Email (required):</label>
<input type="text" id="email" name="email" value="" required="" onblur="validate(this)" runat="server"/>
<script>
function validate(input) {
if (input.value.length === 0) {
alert("Please provide a value in " + input.name + " input");
}
}
</script>
Try the following:
<div>
<label for="name">Name (required):</label>
<input type="text" id="name" name="name" value=""
required="required" runat="server">
</div>
<div>
<label for="email">Email (required):</label>
<input type="text" id="email" name="email" value=""
required="required" runat="server">
</div>
Using master and detail pages, I have a ScriptManager in my MasterPage and an UpdatePanel in my detail page.
The UpdatePanel refreshes on a timer tick (every second)
In the UpdatePanel is an image which is a live view of an HMI process.
(btw using Chrome) "Normally" everything works fine - the image is refreshed to give a reasonably uptodate view of the HMI and is flicker free, but quite often the whole page shudders as it is refreshed in its entirety.
There's no logic behind it. The page is definitely doing a full refresh - the menu bar at the top contained in the MasterPage is also refreshed.
This "shuddering" may go on for several seconds (the page being refreshed every second) and then calms down only to be repeated sometime later on.
Can anyone please explain to me what may be happening?
The following code and screen shots, show the reason for the flicker - the image, for some reason is not displayed for a split second.
This is how the screen looks immediately prior to refresh (notice the time in the title bar)
And when it flickers, the main image is missing :
and then a split second later (less than a second) the correct image appears (notice the time in the title bar is one second later).
Now this is NOT because the web page is not begin asked to display an image - if no image is returned from the WCF service,a default image is shown instead. For some reason, the webpage is simply not displaying the actual image. The web page is requested to refresh once a second, but the flicker (it happens very, very quickly) indicates that in between refreshes, the whole page (including top nav bar)is refreshed (minus the image). So it appears, the page is refreshing every 1/2 second.
And this happens on only some PCs every so often (random x seconds). I'm watching the page on a remote machine and this hasn't missed a beat, whilst my PC is frequently experiencing the shakes.
Also the Image ALWAYS flickers in I.E. despite partial rendering.
Code samples:
Master Page
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="PracticonWebMimic.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 %> - Practicon Factory View</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" />
</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" />
<%--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 />
<footer>
<p>© <%: DateTime.Now.Year %> - Practicon Factory View</p>
<asp:Label id="lbError" runat="server" Text=""></asp:Label>
</footer>
</div>
</form>
</body>
</html>
Details 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>
<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" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Label ID="lbConditionName_MimicDetails" runat="server" CssClass="btn-primary" Visible="False"/>
<asp:Panel ID="pnMimic" runat="server" style="margin-bottom: 2px">
<%-- Mimic Image ------------------------------------------------------------------------------------------------------------------------------- --%>
<img id="imMimic_MimicDetails" runat="server" src="./Assets/Images/running.jpg"/>
</asp:Panel>
<br />
<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="Reconnect" CssClass="btn-default" onclick="btnSession_TrendDetails_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"> </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>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="tmrMimic_MimicDetails" EventName="Tick"/>
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</ItemTemplate>
</asp:FormView>
</asp:Content>
The solution is to disable hardware acceleration in the browser.
I new to using web applications. I am currently using visual studio 2013 and I have created a web application. I would like to have a form that employees fill out and then when they hit submit the form will either add, change or delete from the database. From researching I originally tried making a web form. This did not allow me to keep the formatting that was made on my master page, and when I tried connecting it to the master page it did not allow it because of the <form>. So then I created a web form with master page. This allows me to keep the formatting from the master page but now I am unable to create a form using <form>. So my question is how do I create a form that will submit and still keep the formatting from my master page?
Master Page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.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 %> Employee Information</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" />
</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="~/">Employee Information</a>-->
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/HomePage">Home</a></li>
<!--<li><a runat="server" href="~/About">About</a></li>-->
<li><a runat="server" href="~/EmployeeInput">Add Employee</a></li>
<li><a runat="server" href="~/EditEmployee">Edit Information</a></li>
<li><a runat="server" href="~/Terminate">Terminate Employee</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="MainContent" runat="server">
</asp:ContentPlaceHolder>
<hr />
<footer>
<p>© <%: DateTime.Now.Year %> </p>
</footer>
</div>
</form>
</body>
</html>
Web Form
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication1.WebForm3" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<div id="Column1" style="height:355px;width:250px;float:left;">
First Name: <input type="text" name="FirstName" />
First Name: <input type="text" name="FirstName" />
First Name: <input type="text" name="FirstName" />
First Name: <input type="text" name="FirstName" />
First Name: <input type="text" name="FirstName" />
First Name: <input type="text" name="FirstName" />
First Name: <input type="text" name="FirstName" />
First Name: <input type="text" name="FirstName" />
First Name: <input type="text" name="FirstName1" size="20" />
<select id="Select1" name="D1">
<option>This</option>
<option>That</option>
<option>The other thing</option>
</select></div>
<div id="Column2" style="height:355px;width:250px;float:left;">
First Name: <input type="text" name="FirstName2" size="20" />
First Name: <input type="text" name="FirstName3" size="20" />
First Name: <input type="text" name="FirstName4" size="20" />
First Name: <input type="text" name="FirstName5" size="20" />
First Name: <input type="text" name="FirstName6" size="20" />
First Name: <input type="text" name="FirstName7" size="20" />
First Name: <input type="text" name="FirstName8" size="20" />
First Name: <input type="text" name="FirstName9" size="20" />
First Name: <input type="text" name="FirstName10" size="20" />
</div>
</body>
</html>
I would like to have everything within the body of my web form to be a form.
You can only have one form that has the runat="server"attribute on the composite page (Page + Master Page(s)).
The solution is to put the form in the Master Page, and put the content place holders inside the form. The Page itself doesn't just has to have the Content and declare the markup inside. When the page is executed, the markup from the Page and Master Page(s) will be combined into a single HTML file that is sent to the client.
Example master page:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Working with Data Tutorials</title>
<link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<form id="form1" runat="server">
<div id="header">
<span class="title">Working with Data Tutorials</span>
<span class="breadcrumb">TODO: Breadcrumb will go here...</span>
</div>
<div id="content">
<asp:contentplaceholder id="MainContent" runat="server">
<!-- Page-specific content will go here... -->
</asp:contentplaceholder>
</div>
<div id="navigation">
TODO: Menu will go here...
</div>
</form>
</div>
</body>
</html>
Example content page:
<%# Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
<h1>Welcome to the Working with Data Tutorial Site</h1>
<p>This site is being built as part of a set of tutorials that illustrate some of the new data access and databinding features in ASP.NET 2.0 and Visual Web Developer.</p>
<asp:TextBox runat="server" id="TextBox1" /><br />
<asp:TextBox runat="server" id="TextBox2" /><br />
<asp:Button runat="server" id="Btn1" OnClick="Btn1_Click" Text="Click to submit!" />
</asp:Content>
On the code behind (.cs file) for the page, you'd read the values from the text boxes like this:
protected void Btn1_Click(object sender, EventArgs e)
{
string sometext=TextBox1.Text;
string somemoretext=TextBox2.Text;
}
Examples from MSDN.
Both are Same but if you create Webform with Master Page Visual Studio implicitly add reference of the Master Page
<%# Page Title="" Language="C#" MasterPageFile="~/My.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="project.WebForm1" %>
and if you create a Webform not added reference of the Master Page even Master Page existed.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="project.Bhand" %>
<%# Master Language="VB" CodeFile="Main.master.vb" Inherits="Main" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="CSS_Styles/twoColFixLtHdr.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
function callAlert(msg) {
alert(msg);
}
</script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:ContentPlaceHolder ID="ScriptManager" runat="server">
</asp:ContentPlaceHolder>
<div class="container">
<div class="header">
<asp:LoginStatus ID="LoginStatus1" runat="server"
ForeColor="White"
CssClass="signin" Font-Size="Small"/>
<asp:LoginView ID="LoginView1" runat="server">
<AnonymousTemplate>
<asp:HyperLink ID="HyperLink1" runat="server"
CssClass="register"
ForeColor="White"
NavigateUrl="~/login.aspx" Font-Size="Small">Register</asp:HyperLink>
</AnonymousTemplate>
<LoggedInTemplate>
<asp:HyperLink ID="HyperLink2" runat="server"
NavigateUrl="~/account.aspx"
ForeColor="White"
CssClass="myaccount" Font-Size="Small">My Account</asp:HyperLink>
<asp:HyperLink ID="HyperLink5" runat="server"
NavigateUrl="~/fleaMarket/fleaMarketAccount.aspx"
ForeColor="White"
CssClass="fleaaccount" Font-Size="Small">Flea Account</asp:HyperLink>
<asp:HyperLink ID="HyperLink3" runat="server"
NavigateUrl="~/admin/access/access_rule_summary.aspx"
ForeColor="White"
CssClass="myaccount" Visible="false" Font-Size="Small">Admin</asp:HyperLink>
<asp:HyperLink ID="HyperLink4" runat="server"
NavigateUrl="~/report.aspx"
ForeColor="White"
CssClass="myaccount" Visible="false" Font-Size="Small">Report</asp:HyperLink>
</LoggedInTemplate>
</asp:LoginView>
<br />
<div id="CartAr">
<asp:Panel ID="Panel2" runat="server" Width="300px" Height="82px" BackColor="#ffffff">
<asp:Image ID="imgShpngCrt" runat="server" ImageUrl="~/Images/cart image1.jpg" Width="90px" Height="82px" CssClass="fltlft1" />
<asp:LoginView ID="LoginView2" runat="server">
<AnonymousTemplate>
<asp:Label ID="Label2" runat="server"
ForeColor="Black"
CssClass="" Font-Size="Small">Welcome!Guest.
</asp:Label>
</AnonymousTemplate>
<LoggedInTemplate>
<asp:Label ID="Label2" runat="server"
ForeColor="Black"
CssClass="" Font-Size="Small">Welcome! <asp:LoginName ID="LoginName2" runat="server" />
</asp:Label>
</LoggedInTemplate>
</asp:LoginView><br />
<div style="float:left; font-size:small;">
<asp:Label ID="lblCartItem" runat="server" Text="Items in your cart :" ForeColor="Black" Font-Size="Small"></asp:Label>
</div>
<asp:UpdatePanel ID="UpdatePanelMaster" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="True">
<ContentTemplate>
<div style="float:left; font-size:small;">
<asp:Label ID="lblcartitemcount" runat="server" Text="hahahah"></asp:Label>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<br /><br />
<asp:LinkButton ID="LinkButton1" runat="server" ForeColor="#336699" CssClass="textdeco" Font-Size="Small">View Cart</asp:LinkButton>
</asp:Panel>
</div>
<!-- end .header --></div>
<div id="navPos">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<asp:HyperLink ID="Home" runat="server" NavigateUrl="~/index.aspx">Home |</asp:HyperLink>
</li>
<li>
<asp:HyperLink ID="Products" runat="server" CssClass="MenuBarItemSubmenu">Products</asp:HyperLink>
<ul>
<li><asp:HyperLink ID="Groceries" runat="server">Groceries</asp:HyperLink></li>
<li><asp:HyperLink ID="DepartmentalItems" runat="server">Departmental Items</asp:HyperLink></li>
<li><asp:HyperLink ID="Electronics" runat="server">Electronics</asp:HyperLink>
<ul>
<li><asp:HyperLink ID="Mobiles" runat="server" NavigateUrl="~/itemsDisplayPage_aspx/itemsDisplayPage.aspx?typeOfItem=mobiles">Mobiles</asp:HyperLink></li>
<li><asp:HyperLink ID="Laptops" runat="server" NavigateUrl="~/itemsDisplayPage_aspx/itemsDisplayPage.aspx?typeOfItem=computers">Laptops & Computers</asp:HyperLink></li>
<li><asp:HyperLink ID="Accessories" runat="server">Accessories</asp:HyperLink></li>
</ul>
</li>
<li><asp:HyperLink ID="Kitchen" runat="server">Kitchen Items</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink6" runat="server">Home Appliances</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink7" runat="server">Fasion</asp:HyperLink></li>
</ul>
</li>
<li><asp:HyperLink ID="AboutUs" runat="server" NavigateUrl="~/Restaurant.aspx">| Restaurant Offers |</asp:HyperLink></li>
<li><asp:LinkButton ID="cmdMedicine" runat="server">Buy Medicines |</asp:LinkButton></li>
<li><asp:HyperLink ID="FleaMarket" runat="server" NavigateUrl="~/fleaMarket/fleaBazaar.aspx">Flea Market |</asp:HyperLink></li>
<li><asp:HyperLink ID="SellItems" runat="server" NavigateUrl="~/fleaMarket/hostItem.aspx">Sell Items |</asp:HyperLink></li>
<li><asp:HyperLink ID="WhyUS" runat="server">Why Us |</asp:HyperLink></li>
<li><asp:HyperLink ID="Payment" runat="server">Payment |</asp:HyperLink></li>
<li><asp:HyperLink ID="Contact_Us" runat="server" NavigateUrl="~/ContactUs.aspx">Contact Us</asp:HyperLink></li>
</ul>
</div><br /><br />
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<div class="footer">
<asp:TextBox ID="txtSubscribe" runat="server"></asp:TextBox>
<asp:Button ID="cmdSubscribe" runat="server" Text="Subscribe" /><br />
<div style="text-align:center; font-size:small;">
About Us |Payment Options |<a href="#">Terms &
Conditions</a> |Return Policy |Privacy Policy ©TriceDeals.Com
2011.
</div>
<!-- end .footer --></div>
<!-- end .container --></div>
<asp:ContentPlaceHolder ID="AfterFooter" runat="server">
</asp:ContentPlaceHolder>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", { imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight: "SpryAssets/SpryMenuBarRightHover.gif" });
</script>
</form>
</body>
</html>
this is my master page...i have a drop down navigation in my site which i have placed in master page...so now the problem is "the dropdown property of the navigation menu works properly in some of the pages and does not work in some oter...why does this happen??if i do not use the master page the menu work in all the pages.
You must use the tilde(~) to get the root-directory of your application, because some page might be in sub-directories and therefore have another relative path to the Styles/Scripts than other pages(#Aristos solution only works for first-level subdirectories).
You can use ~ only on server-controls, so add a runat=server on your link-tags:
<link runat="server" href="~/CSS_Styles/twoColFixLtHdr.css" rel="stylesheet" type="text/css" />
<link runat="server" hef="~/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
To get the correct reference to your script-files you have to add ScriptReferences:
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/SpryAssets/SpryMenuBar.js" />
</Scripts>
</asp:ToolkitScriptManager>
TGIF,
I have a website I'm developing which is using ASP.NET masterpage/sitemap/content pages setup. I hate the "blinking" the site does when navigating between content pages using the asp:menu control. Any suggestions on how to use jQuery ajax instead of AJAX.NET updatepanels? I've used updatepanels in the past and I hate it; clunky and bloated.
Here's the code:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="styles/master.css" rel="stylesheet" type="text/css" />
<title>Impeccable Construction Service</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/scripts/jquery-1.3.2.js" />
</Scripts>
</cc1:ToolkitScriptManager>
<div id="main">
<div class="header">
<asp:Image ID="HeaderLogo" runat="server" ImageUrl="images/header-logo.png" />
<asp:Image ID="SubHeader" runat="server" ImageUrl="images/sub-header.png" />
</div>
<div class="navbar">
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
<asp:Menu ID="NavMenu" runat="server" Orientation="Horizontal" DataSourceID="SiteMapDataSource1"
StaticDisplayLevels="2" MaximumDynamicDisplayLevels="4" DynamicHorizontalOffset="1"
StaticSubMenuIndent="1px" DynamicPopOutImageUrl="images/right-arrow.gif" StaticPopOutImageUrl="images/drop-arrow.gif"
CssClass="NavMenu" Height="30px">
<StaticMenuItemStyle ItemSpacing="10" CssClass="staticMenuItemStyle" />
<StaticHoverStyle CssClass="staticHoverStyle" />
<StaticSelectedStyle CssClass="staticMenuItemSelectedStyle" />
<DynamicMenuItemStyle CssClass="dynamicMenuItemStyle" />
<DynamicHoverStyle CssClass="menuItemMouseOver" />
<DynamicMenuStyle CssClass="menuItem" />
<DynamicSelectedStyle CssClass="menuItemSelected" />
<DataBindings>
<asp:MenuItemBinding DataMember="siteMapNode" NavigateUrlField="url" TextField="title"
ToolTipField="description" />
</DataBindings>
</asp:Menu>
<asp:SiteMapPath ID="SiteMapPath1" runat="server" RenderCurrentNodeAsLink="true"
PathSeparator=" >> " CssClass="currentNodeStyle">
<PathSeparatorStyle ForeColor="#5D7B9D" CssClass="currentNodeStyle" />
<CurrentNodeStyle ForeColor="#333333" CssClass="currentNodeStyle" />
<NodeStyle ForeColor="#7C6F57" CssClass="currentNodeStyle" />
<RootNodeStyle ForeColor="#5D7B9D" CssClass="currentNodeStyle" />
</asp:SiteMapPath>
</div>
<div id="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="footer">
<h4>
Rivera Design Studio
</h4>
</div>
</div>
</form>
</body>
</html>
You could use the SuperFish plugin for jQuery in conjunction with your SiteMap and Menu. Here's a similar question.
Are your content pages static or dynamic? If they are static you can always perform a get and swap out the content like so:
function GetNewContent(contentSource)
{
$.get(contentSource, function(content){
$('#contentArea').html(content);
});
}
where contentSource is your URL of the content you wish to retrieve. You could get rid of your Asp menu and go for simple asp:repeater and feed it with your data.
To be honest, the site map is over engineered and pretty inflexible when compared to simple jQuery nav solutions where you build out your menus with ul/ li tags. It is easier to roll your own data structure and pump it down to the client for jQuery to manipulate.
http://docs.jquery.com/Ajax/jQuery.getJSON
$.getJSON(myAction, { Data: myData }, function(data) {
// process data return on callback
});