Develop Reference

How to add C# variables to html modal

In my ASP.Net app, I have a button that launches a modal. The onClick event fires the C# behind code that launches a modal. I am then calling a data table and populating string variables with values from the data table:
protected void uxTicketHistoryButton_Click(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "key", "launchModal();", true);
DataTable ticketHist = _dtMgr.GetContactInfoByName(uxContactDropdownList.SelectedValue);
string rName = ticketHist.Rows[0]["RequestorName"].ToString();
string rPhone = ticketHist.Rows[0]["RequestorPhone"].ToString();
string rPhoneExt = ticketHist.Rows[0]["RequestorPhoneExt"].ToString();
string rEmail = ticketHist.Rows[0]["RequestorEmail"].ToString(); ;
string rState = ticketHist.Rows[0]["RequestorState"].ToString();
string rOrg = ticketHist.Rows[0]["RequestorOrg"].ToString();
}
What I want to do now is add those variable values to my modal inside the panel.
<asp:Button ID="uxTicketHistoryButton" runat="server" Text="Show Ticket History" style="color: blue;" OnClick="uxTicketHistoryButton_Click"/>
<!-- ModalPopupExtender-->
<ajaxToolkit:ModalPopupExtender ID="uxTicketHistoryModal" runat="server" PopupControlID="Panel1" TargetControlID="uxTicketHistoryButton"CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" style = "display:none">
**** Add variable values here ****
<asp:Button ID="btnClose" runat="server" Text="Close" />
</asp:Panel>
How do I add the variables from my .cs file to the modal panel in my .aspx file so that it shows up like this (values in the { } )?
UPDATE
This issue seems to be related to the modal interfering with the _Click event function of my button. I have posted an additional question to resolve this problem first. Then, I believe one of the solutions below may work. Thanks everybody!

Webform:
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" style = "display:none">
Name: <asp:Literal ID="Name" runat="server" /><br>
Organization: <asp:Literal ID="Organization" runat="server" /><br>
etc....
<asp:Button ID="btnClose" runat="server" Text="Close" />
</asp:Panel>
Codebehind:
Name.Text = ticketHist.Rows[0]["RequestorName"].ToString();
Organization.Text = ticketHist.Rows[0]["RequestorOrg"].ToString()

You can use ASP.NET Razor to post your c# variables directly into your html.
For Example
<!-- Single statement block -->
#{ var myMessage = "Hello World"; }
<!-- Inline expression or variable -->
<p>The value of myMessage is: #myMessage</p>
<!-- Multi-statement block -->
#{
var greeting = "Welcome to our site!";
var weekDay = DateTime.Now.DayOfWeek;
var greetingMessage = greeting + " Here in Huston it is: " + weekDay;
}
<p>The greeting is: #greetingMessage</p>
OR
you could use get and set methods to post your variables to the modal from you .cs .
public class yourModalPage
{
public string RequestorName { get; set; }
}
Then you can send values to your modal from your .cs with
yourModalPage.RequestorName = "RequestorName";

how do I check whether a text box that is dynamically created is populated with data?

I have 10 rows of text boxes (4 columns)
If ALL 10 rows have been populated with data, I need to fire an event to do certain things.
I'm new to web development and I don't really understand how to reference an item on the HTML page that was dynamically generated by the code-behind. This is what it looks like in HTML:
<tr align="center">
<td style="height: 85px">
</td>
<td align="center" style="width: 440px; height: 310px">
<fieldset class="field1" style="text-align: center">
<legend class="Eblegend" id="legendObligation2">
<%=frameName%>
</legend>
<asp:Panel ID="pnlTable" runat="server" Width="620px" Height="310px">
</asp:Panel>
</fieldset>
</td>
</tr>
This code turns into an editable table (4 columns and 10 rows).
I need to check if all boxes have been filled so that I can enable a "next" button.
The problem is, I don't know how to reference these "cells" on the dynamically generated table so that i can say "if not null or empty, do this"
Can anyone give me a hand?

