Hi and Thanks in Advance,
I am populating asp:label in c# with displays some latitudes/longitude range boundaries and then validating.
asp:
<script type="text/javascript" language="javascript">
window.bound = "<%= this.javaSerial.Serialize(this.rangeLat_Bounds) %>";
//alert(bound);
</script>
.
.
.
<asp:TabPanel ID="TabPanelLatLongCoord" runat="server" HeaderText="Lat/Long" TabIndex="1">
<ContentTemplate>
<div class="coord-btn btnLat_Long">
<asp:Button ID="btnDd" runat="server" Text="D.d" CssClass="coordinate-btn black" OnClick="Dd_Click" TabIndex="1" />
<asp:Button ID="btnDMS" runat="server" Text="DMS" CssClass="coordinate-btn black" OnClick="DMS_Click" TabIndex="1" />
<asp:Button ID="btnDMm" runat="server" Text="DM.m" CssClass="coordinate-btn black" OnClick="DMm_Click" TabIndex="1" />
</div>
<br />
<ul>
<li><span class="container-label">
<asp:Label ID="lblLat" runat="server" Text="Latitude" TabIndex="1"></asp:Label>
</span>
<asp:TextBox ID="txtLat" runat="server" CssClass="container-input-field" SkinID="NumTextUpDown" TabIndex="1"></asp:TextBox>
<asp:Label ID="rangeSetUp_Lat" runat="server" Text=""></asp:Label>
<asp:CustomValidator ID="Lat_Validator" runat="server" ControlToValidate="txtLat"
CssClass="errorMessage" ToolTip="Wrong Latitude Format" ClientValidationFunction="validate_Lat" TabIndex="1">
<img alt="" src="images/no.png" />
</asp:CustomValidator>
<asp:CustomValidator ID="RangeLat_CustomValidator" runat="server" ControlToValidate="txtLat"
CssClass="errorMessage" ToolTip="Latitude Out Of Range" ClientValidationFunction="rangeLat_validator" TabIndex="1">
<img alt="" src="images/no.png" />
</asp:CustomValidator>
</li>
<li><span class="container-label">
<asp:Label ID="lblLon" runat="server" Text="Longitude" TabIndex="1"></asp:Label>
</span>
<asp:TextBox ID="txtLon" runat="server" CssClass="container-input-field" SkinID="NumTextUpDown"></asp:TextBox>
<asp:Label ID="rangeSetUp_Lon" runat="server" Text="" TabIndex="1"></asp:Label>
<asp:CustomValidator ID="Lon_Validator" runat="server" ControlToValidate="txtLon"
CssClass="errorMessage" ToolTip="Wrong Longtitude Format" ClientValidationFunction="validate_Lon">
<img alt="" src="images/no.png" />
</asp:CustomValidator>
</li>
</ul>
</ContentTemplate>
</asp:TabPanel>
C#
protected void Dd_Click(object sender, EventArgs e)
{
.
.
.
Ranges range = new Ranges(rangeId);
String lowLat = parseOut(getCompassLat(range.LowLat));
String highLat = parseOut(getCompassLat(range.HighLat));
String rangeLat_Bounds = lowLat + " - " + highLat;
rangeSetUp_Lat.Text = rangeLat_Bounds;
JavaScriptSerializer js_serializer = new JavaScriptSerializer();
.
.
.
}
external JS:
function rangeLat_validator(oSrc, args) {
//var bound = <%= this.javaSerial.Serialize(this.rangeLat_Bounds) %>;
var input = args.Value;
alert(window.bound);
}
When the user clicks the different buttons, it reformats asp:label as a different format for latitude and longitude.
Problem is I can't get the rangeSetUp_Lat ID value in JS.
Try wrapping the serialized value in quotes:
var bound = "<%= this.javaSerial.Serialize(this.rangeLat_Bounds) %>";
If you still have problems after this, do you get any errors in the console?
EDIT:
It looks like the op was calling the serialization code from an external js file.
Server side code only works in the main html file, so move the Serialize call in the main html, and bind it to a global variable (it would be better if you had a namespace for your vars, globals are bad in js):
window.bound = "<%= this.javaSerial.Serialize(this.rangeLat_Bounds) %>";
And then access bound from the js function, simply by calling window.bound. Just make sure the js is called after the bound variable has been assigned in the html.
Related
I thought this could be easily achieved with Jquery or ASP.NET Ajax but not finding a solution or able to create one. I'm close with the below but not able to return value to lblStatus during loop. Or maybe way to use just Jquery and AJAX.
JQuery
<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
<script>
function validateAdd() {
var myExtender = $find('ProgressBarModalPopupExtender');
myExtender.show();
return true;
}
</script>
HTML
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<ajaxToolkit:ModalPopupExtender ID="ProgressBarModalPopupExtender" runat="server" BackgroundCssClass="ModalBackground" BehaviorID="ProgressBarModalPopupExtender" TargetControlID="hiddenField" PopupControlID="Panel1" DynamicServicePath="" Enabled="True" />
<asp:Panel ID="Panel1" runat="server" Style="display: none; background-color: #C0C0C0;">
<p class="wait">Please wait!</p>
<asp:Label ID="lblStatus" runat="server" Text=""></asp:Label>
</asp:Panel>
<asp:HiddenField ID="hiddenField" runat="server" />
<input type="submit" value="Process Records" id="process" causesvalidation="False" onclick="javascript: return validateAdd();" onserverclick="btnProcess_ServerClick" runat="server" />
</form>
Then on the code behind, do a loop and push status on each loop and then hide process dialog. If I could show progress even better, but just trying to show current record processing.
protected void btnProcess_ServerClick(object sender, EventArgs e)
{
//Example Test Looping Through Slow Process
string[] arr1 = new string[] { "record_one", "record_two", "record_three" };
foreach( string s in arr1)
{
lblStatus.Text = "Processing.." + s;
Thread.Sleep(2000);
}
ProgressBarModalPopupExtender.Hide();
}
The part of this assignment that I'm stuck on is this: The user must enter a state abbreviation in the "State" field (which is a standard textbox). However, I'm supposed to make sure that the the characters entered in the textbox are a valid state abbreviation. So I create an array of all 50 states, and then used a custom validator to accept the user input and compare it to all 50 state abbreviations using a for loop. However, I'm getting an error that says I haven't created a definition for an event (stateArrayCheck) even though I know I have! I have a lot more work to do on this project, so this is really frustrating being stuck on this part of the assignment. Here's my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
void stateArrayCheck (Object source, ServerValidateEventArgs args)
{
string[] states = new string[49];
states[0] = "AL";
states[1] = "AK";
...
states[48] = "WI";
states[49] = "WY
for(int i=0, i <= states.count, i++)
{
if(valState.text != states[i])
{
Response.Write("Please enter a valid US state.";
}
}
}
</script>
<style>
#name {
float: left;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id ="name">
<asp:Label id="lblFirstName" Text="First Name:" AssociatedControlID="txtFirstName" Runat="server" />
<asp:TextBox id="txtFirstName" Runat="server" />
<asp:RequiredFieldValidator id="reqFirstName" ControlToValidate="txtFirstName" Text="(Required)" Runat="server" />
</div>
<div>
<asp:Label id="lastName" text="Last Name:" runat="server" />
<asp:TextBox id="txtLastName" Runat="server" />
<asp:RequiredFieldValidator id="reqLastName" ControlToValidate="txtLastName" Text="(Required)"Runat="server" />
<asp:Label id="city" text="City:" runat="server" />
<asp:TextBox id="txtCity" Runat="server" />
<asp:RequiredFieldValidator id="reqCity" ControlToValidate="txtCity" Text="(Required)" Runat="server" />
<asp:Label id="state" text="State:" runat="server" />
<asp:TextBox id="valState" MaxLength="2" Width="20" Runat="server" />
<asp:CustomValidator id="reqState" ControlToValidate="valState" OnServerValidate="stateArrayCheck" Text="(Required)" Runat="server" />
</div>
</form>
</body>
</html>
I know you may not be a huge fan of validators. My teacher isn't either, but they're required for this assignment. Any help would be GREATLY appreciated. Thank you.
unless this is a typo the last line is missing a quote and semi colon
states[49] = "WY
You also declare the array for 49 elements then assign 50 elements to it.
string[] states = new string[49];
You should declare for 50 and 49 is the 50th element.
string[] states = new string[50];
Scenario: I have a modal-style div that will be shown when the user clicks a button. At the time the div is shown, I need to get some data from the back-end to fill in some fields. Additionally, I'd like to use the jQuery method I use for all my modal windows (fades in the modal div, displays a background div as well as enabling the use of ESC key or "click offs" to close the modal).
It looks something like this:
<asp:ScriptManager ID="sc" runat="server" />
<asp:UpdatePanel ID="updForm" runat="server">
<ContentTemplate>
<h4>Testing jQuery calls combined with code behind actions</h4>
<div class="pad-content">
<asp:LinkButton ID="lnkShowIt" runat="server" OnClick="lnkShowIt_Click" Text="Load Form" OnClientClick="showForm()" />
<asp:Panel ID="pnlPopup" ClientIDMode="Static" runat="server" CssClass="box-modal" style="width:500px;display:none;z-index:1001">
<div class="header">Edit Estimate X</div>
<div class="content">
<div class="window">
<h5>Test Form</h5>
<asp:TextBox ID="tbxTime" runat="server" />
<br />
<asp:TextBox ID="tbxText" runat="server" Width="150px" />
<br />
<asp:LinkButton ID="lnkValidate" runat="server" CssClass="link-button-blue" Text="Validate" OnClick="lnkValidate_Click" />
</div>
</div>
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div id="backgroundPopup"></div>
So ... lnkShowIt calls both the jQuery (which will show pnlPopup) as well as the C# (which will populate tbxTime).
jQuery method actually just calls another method from a common js library I have that does the modal window stuff - I don't think that actual code is the problem but here is the simple function used for this page:
<script type="text/javascript" language="javascript">
function showForm() {
loadPopup('#pnlPopup');
}
</script>
Code behind methods look like this:
protected void lnkShowIt_Click(object sender, EventArgs e)
{
tbxTime.Text = System.DateTime.Now.Second.ToString();
}
protected void lnkValidate_Click(object sender, EventArgs e)
{
if (tbxTime.Text == tbxText.Text)
{
Response.Redirect("DynamicBoxesWithJQuery.aspx?mode=success");
}
else
{
tbxText.Style["border"] = "1px solid red";
}
}
I'm able to generate some level of success by doing the following but it seems like just a major hack and I have to assume there's a better approach:
protected void lnkShowIt_Click(object sender, EventArgs e)
{
tbxTime.Text = System.DateTime.Now.Second.ToString();
ScriptManager.RegisterStartupScript(this, this.GetType(), "OpenEditor", "<script type='text/javascript'>loadPopup('#pnlPopup');</script>", false);
}
protected void lnkValidate_Click(object sender, EventArgs e)
{
if (tbxTime.Text == tbxText.Text)
{
Response.Redirect("DynamicBoxesWithJQuery.aspx?mode=success");
}
else
{
tbxText.Style["border"] = "1px solid red";
ScriptManager.RegisterStartupScript(this, this.GetType(), "OpenEditor", "<script type='text/javascript'>loadPopup('#pnlPopup');</script>", false);
}
}
It seems like it should be easier than this, but the way the UpdatePanel keeps redrawing (and thus resetting the display:none on pnlPopup) is really causing me fits.
Thanks in advance
Solution I just found: putting the LinkButton in its own UpdatePanel and then the form in its own UpdatePanel and making sure the div that is the actual popup box is not in an UpdatePanel at all.
<h4>Testing jQuery calls combined with code behind actions</h4>
<div class="pad-content">
<asp:UpdatePanel ID="updLink" runat="server">
<ContentTemplate>
<asp:LinkButton ID="lnkShowIt" runat="server" OnClick="lnkShowIt_Click" Text="Load Form" OnClientClick="showForm()" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="pnlPopup" ClientIDMode="Static" runat="server" CssClass="box-modal" style="width:500px;display:none;z-index:1001">
<div class="header">Edit Estimate X</div>
<div class="content">
<asp:UpdatePanel ID="updForm" runat="server">
<ContentTemplate>
<div class="window"style="min-width:500px;">
<h5>Here is a Test Form</h5>
<label>Time:</label>
<asp:TextBox ID="tbxTime" runat="server" />
<br />
<asp:Label ID="lblText" AssociatedControlID="tbxText" runat="server" ViewStateMode="Disabled">Text:</asp:Label>
<asp:TextBox ID="tbxText" runat="server" Width="150px" />
<br />
<asp:LinkButton ID="lnkValidate" runat="server" CssClass="link-button-blue" Text="Validate" OnClick="lnkValidate_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Panel>
</div>
Seems to do the trick without any Script Registers from the codebehind
I am using passwordstrength control to show strength of password entered by user. Now before saving user new password I want to validate that password meets the complexity requirements or strength control showing good. Is there any property of passwordstrength control that gives the current value of password strength?
You can try something like that:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TextBox2" Width="150" TextMode="Password" runat="server" autocomplete="off" onkeypress="getPasswordStrengthState()" /><br />
<asp:Label ID="TextBox2_HelpLabel" runat="server"/><br />
<br />
<ajaxToolkit:PasswordStrength ID="PasswordStrength2" BehaviorID="myPSBID" runat="server" TargetControlID="TextBox2"
DisplayPosition="RightSide" StrengthIndicatorType="BarIndicator" PreferredPasswordLength="15"
HelpStatusLabelID="TextBox2_HelpLabel" StrengthStyles="BarIndicator_TextBox2_weak;BarIndicator_TextBox2_average;BarIndicator_TextBox2_good"
BarBorderCssClass="BarBorder_TextBox2" MinimumNumericCharacters="1" MinimumSymbolCharacters="1"
TextStrengthDescriptions="Very Poor;Weak;Average;Strong;Excellent" RequiresUpperAndLowerCaseCharacters="true" />
<asp:Button ID="Button1" runat="server" Text="Button" style="display:none"/>
<script type="text/javascript" language="javascript">
function getPasswordStrengthState(){
if( $find("myPSBID")._getPasswordStrength()>50){
$get("<%=Button1.ClientID%>").style.display = '';
}
}
</script>
</form>
PasswordStrength has also CalculationWeightings property on server side.
[CSS Exemple][1]
<ajaxToolkit:PasswordStrength ID="PS" runat="server"
TargetControlID="TextBox1"
DisplayPosition="RightSide"
StrengthIndicatorType="Text"
PreferredPasswordLength="10"
PrefixText="Strength:"
TextCssClass="TextIndicator_TextBox1"
MinimumNumericCharacters="0"
MinimumSymbolCharacters="0"
RequiresUpperAndLowerCaseCharacters="false"
TextStrengthDescriptions="Very Poor;Weak;Average;Strong;Excellent"
TextStrengthDescriptionStyles="cssClass1;cssClass2;cssClass3;cssClass4;cssClass5
CalculationWeightings="50;15;15;20" />
[1]: http://csharpdotnetfreak.blogspot.com/2012/01/passwordstrength-ajax-aspnet.html
Is there a way to display a gridview in a tooltip?
In the standard tooltip no, but you'd have to write your own tool tip class to accomplish this.
If you are using jquery you could do this using the QTip Plugin
.
I use QTip in a lot of apps, but I'm not sure this is the best solution.....it's a lot of overhead if this is all you're using it for, and it's really very straightforward to do it from scratch. I'd treat it as a simple tab pane that is toggled by Jquery, using a $(element).show() to make it show.
Here's a tut along those lines: http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/
As an aside, while I know .net has some gridviews available, I'm in love with additional functionality that datatables provides. Far and away, this is the one JQuery plugin that my clients cite as adding true value to their apps.
i am using VS2010 and in VS 2012 intellisense is showing tooltip option in Designer page.
You can use ModalPopup to achieve it and use JavaScript to show it dynamically.
Please try the below sample:
<script type="text/javascript">
function getTop(e)
{
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
function getLeft(e)
{
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
function hideModalPopupViaClient()
{
var modalPopupBehavior = $find('ModalPopupExtender');
modalPopupBehavior.hide();
}
function showModalPopupViaClient(control,id) {
$get("inputBox").innerText="You choose the item "+control.innerHTML;
var modalPopupBehavior = $find('ModalPopupExtender');
modalPopupBehavior.show();
$get(modalPopupBehavior._PopupControlID).style.left=getLeft($get('<%=DataList1.ClientID %>'))+ $get('<%=DataList1.ClientID %>').offsetWidth+"px";
$get(modalPopupBehavior._PopupControlID).style.top=getTop(control)+"px";
}
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />
<input id="Hidden1" runat="server" type="hidden" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" >
<ItemTemplate>
<div style="border-color:Black;border-width:1px;border-style:solid;">
<asp:Label ID="Label1" Text='<%# Eval("CategoryID") %>' runat="server"></asp:Label>
<asp:HyperLink ID="detail" runat="server" onmouseout="hideModalPopupViaClient()" onmouseover="showModalPopupViaClient(this)">'<%# Eval("CategoryID") %>'</asp:HyperLink>
</div>
</ItemTemplate>
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [Categories]"></asp:SqlDataSource>
<asp:Button runat="server" ID="showModalPopupClientButton" style="display:none"/>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="showModalPopupClientButton"
PopupControlID="programmaticPopup" RepositionMode="None"
/>
<br />
<div CssClass="modalPopup" id="programmaticPopup" style="background-color:#EEEEEE; filter:alpha(opacity=70);opacity:0.7;display:none;width:50px;padding:10px">
<span id="inputBox" ></span>
<br />
</div>
</form>
Yes, you can get the tooltip in ASP.net grid view. See the below code, which should be included in the GridView1_RowDataBound event:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) {
if (e.Row.RowType == DataControlRowType.Header) {
for (int i = 0; i < GridView1.Columns.Count; i++) {
e.Row.Cells[i].ToolTip = GridView1.Columns[i].HeaderText;
}
}
}