I am using calendar control with ASP.NET to fill in a text box with the selected date. When a date is selected, it should be displayed in the label But the label doesnot show the selected date. Please help. Thankyou.
Here is my code to get the date into the label:
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<script runat="server">
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
Label1.Text = Calendar1.SelectedDate.ToString();
}
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
MakeAppointment
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<form id="form1" runat="server" style="height: 388px">
<h2>MakeAppointment<asp:Calendar ID="Calendar1" runat="server"
onselectionchanged="Calendar1_SelectionChanged"></asp:Calendar>
</h2>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</form>
</asp:Content>
Try specifying language="c#".
<script language="c#" runat="server">
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
Label1.Text = Calendar1.SelectedDate.ToString();
}
</script>
Just a suggestion, you should go for jQuery UI Datapicker
Demo: Datapicker
Code Sample:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
Related
Here, when I give runat="server" to the <input type=text , javascript doesn't work anymore, while without runat="server" the program runs correctly.
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage2.master" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link href="js-persian-cal.css" rel="stylesheet" />
<script src="js-persian-cal.min.js"></script>
<link href="jspc-gray.css" rel="stylesheet" />
<link href="jspc-peach.css" rel="stylesheet" />
<link href="jspc-royal_blue.css" rel="stylesheet" />
<link href="main.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div>
<%--This line is executed on this page. But when I use runat="server" it doesn't run anymore--%>
<asp:TextBox class="pdate" runat="server" id="pcal1"></asp:TextBox> <%--This line does not work--%>
<%-- <input type="text" class="pdate" id="pcal1">--%> <%--// This line is executed--%>
<script type="text/javascript">
var objCal1 = new AMIB.persianCalendar('pcal1');
</script>
</div>
</asp:Content>
masterpage img
enter image description here
<asp:TextBox class="pdate" runat="server" id="pcal1"></asp:TextBox> <%--This line does not work--%>
<%-- <input type="text" class="pdate" id="pcal1">--%> <%--// This line is executed--%>
<script type="text/javascript">
var objCal1 = new AMIB.persianCalendar('pcal1');
</script>
I'm new to working with the AJAX UpdatePanel and I've tried searching for an answer to this question and haven't found a solution yet.
I have multiple controls in an UpdatePanel since I am hiding and showing panels based on different button clicks. Also inside the UpdatePanel is a FileUpload control. Everything works fine until I upload a file. After that, none of the controls, like buttons or radio button lists, or JQuery scripts, like a datepicker, fire in the UpdatePanel after the upload.
Here is the aspx code:
<%# Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Admin.aspx.cs" Inherits="Site.Admin" %>
<%# MasterType virtualPath="~/Site1.master"%>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-timepicker-addon.js"></script>
<link rel="stylesheet" href="Content/jquery-ui-timepicker-addon.css">
<script type="text/javascript">
function pageLoad() {
$(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
$('.picker').datetimepicker();
}
});
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True"></asp:ScriptManager>
<asp:UpdatePanel ID="adminUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="True" runat="server">
<ContentTemplate>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<asp:TextBox ID="tb_EndDate" class="form-control picker" runat="server"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<asp:RadioButtonList ID="rbl_Active" runat="server" OnSelectedIndexChanged="rbl_Active_SelectedIndexChanged" RepeatDirection="Horizontal" CellPadding="4" CellSpacing="4" AutoPostBack="True">
<asp:ListItem>Yes</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
</asp:RadioButtonList>
</div>
<div class="form-group">
<label>Upload Photo</label>
<asp:FileUpload ID="imageFileUpload" runat="server" />
<asp:Button class="btn btn-primary" ID="btn_UploadImg" runat="server" Text="Upload Image" OnClick="btn_UploadImg_Click" CausesValidation="False" />
<asp:Button ID="btn_CancelImg" OnClick="btn_CancelImg_Click" class="btn btn-primary" runat="server" Text="Change/Remove Image" CausesValidation="False" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
And the code behind relating to the file upload:
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager.GetCurrent(this).RegisterPostBackControl(this.btn_UploadImg);
}
protected void btn_UploadImg_Click(object sender, EventArgs e)
{
bool isUploaded = uploadImage(imageFileUpload);
if (isUploaded)
{
btn_CancelImg.Visible = true;
}
}
I'm not sure what I'm doing wrong. It worked fine when run from Visual Studio, but when pushed to the server it all fails
Instead of setting Visible to true/false, can you please try:
<asp:Panel ID="pnlToHide" runat="server" style="display:none">
When you have to show, you can use the following:
protected void btnShow_Click(object sender, EventArgs e)
{
pnlToHide.Attributes["style"] = "display: '';";
}
Also, you can try fullpostback/render by using:
<Triggers>
<asp:PostBackTrigger ControlID="btnFileUpload"/>
</Triggers>
Is there any way to render the text as it is displayed on the browser instead of the underlying html. I am trying to emulate the javascript's .innerText() functionality on the server side code.
For instance for the following code is it possible to render "Hello World" instead of
<div id="Panel1">
<div>Hello World</div>
</div>
Here is the code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="RenderControl.aspx.cs"
Inherits="AccessibleMenu.RenderControl" Trace="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></title>
</head>
<body>
<form id="form1" runat="server">
<asp:Panel ID="Panel1" runat="server">
<div>Hello World</div>
</asp:Panel>
</form>
</body>
</html>
<script type="text/C#" runat="server">
protected void Page_Load(object sender, EventArgs e)
{
System.Text.StringBuilder sb = new System.Text.StringBuilder();
System.IO.StringWriter sw = new System.IO.StringWriter(sb);
HtmlTextWriter htw = new HtmlTextWriter(sw);
Panel1.RenderControl(htw);
Trace.Write(sb.ToString());
}
</script>
You have to change your HTML to use literal :
<body>
<form id="form1" runat="server">
<asp:Literal ID="HelloWorld" runat="server"></asp:Literal>
</form>
</body>
Your C# :
protected void Page_Load(object sender, EventArgs e)
{
HelloWorld.Text = 'Your text without HTML':
}
When markup is not needed then PlaceHolder and Literal are your friends :)
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="RenderControl.aspx.cs" Inherits="AccessibleMenu.RenderControl" Trace="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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<asp:Literal ID="Literal1" runat="server" Text="Literal1"></asp:Literal>
</asp:PlaceHolder>
</div>
</form>
</body>
</html>
<script type="text/C#" runat="server">
protected void Page_Load(object sender, EventArgs e)
{
System.Text.StringBuilder sb = new System.Text.StringBuilder();
System.IO.StringWriter sw = new System.IO.StringWriter(sb);
HtmlTextWriter htw = new HtmlTextWriter(sw);
PlaceHolder1.RenderControl(htw);
Trace.Write(sb.ToString());
}
</script>
Code produces an "error object expected" on:
<script type ="text/javascript" >
var doRedirect = function() { location.href='http://www.google.com' };
$("#<%=Button1.ClientId%>").click(function() {
$("#<%=Label1.ClientId%>").show();
window.setTimeout("$('#<%=Label1.ClientId%>').fadeOut('slow', doRedirect)", 10000);
});
</script>
What is wrong in this code?
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div style="color: #009933; font-weight: 700">
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
<p style="color: #336600; font-weight: 700">
<asp:Label ID="Label1" runat="server" Text="Label" Visible="False"></asp:Label>
</p>
</form>
<script type ="text/javascript" >
var doRedirect = function() { location.href='http://www.google.com' };
$("#<%=Button1.ClientId%>").click(function() {
$("#<%=Label1.ClientId%>").show();
window.setTimeout("$('#<%=Label1.ClientId%>').fadeOut('slow', doRedirect)", 10000);
});
</script>
</body>
</html>
You probably need to include a jQuery reference inside your <head>
<script src="javascript/jquery-1.3.2.min.js" type="text/javascript"></script>
http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=609
IF you do have jQuery and that is not the problem, you will not be able to make a label appear using javascript if you have it hidden server side...
This will not be part of the page, so you cannot just make it visible:
<asp:Label ID="Label1" runat="server" Text="Label" Visible="False"></asp:Label>
You could hide it like this perhaps
<asp:Label ID="Label1" runat="server" Text="Label" style="display:none;"></asp:Label>
Does that help?
I have calender datetimepicker jquery.
when I am calling this in simple aspx page then its working fine but when i am calling in the page where master page attach then its not working.
Here's the code that I am using:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default11.aspx.cs"
Inherits="Default11" %>
<!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="ui.all.css" rel="stylesheet" type="text/css" />
<link href="demos.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="ui.datepicker.js" type="text/javascript"></script>
<script src="ui.core.js" type="text/javascript"></script>
<title>Untitled Page</title>
</head>
<script type="text/javascript">
$(function() {
$("#txt").datepicker();
});
</script>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txt" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
That is working fine.
But when I am calling like this then its not showing calender
<%# Page Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="CAL.aspx.cs"
Inherits="admin_CAL" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="CPHMain" Runat="Server">
<link href="ui.all.css" rel="stylesheet" type="text/css" />
<link href="demos.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="ui.datepicker.js" type="text/javascript"></script>
<script src="ui.core.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#TextBox1").datepicker();
});
</script>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</asp:Content>
ASP.net changes the ID of your control - you see it clearly by checking the source of your generated page. Try:
$("[id$='TextBox1']").datepicker();
This checks for an element who's ID ends with "TextBox1".
Alternately, you can solve this at server side:
$('#<%= TextBox1.ClientID %>').datepicker();
Is there an element with an id of TextBox1? If you open the page in Firefox and use the Firebug console what kind of error is it spitting out?
You need to be a bit more informative for us to be able to help you.