In order to be able to access the values, you need to create the TextBoxes also in the case of a PostBack. This has to happen very early and the Ids of the controls need to be the same.
The following code shows a small sample that creates a TextBox dynamically and reads the value later on:
ASPX:
<form id="form1" runat="server">
<div>
<asp:Button ID="btnCreateTextBox" runat="server" Text="Create TextBox" OnClick="btnCreateTextBox_Click" />
</div>
<div>
<asp:PlaceHolder ID="placeHolder" runat="server"></asp:PlaceHolder>
</div>
<div>
<asp:Button ID="btnPostBack" runat="server" Text="Do a postback" />
</div>
<div>
<asp:Label ID="lbl" runat="server" />
</div>
</form>
Code-Behind:
public partial class WebForm1 : System.Web.UI.Page
{
protected TextBox txt;
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
if (Request.Form.AllKeys.Any(x => x == "TextBox1"))
CreateTextBox();
}
protected void Page_Load(object sender, EventArgs e)
{
if (txt != null)
lbl.Text = "TextBox value is " + txt.Text;
else
lbl.Text = "No value in TextBox";
}
protected void btnCreateTextBox_Click(object sender, EventArgs e)
{
if (txt == null)
{
CreateTextBox();
}
}
private void CreateTextBox()
{
txt = new TextBox();
txt.ID = "TextBox1";
placeHolder.Controls.Add(txt);
}
}
The important part is that the TextBox is created in OnInit with the same ID if there is a value in the PostBack data. Even if the TextBox is empty, the key of the TextBox (TextBox1 in the case of the sample) is present in the AllKeys collection.

Read label value in code behind

Am using the below code to assign the label text using javascript. It's working well. But i can't able to read the label text in code behind. Please help me to fix this issue.
Javascript:
==========
var lbl_total = document.getElementById('<%= lbl_total.ClientID %>');
lbl_total.innerHTML = '500';
c# code behid :
===============
string total = lbl_total.Text; //It always return "";

client side changes for label will not get reflected in server side as its data is not posted to server. So the solution is to take an input hidden control and set its value with label's updated value. Below is the sample code:
<script type="text/javascript">
$(document).ready(function() {
var total = 0;
$('#Button1').click(function() {
total += 150;
$("span[id$=lbl_TotalCount]").html(total);
$("input:hidden[id$=MyHidden]").val(total);
});
});
</script>
html
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="button" />
<asp:Button ID="btn_saveForm" runat="server" Text="save" CssClass="btnForm" OnClick="btn_saveForm_Click" />
<asp:Label ID="lbl_TotalCount" Style="color: #00e4ff; font-family: Arial; font-weight: bold;
text-decoration: underline" runat="server" Text="0">
</asp:Label>
<asp:HiddenField ID="MyHidden" runat="server" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</form>
full Article : Get label value in code behind whose text is changed via JavaScript/jQuery

My javascript variable is becoming undefined between function calls

