So just starting out with asp.net... I want to display my textbox when my checkbox is checked, but this doesn't seem to be working. I also tried with the visible property, but that didn't work either. What am I doing wrong exactly?
Code:
protected void checked_CheckedChanged(object sender, EventArgs e)
{
text.Style["display"] = "block";
}
Layout:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<p>gehuwd/samenwonend<asp:checkbox runat="server" ID="checked" OnCheckedChanged="checked_CheckedChanged"></asp:checkbox>
</p>
<asp:TextBox runat="server" ID="text" style="display:none"></asp:TextBox>
</form>
</body>
</html>
Use the AutoPostBack property for checkbox and set it to true:
<asp:checkbox runat="server" ID="checked" OnCheckedChanged="checked_CheckedChanged" AutoPostBack="true"></asp:checkbox>
You can use add css property of textbox in c# as given below. If your checkbox OnCheckedChanged is not working then you can set property AutoPostBack is true in checkbox.
protected void checked_CheckedChanged(object sender, EventArgs e)
{
text.Attributes.Add("display","block");
}
You can also do this completely client side, using jQuery or javascript.Making a post back to the server everytime you need to change the visual appearance of your HTML can put unnecessary strain on the server and have a negative effect on the user experience by slowing down the overall performance of your site.
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var id = "<%: text.ClientID %>";
id = "#" + id;
$(id).hide();
$("#chkShowHide").change(function () {
if (this.checked) {
$(id).show();
}
else{
$(id).hide();
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="chkShowHide" type="checkbox" /> Show\Hide<br />
<asp:TextBox runat="server" ID="text"></asp:TextBox>
</form>
</body>
Related
I have this WebForm Html:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="GetLink.aspx.cs" Inherits="GetLink" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="hidden" runat="server" id="hdnVal" value="55"/>
</div>
</form>
</body>
</html>
And i want to add to this code a JavaScript function and run it with this code:
protected void Page_Load(object sender, EventArgs e)
{
if (!ClientScript.IsStartupScriptRegistered("key1"))
{
ClientScript.RegisterStartupScript(GetType(), "key1", #"<script type=""text/javascript"">function callMyJSFunction() { document.getElementById(""hdnVal"").value='5'; }</script>");
}
ClientScript.RegisterStartupScript(this.GetType(), "key1", "<script>callMyJSFunction();</script>");
string resutOfExecuteJavaScript = hdnVal.Value;
}
When i run it the value of hdnVal keep the 55 value and not change. Any idea what is the problem?
Your code in Page_Load event should call ClientScript.RegisterClientScriptBlock when registering the JavaScript function of callMyJSFunction, whereas in your code you are registering this function as a startup script. This is the only mistake in your code.
So, if you change your server-side code to as below, then it will work according to your expectations.
protected void Page_Load(object sender, EventArgs e)
{
if (!ClientScript.IsClientScriptBlockRegistered("key1"))
{
//register your javascript function
ClientScript.RegisterClientScriptBlock(GetType(), "key1", #"<script type=""text/javascript"">function callMyJSFunction() { document.getElementById(""hdnVal"").value='5'; }</script>");
}
ClientScript.RegisterStartupScript(this.GetType(), "key1", "<script>callMyJSFunction();</script>");
string resutOfExecuteJavaScript = hdnVal.Value;
}
The first problem is you are creating function in Clientscript while you can simply put the function in javascript and then just do the calling part.Second problem is that the time your function is calling that hiddenfield for view its not available on document simply means stop putting your code on page load and use a button click event instead.Third problem is you are using multiple inverted commas at so many places which aren't required.
This worked for me
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('document').ready()
{
function callMyJSFunction()
{
debugger;
document.getElementById('hdnVal').value = '5';
alert(document.getElementById('hdnVal').value);
}
// - including fonts, images, etc.
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="hidden" runat="server" id="hdnVal" value="55"/>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</div>
</form>
</body>
</html>
and on cs page
protected void Button1_Click(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "key1", "<script>callMyJSFunction()</script>",false);
string resutOfExecuteJavaScript = hdnVal.Value;
}
I want to display the search result in the Fancybox. The code works fine in the web form, but when i integrate with the master page, the fancy box is not opening. Please give me a solution!
I created two web forms, Default1.aspx and Default2.aspx
The code in the Default1.aspx is given below,
<head runat="server">
<title></title>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script lang="javascript" type="text/javascript">
$(document).ready(function (){
$('#fancybox').fancybox({
autoDimensions: false,
height: 400,
width: 700,
type: "iframe"
});
});
</script>
<a id="fancybox" runat="server" style=" visibility: hidden "></a>
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</form>
</body>
**Default1.aspx.cs**
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
TextBox1.Text = Request.QueryString["cargoNo"];
}
}
protected void Button1_Click(object sender, EventArgs e)
{
fancybox.Attributes["href"] = "~/Default2.aspx?cargoNo=" + TextBox1.Text.Trim();
Literal1.Text = "<script> $(document).ready(function() {$(\"#fancybox\").trigger('click');});</script>";
clear();
}
public void clear()
{
TextBox1.Text = "";
}
}
In the Default2.aspx I added a Sql Datasource and used Gridview to display it.
When you enter the number in the text box and click button1. the serach will initiate and display the result in the fancybox. The above code is working great.
When i added this to the Master page the Fancybox is not triggering. Twhen button is clicked, the page just refresh. All replies are appreciated. I am new to asp.net. Please help me to solve this problem.
First of all, make sure You don't call a Jquery source in your Master Page, because I see you are calling Jquery on your Default1.aspx, since Jquery should be load once. Second, if you don't want your button make a Postback, add this to your button: UseSubmitBehavior="False". Hope this help
When a user wants to upload a file (currently there are 4 places in the form that allow for this), they first have to “Choose File” and then they have to click on “Upload”. If they miss the 2nd "Upload" step, there is no indication to them or us.
Is there a way to combine the “two-step” process to a single step (select and upload).
Use this link to know more about it
http://www.c-sharpcorner.com/UploadFile/2b481f/uploading-a-file-in-Asp-Net-web-api/
And you can also use this code
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.9.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="fileupload1" runat="server" />
<asp:Button ID="btn" runat="server" OnClick="btn_Click" Text="upload" style="display:none" />
</div>
<script type="text/javascript">
var isfirst = true;
$(function () {
$('#<%= fileupload1.ClientID %>').on('change', function (e) {
console.log('change triggered');
$('#<%= btn.ClientID%>').trigger('click'); // trigger the btn button click which i have hidden using style='display:none'
});
});
</script>
</form>
</body>
Code behind
protected void btn_Click(object sender, EventArgs e)
{
//TODO
}
I have a checkbox, label and button control.
If the checkbox is not checked and button is clicked, I need to display a message in label stating to check the checkbox first.
If the checkbox is checked and then the button clicked, it should allow me to proceed.
This is very similar to the terms and conditions screens,where if you dont check the checkbox - you are not allowed to proceed.
I am using the below javascript. Please let me know how do I accomplish this functionality?
<script type="text/javascript">
function testCheckbox() {
var obj = document.getElementById('<%= chkTerms.ClientID %>');
if (obj.checked == false) {
document.getElementById("lblCheck").style.visibility = "visible";
return false;
}
}
</script>
<asp:Label ID="lblTerms" runat="server" Text="I agree to the Terms and Conditions"> </asp:Label>
<asp:Label ID="lblCheck" runat="server" Text="Please agree to the terms and conditions to proceed"></asp:Label>
<asp:Button ID="btnProceed" runat="server" OnClientClick ="return testCheckbox()" OnClick="btnProceed_Click" Text="Submit" />
ASPX:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 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></title>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#lblCheck').hide();
$('#btnProceed').click(function () {
var $this = $('#chkTerms')
if ($this.is(':checked')) {
$('#lblCheck').hide();
return true;
} else {
$('#lblCheck').show();
return false;
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:CheckBox ID="chkTerms" runat="server" Text="I agree to the Terms and Conditions"/><br />
<asp:Label ID="lblCheck" runat="server" Text="Please agree to the terms and conditions to proceed"/><br />
<asp:Button ID="btnProceed" runat="server" Text="Submit" onclick="btnProceed_Click1" />
</form>
</body>
</html>
Code behind:
protected void btnProceed_Click1(object sender, EventArgs e)
{
Response.Write("DD");
//your proceed
}
I have one dropdownlist in my asp.net web application. I want to set visibility for that dropdownlist in the Client side javascript such as visible=true or false. Can any one know solution for that means it will really appreciated.
Thank you..
Use jquery .show() and .hide() methods. You will need to find the dropdownlist using the clientid value like so:
$('#<%= myDropDown.ClientID %>').show() // shows dropdown
$('#<%= myDropDown.ClientID %>').hide() // hides dropdown
This is a sample with Javascript alone:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript">
function doToggle() {
var ddl = document.getElementById("<%Response.Write(DropDownList1.ClientID.ToString()); %>");
if (ddl.style.display == "none") {
ddl.style.display = "block";
}
else {
ddl.style.display = "none";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<input id="Button1" onclick="doToggle();" type="button" value="Toggle" />
</div>
</form>
</body>
</html>
Good luck!