How to use a DatePicker control in Asp.Net using jQuery - c#

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>

Related

Response.redirect not working

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 not working while using <form> tag

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.

ReferenceError: $ is not defined on jquery.are-you-sure.js [duplicate]

This question already has answers here:
JQuery - $ is not defined
(36 answers)
Closed 8 years ago.
I am a beginner in jquery
I have test.aspx page :
<%# Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
<script type="text/javascript" src="jquery-1.8.2.min"></script>
<script type="text/javascript" src="jquery.are-you-sure.js"></script>
<script>
$(function () {
$('form').areYouSure();
$('form').areYouSure({ 'message': 'Your profile details are not saved!' });
});
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click"/>
</div>
</form>
</body>
</html>
I get error:
ReferenceError: $ is not defined (Line #5)
I am tired to find the solution.
The error suggesting that you don't have jquery-1.8.2.min file at the same label where your page is.
Like suppose you have file test.aspx on root folder then your script file should on root.
And if you script file is inside a folder then you need to specify the folder name
<script type="text/javascript" src="yourFolder/jquery-1.8.2.min"></script>
I update the code, I was missing folder name.
jquery.are-you-sure.js plugin run correctly now
<%# Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
<script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.are-you-sure.js"></script>
<script type="text/javascript" >
$(function () {
$('form').areYouSure();
$('form').areYouSure({ 'message': 'Your profile details are not saved!' });
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"/>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click"/>
</form>
</body>
</html>

Where to put the <head> tag in an ASP.NET solution?

I have an ASP.NET project whose page starts with:
<head runat="server">
<meta charset="utf-8">
<title>Online SMS Choose</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link id="Link1" rel="stylesheet" runat="server" media="screen" href="~/css/tableStyle.css" />
<link id="Link2" rel="stylesheet" runat="server" media="screen" href="~/css/LoadingStyle.css" />
<link id="Link3" rel="stylesheet" runat="server" media="screen" href="~/css/selectStyle.css" />
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
$("#tabs").tabs();
});
$(function () {
$("#datepicker").datepicker();
});
</script>
</head>
Then my manager told me that I have to merge that project with another one. She gave me the code of the other project. That code doesn't have a head tag in it, but it has this at the start of the page:
<%# Page Title="Service Categories" Language="C#" MasterPageFile="~/Site.master"
AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="service._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="Scripts/ZeroClipboard.js"></script>
<script type="text/javascript" src="Scripts/main.js"></script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div class="content" id="Content">
Where do I put the <head> tag in this new project?
The first code snippet you provided is standard HTML markup and the second is ASP.NET markup as I am sure you are aware.
You can combine both of them in the following manner:
<%# Page Title="Service Categories" Language="C#" MasterPageFile="~/Site.master"
AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="service._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="Scripts/ZeroClipboard.js"></script>
<script type="text/javascript" src="Scripts/main.js"></script>
<title>Online SMS Choose</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link id="Link1" rel="stylesheet" runat="server" media="screen" href="~/css/tableStyle.css" />
<link id="Link2" rel="stylesheet" runat="server" media="screen" href="~/css/LoadingStyle.css" />
<link id="Link3" rel="stylesheet" runat="server" media="screen" href="~/css/selectStyle.css" />
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
$("#tabs").tabs();
});
$(function () {
$("#datepicker").datepicker();
});
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div class="content" id="Content">
........
You have already a head section in there:
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="Scripts/ZeroClipboard.js"></script>
<script type="text/javascript" src="Scripts/main.js"></script>
</asp:Content>
check your project for files, which put content into this PlaceHolder. If you want to define a <head> wrap it around this content placeholder. But then you need to check the contents of the other files and refactor it, so you do not define a head tag inside a head tag.
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="Scripts/ZeroClipboard.js"></script>
<script type="text/javascript" src="Scripts/main.js"></script>
</asp:Content>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div class="content" id="Content">
// ...
</div>
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
You can place the <head runat="server"></head> above the content..
Wich file are you supposed to put in the other?
One is using a masterpagefile and the other isn't.

JQuery Menu in Master Page Reloading in Every Child Page

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

Categories