I have a Jquery SooperFish Menu in my master page.Onclick on any SubMenu option it is reloading the Menu. Is there any way to restict reloading Menu every time in Child Page?
To decrease the Database lookups.
EDIT:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="elogis.master.cs" Inherits="elogis.elogis" %>
<!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 rel="stylesheet" type="text/css" href="Styles/sooperfish.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="Styles/sooperfish-theme-large.css"
media="screen"/>
<script src="Jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Jquery/jquery.easing-sooper.js" type="text/javascript"></script>
<script src="Jquery/jquery.sooperfish.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('ul.sf-menu').sooperfish();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
SooperFish spoorfishMenu = new SooperFish();
Literal1.Text = spoorfishMenu.ExecuteXSLTransformation();
}
}
It looks as if the onClick postback, if you're writing it yourself (JS) add:
return false;
at the end-
onClick="doSomething();return false;"
Unless you are using UpatePanel's or another AJAX framework, each post-back is a new HTTP request, meaning the menu has to reload because the page is reloaded.
You have several options for caching, search SO or take a look at the link below to get started:
ASP.NET Caching
Related
I want to popup a calendar control when a textbox is focused. Everything is working except the calendar control is not showing up.
The code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#txt_date').datepicker();
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txt_date" Class="txt_date" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
you also need to include JqueryUI
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script> <--This is path to jqueryUI
$( function() {
$( "#txt_date" ).datepicker();
} );
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txt_date" Class="txt_date" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
I'm using visual studio 2010 asp.net website.
I made an aspx. page called forgetpassword.aspx and added a button with the codes
protected void Button1_Click(object sender, EventArgs e)
{
Response.Redirect("company.aspx");
}
I even tried:
protected void Button1_Click(object sender, EventArgs e)
{
Response.Redirect("company.aspx", true);
}
However, the page remains the same, the button is unable to redirect to company.aspx. I suspect there could be something wrong with my master page, but I am not sure. Please advise!
Here is my master page:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Master.master.cs" Inherits="Master" %>
<!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> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Home | Triangle</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/lightbox.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="images/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png"></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body></body>
</html>
Here is the source view (html) of my forgetpassword.aspx page:
<%# Page Title="" Language="C#" MasterPageFile="~/Master.master" AutoEventWireup="true" CodeFile="forgetpassword.aspx.cs" Inherits="_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</asp:Content>
You might need to specify the path, as the way shown in MasterPageFile="~/Master.master".
Response.Redirect("~/company.aspx");
EDIT
You need to use same ContentPlaceHolder ID across all the files, by default it is MainContent.
<asp:ContentPlaceHolder id="MainContent" runat="server">
</asp:ContentPlaceHolder>
And also make sure to place your Button inside a form.
<form action="/" method="post" runat="server">
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</form>
Now the redirect should work.
redirect should take a url as a parameter however you are only passing a string "company.aspx". Please try this
Response.Redirect(~/(path)/company.aspx);
Replace path with correct file path in your project
If it is just a redirect use
PostBackUrl="company.aspx"
like
<asp:Button ID="Button1" runat="server" Text="Button" PostBackUrl="company.aspx"/>
This will avoid need of calling event from server side.
Try this
protected void Button1_Click(object sender, EventArgs e)
{
if (Response.IsClientConnected)
{
// If still connected, redirect
// to another page.
Response.Redirect("company.aspx", false);
}
}
https://msdn.microsoft.com/en-us/library/a8wa7sdt(v=vs.110).aspx
Jquery is not wrking when I am using form tag in asp.net controls.so whats the solution .I am trying multiple techniques but it does not work.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#bt1").click(function () {
$("#p1").hide(2000);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p runat="server" id="p1">this is asp.net</p>
<asp:Button ID="bt1" Text="click" runat="server"/>
</div>
</form>
</body>
</html>
As you are using ASP.NET and bt1 is a button server control you need to use Control.ClientID.
<%= bt1.ClientID %> will Gets the control ID for HTML markup that is generated by ASP.NET.
Use
$("#<%= bt1.ClientID %>").click(function () {
$("#<%= p1.ClientID %>").hide(2000);
});
OR
You can use ClientIDMode.Static mode then you can continue with your existing code. However I will not recommend it.
I implemented the HTML5 canvas tag in asp.net2010 to draw graph bars but its not working below is the code that I implement in my .aspx page its showing empty page.
I am using browsers like (updated version of Chrome, Firefox, IE9)
<%# Page Language="C#" AutoEventWireup="true" CodeFile="CanvasChart.aspx.cs" Inherits="CanvasChart" %>
<!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>
<script src="Scripts/RGraph.bar.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
var data = [280, 45, 133];
var bar = new RGraph.Bar('testroundchart', data);
bar.Set('chart.labels', ['Richard', 'Alex', 'Nick']);
bar.Set('chart.gutter.left', 45);
bar.Set('chart.background.barcolor1', 'white');
bar.Set('chart.background.barcolor2', 'white');
bar.Set('chart.background.grid', true);
bar.Set('chart.colors', ['red']);
bar.Draw();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<canvas id="testroundchart" runat ="server" width="800" height="400"></canvas>
</div>
</form>
</body>
Thanks
Bhanu Prakash Inturi
You have to add two more script tags (RGraph.common.core.js and excanvas.original.js) to make your code work:
<script src="libraries/RGraph.common.core.js" ></script>
<!--[if lt IE 9]><script src="excanvas/excanvas.original.js"></script><![endif]-->
The second script tag is only needed for Internet Explorer.
I have a Page that is associated with a master page. In the master page, I put the css links in the head section and I put the jquery script tag and the script that contains the function to toggle the grid, but when it is not working. Looks like it is not even calling showhide when I click on an item.
Here is a snippet of the master page:
<head runat="server">
<title></title>
<link href="MainLayout.css" rel="stylesheet" type="text/css" />
<link href="ajaxtab.css" rel="stylesheet" type="text/css" />
<link href="dialog.css" rel="stylesheet" type="text/css" />
<link href="grid.css" rel="stylesheet" type="text/css" />
<link href="pager.css" rel="stylesheet" type="text/css" />
<link href="subgrid.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//master: id of div element that contains the information about master data
//details: id of div element wrapping the details grid
function showhide(master, detail) {
//First child of master div is the image
var src = $(master).children()[0].src;
//Switch image from (+) to (-) or vice versa.
if (src.endsWith("plus.png"))
src = src.replace('plus.png', 'minus.png');
else
src = src.replace('minus.png', 'plus.png');
//Set new image
$(master).children()[0].src = src;
//Toggle expand/collapse
$(detail).slideToggle("normal");
}
</script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
Here is the div that contains the showhide function in the onclick event in the aspx page:
<div class="searchgroup"
id='<%#String.Format("master{0}",Container.DataItemIndex)%>'
onclick='showhide(<%#String.Format("\"#master{0}\"",Container.DataItemIndex)%>
,
<%#String.Format("\"#detail{0}\"",Container.DataItemIndex) %>)'>
<asp:Image ID="imgCollapsible"
CssClass="first"
ImageUrl="plus.png"
Style="margin-right: 5px;"
runat="server" />
<span class="searchheader"><%#Eval("Business")%></span>
</div>
Here is html it generates for the master and detail div:
//master div
<div class="searchgroup"
id='master0'
onclick='showhide("#master0","#detail0")'>
<img id="ctl00_ContentPanel_gvMaster_ctl02_imgCollapsible"
class="first" src="plus.png"
style="border-width:0px;margin-right: 5px;" />
<span class="searchheader">ABC</span>
</div>
//details div
<div id='detail0' class="searchdetail">
<div>
<table class="searchgrid"
id="ctl00_ContentPanel_gvMaster_ctl02_gvDtails">
<tr>
<th>Status</th>
<tr class="searchrow">
<td>2</td>
</tr>
</table>
</div>
</div>
I could not get the JQuery working and I was running out of time, so for now I decided to use the collapsible panel externder from the ajax control toolkit. When I get time, I will investigate the JQuery Issue, Thanks for all your suggestions so far. If anyone has any more, please let me know.
Your javascript is throwing an error at src.endsWith("plus.png") because there is no built in endsWith function in js. replace that with src.substr(-8) == "plus.png" instead and it works:
<script type="text/javascript">
//master: id of div element that contains the information about master data
//details: id of div element wrapping the details grid
function showhide(master, detail) {
//First child of master div is the image
var src = $(master).children()[0].src;
//Switch image from (+) to (-) or vice versa.
if (src.substr(-8) == "plus.png")
src = src.replace('plus.png', 'minus.png');
else
src = src.replace('minus.png', 'plus.png');
//Set new image
$(master).children()[0].src = src;
//Toggle expand/collapse
$(detail).slideToggle("normal");
}
</script>
EDIT - Working example:
MasterPage.master
<%# Master Language="C#" AutoEventWireup="true" %>
<!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>Untitled Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//master: id of div element that contains the information about master data
//details: id of div element wrapping the details grid
function showhide(master, detail) {
//First child of master div is the image
var src = $(master).children()[0].src;
//Switch image from (+) to (-) or vice versa.
if (src.substr(-8) == "plus.png")
src = src.replace('plus.png', 'minus.png');
else
src = src.replace('minus.png', 'plus.png');
//Set new image
$(master).children()[0].src = src;
//Toggle expand/collapse
$(detail).slideToggle("normal");
}
</script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Default2.aspx
<%# Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="searchgroup" id='master0' onclick='showhide("#master0","#detail0")'>
<img id="ctl00_ContentPanel_gvMaster_ctl02_imgCollapsible" class="first" src="plus.png" style="border-width:0px;margin-right: 5px;" />
<span class="searchheader">ABC</span>
</div>
<div id='detail0' class="searchdetail">
<div>
<table class="searchgrid"
id="ctl00_ContentPanel_gvMaster_ctl02_gvDtails">
<tr>
<th>Status</th>
</tr>
<tr class="searchrow">
<td>2</td>
</tr>
</table>
</div>
</div>
</asp:Content>
" Looks like it is not even calling showhide when I click on an item." If you simplify the function with just an alert() function, does it work.
The code looks fine to me. Maybe there is some id mismatch.
You may check if jquery's path is correct in your page (that which uses this master page).
To be sure if its calling showhide() you can use Firebug in Firefox with a breakpoint in the function.
Also, it will give you more clues to debug and guess what is going wrong.
The code seems to be ok to me, too.
just a thought, if you right click view source on the browser, do you see the jquery path correctly? my experience tells me you need to resolve javascript urls on master pages (it works fine for css, but not js files)
<script src="<%= ResolveUrl("~") %>jquery-1.3.2.min.js" type="text/javascript"></script>