I'am beginner in ASP.net. I recently created some Web Form Application with following code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="MainForm.aspx.cs" Inherits="TestAssignVariable.MainForm" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="CHECK" OnClick="Check_Data" />
<asp:Label ID="ketCekData" runat="server" Text="Label"></asp:Label>
</div>
<div>
<asp:Button ID="Button2" runat="server" Text="ASSIGN" OnClick="Assign_Data" />
<asp:Label ID="labelProcess" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
</html>
And code behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TestAssignVariable
{
public partial class MainForm : System.Web.UI.Page
{
private string file_path = "startx";
int a = 12;
private string FilePath
{
get
{
return file_path;
}
set
{
file_path = value;
}
}
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Check_Data(object sender, EventArgs e)
{
ketCekData.Text = a.ToString() ;
}
protected void Assign_Data(object sender, EventArgs e)
{
// FilePath = "AWESOME";
a = 100;
labelProcess.Text = "Data Assigned";
}
}
}
So there is two button with ID Button1 and Button2. When Button2 was clicked, then it's firing an event to change the value of variable a from 12 to 100. Button1 then displaying the value of variable a on label ketChekData. So when I click Button2 followed Button1 there must be 100 displayed in label ketCekData. But I dont understand why this is not worked: there still 12 displayed on label ketCekData.
The Value of a is declared outside the page_load .So on Every Postback value is Resetting. So create a hidden Field in Aspx
In Aspx
<asp:HiddenField ID="hdna" value="12" runat="server" />
In Cs
Remove int a=12;
protected void Check_Data(object sender, EventArgs e)
{
ketCekData.Text = hdna.value ;
}
Take a look at my dotnetfiddle here : https://dotnetfiddle.net/L8lUSY
Html
#model HelloWorldMvcApp.ViewModelExample
#{
Layout = null;
}
<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- CSS Includes -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style type="text/css">
.field-validation-error {
color: #ff0000;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-6 col-md-offset-3">
<h1>Create item</h1>
<div class="form-group parentId">
#Html.LabelFor(m => m.ParentId)
#Html.TextBoxFor(m => m.ParentId)
</div>
<button class="button1">Button 1</button>
<button class="button2">Button 2</button>
</div>
</div>
<!-- JS includes -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript">
$(function(){
$('.parentId').hide();
$('.button1').on('click', function()
{
$('.parentId').toggle();
});
$('.button2').on('click', function()
{
$('#ParentId').val('100');
});
});
</script>
</body>
</html>
It may just be easier for you to use javascript / jQuery to change the value
Related
This is webform1 code.I want to change the class of button after button click
i call the javascript function on button click...
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="valid_try2.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="JavaScript1.js"></script>
<link rel="stylesheet" href="StyleSheet1.css"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<button id="btn" class="xx" name="btn" onclick="abc()">Button</button>
</div>
</form>
</body>
</html>
This is stylesheet file where i create class
.xx {
border: 5px solid green;
}
.yy {
border: 5px solid red;
}
This is javascript file
function abc() {
$("#btn").removeClass("xx");
$("#btn").addClass("yy");
}
Your button will trigger a form post (PostBack), so all the things you do with abc() will be lost.
But since your tag is asp.net you can do this:
<asp:Button ID="Button1" runat="server" Text="Button" CssClass="xx" OnClick="Button1_Click" />
And then in code behind:
protected void Button1_Click(object sender, EventArgs e)
{
//change the class and do other stuff after the button click
Button1.CssClass = "yy";
}
If you mislabeled your question and you want a pure javascipt/css solution, add type="button" to the button and no form post will be performed.
Please Try below code snipped hope it will help.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").toggleClass('classB');
});
});
</script>
<style>
.classA{color:red;}
.classB{color:yellow;}
</style>
</head>
<body>
<h2 class="">Click the button to change the class</h2>
<p id="p1" class="classA">I will be changed when you pressed click me</p>
<button>Click me </button>
</body>
</html>
Everything looks OK. Just add JQuery reference to aspx file.
Before add the following line.
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
I think you need something like this
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="../js/jquery.js" type="text/javascript"></script>
<title></title>
<style>
.xx {
border: 5px solid green;
}
.yy {
border: 5px solid red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<button id="btn" class="xx" name="btn">Button</button>
</div>
</form>
<script>
$(function() {
$('#btn').click(function(e) {
e.preventDefault();
var a = $(this).attr('class');
console.log(a);
if (a === 'xx') {
$(this).removeAttr('class');
$(this).addClass("yy");
} else {
$(this).removeAttr('class');
$(this).addClass("xx");
}
});
})
</script>
</body>
</html>
I read a tutorial about Asp.Net and copy some of the code in it it doesn't compile and I can't understand why.
Here's my code:
Default.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="MyFonts" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
body
{
font-family: Verdana, Arial, Sans-Serif;
font-size: small;
color: yellowgreen;
}
.heading1
{
font-weight: bold;
font-size: large;
color: lime;
}
.heading2
{
font-weight: bold;
font-size: medium;
font-style: italic;
color: #C0BA72;
}
.blockText
{
padding: 10px;
background-color: #FFFFD9;
border-style: solid;
border-width: thin;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btSubmit" Text="Submit" runat="server" OnClick="Button_Click" />
<div>
<asp:Label ID="Label1" runat="server" />
</div>
<div>
<asp:Label CssClass="heading1" ID="Label2" runat="server" Text="This Label Uses heading1"/>
<br />
This is sample unformatted text.<br /><br />
<asp:Label CssClass="heading2" ID="Label3" runat="server" Text="This Label Uses heading2"/>
<br />
Here's more unformatted text.<br />
<br />
<div class="blockText" id="DIV1" runat="server">
This control uses the blockText style. This control uses the blockText style. This
control uses the blockText style. This control uses the blockText style.
</div>
<asp:Label ID="lblTime" runat="server" OnInit="lblTime_Init"/>
</div>
</div>
</form>
</body>
</html>
Default.aspx.cs:
public partial class MyFonts : System.Web.UI.Page
{
private void Page_Load(Object sender, EventArgs e)
{
}
public void Button_Click(Object sender, EventArgs e)
{
Response.Write(((Button)sender).Text);
Label1.Text = "You clicked <b>" + ((Button)sender).Text + "</b>";
}
protected void lblTime_Init(object sender, EventArgs e)
{
lblTime.Font.Name = "Verdana";
lblTime.Font.Size = 20;
lblTime.Font.Underline = true;
lblTime.Font.Bold = true;
lblTime.Font.Italic = true;
lblTime.Font.Overline = true;
lblTime.Font.Strikeout = true;
lblTime.Text = DateTime.Now.ToString() + ". Font Name: " + lblTime.Font.Name;
}
}
On default.aspx.cs it doesn't recognize lblTime and Label1.
Why does it happen?
Earlier, before I added LabelTime it runs just fine and I can't understand what's wrong with the code I added.
Edit: in Default.aspx.cs no control from Default.aspx recognized...
Thank you
It seems that the code was right but I used probably a wrong project, that's why it didn't compile...
I am developing MVC application with Razor syntax.
I am trying to Slidetoggle the Div, means when I click one Div other div should be expanded.
Its work fine after loading, but why its already expanded when page loads ?
but in my application its already expanded/toggled.
How to solve this ?
#model IEnumerable<CRMEntities.Comment>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!DOCTYPE html>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function clearText()
{
document.getElementById('Comment').value = "";
}
</script>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".ShowComments").click(function () {
$(".ParentBlock").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.ParentBlock
{
position:relative;
}
div.ShowComments
{
position:relative;
}
</style>
</head>
<body>
#{
<p class="ShowComments">Show Comments</p>
<div class="ParentBlock">
#foreach (var item in Model)
{
<div id="OwnerName">
<span class="EmpName"> #Html.ActionLink(item.Owner.FullName, "Details", "EMployee", new { id = item.OwnerId }, new { #style = "color:#1A6690;" })</span>
#Html.DisplayFor(ModelItem => item.CommentDateTime)
</div>
<div id="CommentTextBlock">
#Html.DisplayFor(ModelItem => item.CommentText)
</div>
<br />
}
</div>
#Html.TextArea("Comment", "", 5, 80, "asdsd")
<input type="button" value="Add Comment"/>
<input type="button" value="Clear" onclick="clearText()"/>
}
</body>
</html>
The summary of the problem is, Div gets toggled before calling Jscript.
How to avoid it ?
set the divs that should be hidden to hidden with css. this way it will be closed and slide open when you toggle it.
Greetings,
I'm trying to select item from asp.net list box then assign it to a text box so when a click on an item from the list box should appear in the text box.
I tried the code listed down but it did not work.
please advice how to do this!!
............................
updated code
..........................
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="IMAM_APPLICATION.WebForm3" %>
<!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>
<script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#<%=ListBox.ClientID %>").change(function() {
$("#<%=text.ClientID %>").val($(this).val());
});
});
</script>
<asp:ListBox ID="ListBox" runat="server">
<asp:ListItem Value="one">1</asp:ListItem>
<asp:ListItem Value="two">2</asp:ListItem>
</asp:ListBox>
<asp:TextBox ID="text" runat="server"
style = "position:absolute; top: 267px; left: 45px;"></asp:TextBox>
</div>
</form>
</body>
</html>
You can do it like this:
$(function() {
$("#<%=ListBox.ClientID %>").change(function() {
$("#<%=text.ClientID %>").val($(this).val());
});
});
Replace your $(document).ready(function() { }) with the above code, and when you change the dropdown, the value will go in the text input, e.g. one, or two.
I tried with the following but it doesn't work
var txtlat=document.getElementById('TextBox1').value=GMap1.getCenter().lat();
var txtlong=document.getElementById('TextBox2').value=GMap1.getCenter().lng();
It gives a JavaScript error as "Object doesn't support this property or method".
How can i do this????
I really need help...
Thank you!
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication5._Default" %>
<%# Register assembly="GMaps" namespace="Subgurim.Controles" tagprefix="cc1" %>
<!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>
<cc1:GMap ID="GMap1" runat="server"
Key="ABQIAAAAs98ZVKM_IHFkRP_EavW_DhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQGoS16N7wYnBPhgtjTxMaUVN58kA" />
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</div>
<script type="text/javascript">
var txtlat=document.getElementById('TextBox1').value=GMap1.getCenter().lat();
var txtlong=document.getElementById('TextBox2').value=GMap1.getCenter().lng();
</script>
</form>
</body>
</html>
2nd UPDATE: Further to the updated question, you also have another problem with the server-side textbox controls. They cannot be referenced from JavaScript using document.getElementById() as you are doing.
You may either use normal HTML controls: <input type="text" id="textbox1" /> or else you would have to use something like document.getElementById('<%= TextBox1.ClientID %>') to reference the textbox from JavaScript.
1st UPDATE: Further to the comments, the examples below have been updated to return the lat/lng of where the mouse is clicked.
You may want to check out the following examples, which have been tested to work correctly:
Using the v3 API:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps getCenter()</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<input type="text" id="textbox1" />
<input type="text" id="textbox2" />
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(35.55, -25.75),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, 'click', function(event) {
if (event.latLng) {
document.getElementById('textbox1').value = event.latLng.lat();
document.getElementById('textbox2').value = event.latLng.lng();
}
});
</script>
</body>
</html>
Using the v2 API:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps getCenter()</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map" style="width: 500px; height: 400px;"></div>
<input type="text" id="textbox1" />
<input type="text" id="textbox2" />
<script type="text/javascript">
var map = new GMap2(document.getElementById("map"));
var centerPoint = new GLatLng(35.55, -25.75);
map.setCenter(centerPoint, 2);
GEvent.addListener(map,"click", function(overlay, latlng) {
if (latlng) {
document.getElementById('textbox1').value = latlng.lat();
document.getElementById('textbox2').value = latlng.lng();
}
});
</script>
</body>
</html>
Screenshot from the above examples:
Did you confirm the value returned from getCenter is not null? It should be a LatLng object, but maybe it's returning null... are you sure the center has been set yet? Also, what object type is GMap1? How do you create that object?
I found the answer forgot to mention here so the answer was very simple
Msg1 and Msg2 are DIV tags
protected string Gmap1_Click(object s, Subgurim.Controles.GAjaxServerEventArgs e)
{
return "document.getElementById('Msg1').innerHTML="
+ e.point.lat.ToString() + ";" + "document.getElementById('Msg2').innerHTML="
+ e.point.lng.ToString();
}