I have a form that calls some javascript and some code behind (C# for me) when a link button is pressed. Normal operation should act as such: Click on link button which gets text from a label on the form, opens an HTML editor, save the text by clicking 'Done' on the text editor and then displaying the text on the form again. It will do all of that, but I get an error (control is undefined) and then that prevents me from doing any other work on the form.
First, here is my aspx code, which is a window that hold the HTML editor, and the HTML editor.
<asp:Panel ID="EditCommentPopup" runat="server" SkinID="PopupPanel" HorizontalAlign="Center" Width="500px" Style="display:none;">
<div id="SendCommentHeader" class="modalPopupHeader">
<table width="100%" style="vertical-align: middle">
<tr>
<td style="width: 50%; text-align: left; padding-left: 5px;">
<asp:Label ID="EditCommentHeaderLBL" runat="server" Font-Bold="true" Text="Change Comment" ></asp:Label>
</td>
<td style="width: 50%; text-align: right; padding-right: 3px;">
<asp:Button SkinID="SubmitButton" ID="SaveComment" runat="server" Text="Done" OnClientClick="submitEditorPopup(); return true;" OnClick="SubmitCommentButton_Click"/>
<asp:Button SkinID="CancelButton" ID="cancelCommentButton" runat="server" Text="Cancel"/>
</td>
</tr>
</table>
</div>
<ajaxToolkit:ModalPopupExtender ID="EditCommentPopupExtender" runat="server" TargetControlID="EditCommentHeaderLBL"
PopupControlID="EditCommentPopup" BackgroundCssClass="modalBackground" PopupDragHandleControlID="EditCommentPopup"
DropShadow="False" CancelControlID="cancelCommentButton" BehaviorID="ChangeCommentsPopup" >
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="EditCommentInnerPanel" SkinID="PopupInnerPanel" HorizontalAlign="Center" runat="server" >
<asp:Label ID="CommandArgLBL" runat="server" Visible="false"></asp:Label>
<custom:CustomTextEditor ID="EditCommentsTextBox" runat="server" Width="100%" Height="300px" NoScript="true" />
</asp:Panel>
</asp:Panel>
Here are my javascript functions
var contentLBL;
var editorControl;
var hiddenField;
function LoadEditorPopup(labelID, editorID, hiddenID, linkID) {
editorControl = document.getElementById(editorID);
contentLBL = document.getElementById(labelID);
hiddenField = document.getElementById(hiddenID);
editorControl.control.set_content(contentLBL.innerHTML);
var popup = $find("ChangeCommentsPopup");
popup.show();
}
function submitEditorPopup() {
var tmp = editorControl.control.get_content(); //error flags here
contentLBL.innerHTML = tmp;
var str= new String();
str = tmp;
str = str.replace(/</g, "{%");
str = str.replace(/>/g, "%}"); //stripping out html tags to prevent sql insertion
hiddenField.value = str;
var popup = $find("ChangeCommentsPopup");
popup.hide();
}
And here are my C# functions
protected void ShowEditCommentPopup(object sender, EventArgs e)
{
string arg = ((LinkButton)sender).CommandArgument;
string content = "";
string title = "";
switch (arg)
{
//doing stuff, setting content and title
}
EditCommentHeaderLBL.Text = title;
CommandArgLBL.Text = arg;
EditCommentsTextBox.Content = content;
EditCommentPopupExtender.Show();
EditModalPopupExtender.Show(); //this is the form
}
So, what's happening here, I click on a linkbutton (not shown in aspx code) and it fires the LoadEditorPopup function in the javascript. It does its stuff and I have a 'return true' in the onclientclick call so that the next function, ShowEditCommentPopup, in the code behind, will be called. The editor pops up and I can use it just fine. When I click 'Done' the SubmitEditorPopup event is fired in the javascript and I get an error saying that the variable EditorControl is undefined. I have found that if I do not call the ShowEditCommentPopup method, the error does not occur, but then I get back to another problem I had originally, which I'm hoping that will be fixed if this problem is fixed.
I really hope that was clear enough. Thanks in advance!

You have a snippet with your javascript functions. Where does that code live? It it inside a class or function that could be getting called a second time? If so, var editorControl; could be getting run again and override your previous editorControl variable. I would put an alert right about var editorControl; to make sure.
alert( 'Should only happen once' );
var editorControl;
Since that didn't help, I guess you could try replacing
var tmp = editorControl.control.get_content();
with
tmp = document.getElementById(editorID);
in submitEditorPopup.

Prevent textbox autofill with previously entered values

I have an asp page with some Textbox controls on it.
By default, the browser will suggest previously entered values for each box.
I'd like to prevent that behavior for some of the textboxes.
Is there a way to reliably do that across all major browsers?
I've tried setting
AutoCompleteType="Disabled"
But that seems to have no effect in Firefox.
Here is an image of the behavior I'm trying to prevent.

For firefox
Either:
<asp:TextBox id="Textbox1" runat="server" autocomplete="off"></asp:TextBox>
Or from the CodeBehind:
Textbox1.Attributes.Add("autocomplete", "off");

Autocomplete need to set off from textbox
<asp:TextBox ID="TextBox1" runat="server" autocomplete="off"></asp:TextBox>

By making AutoCompleteType="Disabled",
<asp:TextBox runat="server" ID="txt_userid" AutoCompleteType="Disabled"></asp:TextBox>
By setting autocomplete="off",
<asp:TextBox runat="server" ID="txt_userid" autocomplete="off"></asp:TextBox>
By Setting Form autocomplete="off",
<form id="form1" runat="server" autocomplete="off">
//your content
</form>
By using code in .cs page,
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
txt_userid.Attributes.Add("autocomplete", "off");
}
}
By Using Jquery
<head runat = "server" >
< title > < /title> < script src = "Scripts/jquery-1.6.4.min.js" > < /script> < script type = "text/javascript" >
$(document).ready(function()
{
$('#txt_userid').attr('autocomplete', 'off');
});
//document.getElementById("txt_userid").autocomplete = "off"
< /script>
and here is my textbox in ,
<asp:TextBox runat="server" ID="txt_userid" ></asp:TextBox>
By Setting textbox attribute in code,
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
txt_userid.Attributes.Add("autocomplete", "off");
}
}

This is the answer.
<asp:TextBox id="yourtextBoxname" runat="server" AutoCompleteType="Disabled"></asp:TextBox>
AutoCompleteType="Disabled"
If you still get the pre-filled boxes for example in the Firefox browser then its the browser's fault. You have to go
'Options' --> 'Security'(tab) --> Untick
'Remember password for sites and click on Saved Passwords button to delete any details that the browser has saved.
This should solve the problem

Trying from the CodeBehind:
Textbox1.Attributes.Add("autocomplete", "off");

Adding autocomplete="new-password" to the password field did the trick. Removed auto filling of both user name and password fields in Chrome.
<input type="password" name="whatever" autocomplete="new-password" />

Please note that for Chrome to work properly it needs to be autocomplete="false"

This works for me
<script type="text/javascript">
var c = document.getElementById("<%=TextBox1.ClientID %>");
c.select =
function (event, ui)
{ this.value = ""; return false; }
</script>