I have a panel. in that panel there is one text box for some input and another one for taking date from calendar control. I have put calendar control below the second text box(i.e. txtDate), but I don't want it to be displayed when the page is loaded, instead I want a small image of calendar and on clicking that image a calendar should pop up and selected date must be captured by txtdate textbox.
Please help me with .aspx and .cs file. I'm using asp.net with C#.
Use AJAX Calender Extender. Here is the Sample Markup Code:
<asp:CalendarExtender ID="ControlIDHere" runat="server" Enabled="True"
TargetControlID="TextBoxIDHere" PopupButtonID="CalenderImageIDHere" Format="MM/dd/yyyy">
</asp:CalendarExtender>
An ASP.NET based solution for calender control is best explained here
But I would suggest you to go forward with Ajax based solution
Ajax Calender
Calender control in AJax toolkit
You can user use Jquery library in your project. Below is the example
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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 >
$(document).ready( function() {
$("[id=^datepicker]").datepicker();
} );
</script>
</head>
<body>
<form id="form1" runat="server">
<p>Date: <asp:TextBox id="datepicker" runat="server">
</p>
</form>
</body>
</html>
Related
I tried to use datepicker from jQUERY ui, but it didnt show calendar when I click textbox.
I tried my best to try different ways but it still not work.
I used this code: https://jqueryui.com/datepicker
And this is my aspx code:(I had used master page)
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=datepicker.ClientID %>').datepicker();
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:TextBox ID="datepicker" runat="server"></asp:TextBox>
</asp:Content>
Can anyone help me? thank you all firstly.
Your code worked fine for me in the form without a master paged , there is a conflict in your master page and your aspx page.
I would like my default.aspx to use masterpage but have a different body than the rest of my webpages is this possible? Basically I want my default.aspx to have a background image for the entire page but still use the masterpage because I have menu and things I would like to use on that page as well. Is this possible?
You can define the styles and everything for a particular page in Content Page and not Master Page. In your case, if you want a separate styles and background for default.aspx, you can define those styles in default.aspx page.
inside of default.aspx do
<style>
BODY { background-image: url(....image here ....);}
</style>
I know it is not the nicest pattern but... cmon, masterpages
You can inline it on default.aspx
<style>
body{
/*Background stuff here */
}
</style>
or have an if on your master page
#if(currentpage == "home")
<div id="background">
</div>
#endif
or
#if(currentpage == "home")
<body style="background-stuff-here">
#else
<body>
#endif
Put these lines in you master page head section
<head>
<link type="text/css" rel="stylesheet" href="/styles/common1.css" />
<script type="text/javascript" src="/scripts/common1.js"></script>
<asp:contentplaceholder id="ExtraStylesAndScripts" runat="server" />
</head>
And these lines to you default page
<asp:content contentplaceholderid="ExtraStylesAndScripts" runat="server">
<link type="text/css" rel="stylesheet" href="/styles/extra1.css" />
<link type="text/css" rel="stylesheet" href="/styles/extra2.css" />
<script type="text/javascript" src="/scripts/extra1.js"></script>
<script type="text/javascript" src="/scripts/extra2.js"></script>
</asp:content>
Now you are free to set different page style for different content pages.
You can change background or other appearance in "styles/extra1.css" files.
A very simple solution would be a MultiView and pass in something like an enum object telling the master page what View to display. If you in the future need to add a different design for another page you can just add a View.
I have a user control called header.aspx. In my user control if I do this it will work.
<script type="text/javascript">
function greeting(){
Alert("hi");
}
</script>
<asp:button id="button1" OnClientClick="greeting" /> </asp:button>
I am using this user control in a page called default.aspx. I tried using src="~scripts/foo.js". If I do that it does not work. The question is pretty simple I guess. How would I call a java script function in a user control which is stored in an external location( not in the page. Located in the scripts folder). Thanks in advance.
As I can understand this is clearly a path issue.
Just follow these steps might help you.
Create a .js file first. Put your code and save it in the folder you want it to.
Now Drag and Drop the js file inside the head section of your html code from the Solution Explorer window. This will give you the correct path for the js file.
The above steps is what I follow, when I create an external js file for my controls.
Also make sure you call your function in this manner also suggested by others Else your function won't get call:
<asp:button id="button1" OnClientClick="greeting();" /> </asp:button>
Just use the code below:
<script src="<%: ResolveUrl("~/Scripts/foo.js") %>"></script>
Script: test.js
function greeting() {
alert("hi");
return false;
}
user control: <asp:Button ID="button1" OnClientClick="return greeting()" runat="server" Text="click" />
Page:
<head runat="server">
<title></title>
<script src="test.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:temp ID="temp" runat="server" />
</div>
</form>
</body>
</html>
This should work now.
<asp:button id="button1" OnClick=" javascript : greeting();" /> </asp:button>
try to use it. havent trie but i think it should work.
First of all you need to create a seprate javascript file and then add this in your page in this way. add this tag in the tag of your page.
use
OnClientClick="greeting()"
you missed "()" in OnClientClick="greeting"
Please see the whole html code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="scripts/foo.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:button id="button1" runat="server" OnClientClick="greeting()" Text="hit" />
</div>
</form>
</body>
</html>
Thanks.
External javascript file reference:
<script src="yourpath/yourfilename.js"></script>
Button Control
<asp:Button ID="button1" OnClientClick="greeting();" runat="server" Text="click" />
I have created a master page, which has the following css:
body { background-image:url(images/back.jpg); }
This image is the one I want to appear on my Index page. When a user clicks the "Next" button, I want to change the image to be a different one.
How can I do this?
you can over-ride the css of master page with new css on other page. The back-ground image for body loaded first will come on back ground the second one will be ignored.
You can use masterpage placeholders to the header
<head>
<link rel="stylesheet" type="text/css" href="master.css">
<asp:contentplaceholder id="Header" runat="server" />
</head>
Then add this code to your NewPage.aspx
<% # Page Language="VB" MasterPageFile="~/Master.master" Title="Content Page 1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Header" Runat="Server">
<link rel="stylesheet" type="text/css" href="newpage.css" />
</asp:Content>
Now you can override the "CSS body" inside newpage.css
If you are loading Another page without page refresh then this will work:
HTML:
<button class="next">Next</button>
jQuery:
$(function() {
$('.next').click(function() {
$(body).css('background-image', 'url(images/back2.jpg)');
});
}):
And if navigating from one page to 2nd gets the page refreshed then
you can simply specify internal css.
I test jQuery and ASP.NET with Webcontrols and in my test load the Side everytime new if I click on the Button. The jQuery Code add a Css Class to a Label.
My aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Main.aspx.cs" Inherits="jQueryAnwendung.Main" %>
<!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>jQuery Anwendung</title>
<script src="Scripte/jquery-1.8.0.min.js" type="text/javascript"></script>
<style type="text/css">
.CssKlasse
{
background:red;
font-size:40px;
}
</style>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#<%= b1.ClientID%>").click(function (event) {
$("#<%= bild1.ClientID %>").slideToggle('slow');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="b1" runat="server" text="Bild verkleinern/vergrößern"/>
<asp:Image ID="bild1" runat="server" ImageUrl="~/Theme/net.png" Width="50" Height="50" />
</div>
</form>
</body>
</html>
What can I do?
tarasov
inside your handler, prevent the button from behaving normally:
$("#<%= b1.ClientID%>").click(function (event) {
event.preventDefault(); //prevent the control to act in its default way
$("#<%= bild1.ClientID %>").slideToggle('slow');
});
Asp button causes Post back when you click it - page reloads and your script is not executed, you can use HTML button instead or try to disable postback on this button.
if you using asp controls you have 2 ways to handle it
First is change "#b1 and "#l1" to "<%= #b1.ClientID%>" and "<%= #l1.ClientID %>" in your jQuery function
Second is to add attribute ClientIDMode="Static" to your asp:Button and asp:Label
The generated id is more verbose; open your browser and click View source. You will notice it. Copy and paste the ID into your jQuery selector.
Another way is to call b1.clientID inside your .aspx: $("<%= b1.ClientID %>"), which will output the generated clientID at runtime.
Since ASP.NET 4, StaticMode allows you to have complete control over the generated ID. For more information, check it out: http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx