I asked this question last night but it was not very well written so I am going to ask it again. I am creating a simple calculator using ASP.NET and c# as my code behind. I am currently just trying to test and make sure that my code behind is getting the value typed entered into the textbox by the user. I put in a if statement that assigns the textbox a value of mehhh if the string it gets passed it empty. My text box displays mehhh so I knoe it is getting an empty string but i am not sure why? here is a link to the site... http://scort323.csweb.kutztown.edu/Calc.aspx Below is my code for the code behind part of my page:
public partial class Assign2_Calc : System.Web.UI.Page
{
protected void ButtonEqual_Click(object sender, EventArgs e)
{
string inputStr = inputBox.Text;
if (inputStr == string.Empty)
{
inputBox.Text = "mehhhhhh";
}
else
{
inputBox.Text = inputStr; //result.ToString();
}
}
}
below is my .aspx page:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Calc.aspx.cs"
Inherits="Assign2_Calc" Debug="true" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="CalculatorStyle.css" rel="stylesheet" type="text/css" />
<script>
var maxInputLength = 20;
function checkButtonClick(clickedValue) {
var buttonValue = clickedValue;
var inputStr = document.getElementById('inputBox').value;
if (buttonValue == '<--') {
if (inputStr.length >= 1) {
document.getElementById('inputBox').value = inputStr.substring(0, inputStr.length - 1);
}
}
else if (buttonValue == 'C') {
document.getElementById('inputBox').value = "";
}
else {
if (inputStr.length < maxInputLength) {
document.getElementById('inputBox').value = inputStr + buttonValue;
}
else {
//document.getElementById('msg').innerHTML = "Maxmum length is " + maxInputLength;
}
}
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="main" class="main">
<div id="content" class="content">
<h3 id="h3">Simple Calculator</h3>
<div id="calculatorDiv">
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<asp:TextBox runat="server" CssClass="inputBox" ReadOnly="true" ViewStateMode="Enabled" ID="inputBox"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="4">
<br />
</td>
</tr>
<tr>
<td>
<asp:Button ID="ButtonNum7" runat="server" Text="7" CssClass="CalcButtons" OnClientClick="return checkButtonClick(7)" />
</td>
<td>
<asp:Button ID="ButtonNum8" runat="server" Text="8" CssClass="CalcButtons" OnClientClick="return checkButtonClick(8)" />
</td>
<td>
<asp:Button ID="ButtonNum9" runat="server" Text="9" CssClass="CalcButtons" OnClientClick="return checkButtonClick(9)" />
</td>
<td>
<asp:Button ID="ButtonDivide" runat="server" Text="/" CssClass="CalcButtons" OnClientClick="return checkButtonClick('/')" />
</td>
</tr>
<tr>
<td>
<asp:Button ID="ButtonNum4" runat="server" Text="4" CssClass="CalcButtons" OnClientClick="return checkButtonClick(4)" />
</td>
<td>
<asp:Button ID="ButtonNum5" runat="server" Text="5" CssClass="CalcButtons" OnClientClick="return checkButtonClick(5)" />
</td>
<td>
<asp:Button ID="ButtonNum6" runat="server" Text="6" CssClass="CalcButtons" OnClientClick="return checkButtonClick(6)" />
</td>
<td>
<asp:Button ID="ButtonMultiply" runat="server" Text="*" CssClass="CalcButtons" OnClientClick="return checkButtonClick('*')" />
</td>
</tr>
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="1" CssClass="CalcButtons" OnClientClick="return checkButtonClick(1)" />
</td>
<td>
<asp:Button ID="Button2" runat="server" Text="2" CssClass="CalcButtons" OnClientClick="return checkButtonClick(2)" />
</td>
<td>
<asp:Button ID="Button3" runat="server" Text="3" CssClass="CalcButtons" OnClientClick="return checkButtonClick(3)" />
</td>
<td>
<asp:Button ID="ButtonSubtract" runat="server" Text="-" CssClass="CalcButtons" OnClientClick="return checkButtonClick('-')" />
</td>
</tr>
<tr>
<td>
<asp:Button ID="ButtonDackspace" runat="server" Text="<--" CssClass="CalcButtons" OnClientClick="return checkButtonClick('<--')" />
</td>
<td>
<asp:Button ID="ButtonNum0" runat="server" Text="0" CssClass="CalcButtons" OnClientClick="return checkButtonClick(0)" />
</td>
<td>
<asp:Button ID="ButtonClear" runat="server" Text="C" CssClass="CalcButtons" OnClientClick="return checkButtonClick('C')" />
</td>
<td>
<asp:Button ID="ButtonAdd" runat="server" Text="+" CssClass="CalcButtons" OnClientClick="return checkButtonClick('+')" />
</td>
</tr>
<tr>
<td colspan="4">
<asp:Button ID="ButtonEqual" runat="server" Text="=" CssClass="CalcButtonEqual" OnClick="ButtonEqual_Click" />
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Looking at the source of your web page I found that you have disabled your textbox. If a control is disabled it cannot be edited and its content is excluded when the form is submitted. So instead of disabling (remove disable attribute completely) your textbox set it to readonly (readonly = 'true').
MSDN doc on ReadOnly:
The Text value of a TextBox control with the ReadOnly property set to true is sent to the server when a postback occurs, but the server does no processing for a read-only text box. This prevents a malicious user from changing a Text value that is read-only. The value of the Text property is preserved in the view state between postbacks unless modified by server-side code.
You are "manipulating" the value in client script (not in server code - assuming above is all the code). The original value of the TextBox is preserved (empty).
If you test by removing the ReadOnly attribute (or set it to False), your code will work and you will see the effect of the setting...
Hth....
Update:
..how would I need to go about making it so the user cant use the keyboard to enter anything? making it so they must use the buttons
Unless you have/had a reason to use a server-side control for that input field, a standard HTML Input field with readonly should work.
You will then obtain it's value from the standard POST in the Request (at the end of the day, WebForms is still an HTTP POST), instead of ASP.Net controls.
Trivial example:
Instead of server-control:
<asp:TextBox runat="server" CssClass="inputBox" ReadOnly="true" ViewStateMode="Enabled" ID="inputBox"></asp:TextBox>
Use plain html input field:
<input id="inputBox" name="inputBox" readonly type="text" />
The value of the field (html_readonly) can be obtained in the POST Request:
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
string _html = Request["inputBox"]; //here it is
//do whatever...
}
}
Hth...
Related
i have added modalPopupExtender in my Page and inside that i am calling another page in Iframe. And on button Click i am doing some processing, i just want to know how can i close the modalPopUpExtender on submit click of that button.
My code is -
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DynamicServicePath="" Enabled="True" PopupControlID="PP"
TargetControlID="btnCounceller" BackgroundCssClass="modalBackground"
CancelControlID="btnclose">
</cc1:ModalPopupExtender>
<asp:Panel ID="PP" runat="server" BackColor="white" Height="200px" Width="350px">
<table class="style1">
<tr>
<td> </td>
<td>
<iframe ID="ff" runat="server" frameborder="0" src="Order.aspx" style="width:350px; height:200px;"></iframe>
</td>
<td>
<asp:Button ID="btnclose" runat="server" Text="X" />
</td>
</tr>
</table>
</asp:Panel>
and My Order.aspx Contains
<table>
<tr>
<td>First Name :</td>
<td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Mobile:</td>
<td><asp:TextBox ID="txtMobile" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="lblMessage" runat="server" Visible="false"></asp:Label></td>
</tr>
<tr>
<td></td>
<td><asp:Button ID="btnSubmit" runat="server" Text="Submit"
onclick="btnSubmit_Click" /></td>
</tr>
</table>
Now i just want to close my modalPopUp on click of Submit Button from IFrame
<asp:Panel ID="PP" runat="server" BackColor="white" Height="200px" Width="350px">
<table class="style1">
<tr>
<td> </td>
<td>
<asp:Button ID="btnclose" runat="server" Text="X" OnClick="btnclose_Click" />
</td>
<td>
<iframe ID="ff" runat="server" frameborder="0" src="Order.aspx" style="width:350px; height:200px;"></iframe>
</td>
</tr>
</table>
</asp:Panel>
Protected void btnclose_Click(Object sender, EventArgs e)
{
response.redirect("yourpage.aspx");
}
You can use jQuery as below
$("#btnSubmit").click(function() {
$("#<%= btnclose.ClientID %>").click();
});
This will fire click event of your cancel control btnclose for the modal popup extender on clicking btnSubmit from your iframe. You need to find and replace the actual ID for your iframe button btnSubmit.
I'm trying to find the values of TextBoxes which are rendered in a Repeater though a UserControl, i.e. the Repeater has a Placeholder for the UserControl, and inside the UserControl is where the TextBox markup actually exists. I've done this before with TextBoxes directly inside of a Repeater before, which was fairly straight forward, and I'm wondering why this apparently can't be accomplished the same way. Here is the Default page with the Repeater, which contains a Placeholder...
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<form class="formee">
<fieldset>
<legend>Faculty Information</legend>
<div class="grid-4-12">
<asp:Label ID="lblFirstName1" runat="server" Text="First Name"></asp:Label>
<asp:Label ID="lblFirstName2" runat="server" Text="" ></asp:Label>
<asp:Label ID ="lblSalary" runat="server" Text="" ClientIDMode="Static"></asp:Label>
</div>
<div class="grid-6-12">
<asp:Label ID="lblLastName1" runat="server" Text="Last Name"></asp:Label>
<asp:Label ID="lblLastName2" runat="server" Text=""></asp:Label>
</div>
</fieldset>
</form>
<div id="repeaterDiv">
<asp:Repeater ID="rptBudget" runat="server" ClientIDMode="Static">
<ItemTemplate>
<asp:PlaceHolder ID="phBudget" runat="server" EnableViewState="true" />
<br />
</ItemTemplate>
</asp:Repeater>
<asp:Button ID="btnAddBudgetControl" runat="server" Text="Add"
CausesValidation="false" OnClick="AddBudgetControl" CssClass="addBudgetControl"/>
<asp:Button ID="btnDisplayEntries" runat="server" Text="Display Entries" CausesValidation="false" OnClick="DisplayEntries" />
</div>
<div>
<asp:TextBox ID="txtTotalPercent" runat="server" ClientIDMode="Static"></asp:TextBox>
<asp:TextBox ID="txtGrandTotal" runat="server" ClientIDMode="Static"></asp:TextBox>
<asp:Label ID="lblCtrls" runat="server" Text=""></asp:Label>
</div>
...and the UserControl which is inserted in the place of the Placeholder...
<fieldset>
<legend>Faculty Salary Form</legend>
<table cellspacing="10" id="values">
<tr>
<td>
<asp:Label ID="lblServiceType" runat="server" Text="Service"></asp:Label>
<asp:DropDownList runat="server" ID="ddlServiceType" CssClass="serviceType" />
</td>
<td>
<asp:Label ID="lblSpeedCode" runat="server" Text="Speed Code"></asp:Label>
<asp:DropDownList runat="server" ID="ddlSpeedCode" CssClass="speedType" />
</td>
<td>
<asp:Label ID="lblPercentage" runat="server" Text="Percentage"></asp:Label>
<asp:Textbox ID="txtPercentage" runat="server" CssClass="percentCommitment" ClientIDMode="Static" EnableViewState="true" />
</td>
<td>
<asp:Label ID="lblTotal" runat="server" Text="Total"></asp:Label>
<asp:TextBox ID="txtTotal" runat="server" CssClass="amountCommitment" ClientIDMode="Static" EnableViewState="true"/>
</td>
<td>
<asp:Button ID="btnRemove" runat="server" Text="Remove Item" OnClick="RemoveItem" ClientIDMode="Static" CssClass="btnRemove" />
</td>
</tr>
<tr>
</tr>
</table>
</fieldset>
...but when the following code runs for the Display button's OnClick, I always get a null value for any and all TextBoxes (and DropDowns) in the UserControl...
protected void DisplayEntries(object sender, EventArgs e)
{
foreach (RepeaterItem repeated in rptBudget.Items)
{
TextBox txtPercentage = (TextBox)repeated.FindControl("txtPercentage");
if (txtPercentage == null)
{
lblCtrls.Text += " null; ";
}
else
{
lblCtrls.Text += txtPercentage.Text + "; ";
}
}
}
What's the best way to access these values? Thanks.
txtPercentage Textbox is located inside Usercontrol, so use the following helper method to retrieve it.
Helper Method
public static Control FindControlRecursive(Control root, string id)
{
if (root.ID == id)
return root;
return root.Controls.Cast<Control>()
.Select(c => FindControlRecursive(c, id))
.FirstOrDefault(c => c != null);
}
Usage
foreach (RepeaterItem repeated in rptBudget.Items)
{
TextBox txtPercentage =
(TextBox)FindControlRecursive(repeated, "txtPercentage");
...
}
Try loading the placeholder first and then looking for the textboxes in the placeholder:
Something like this:
pseudo
var ph = repeated.FindControl("phBudget");
var txtBox = ph.FindControl("txtPercentage");
/pseudo
You need to first get the UserControl, then use FindControl on the UC itself.
I have a problem with getting the new value from the textbox inside a nested repeater. If i type static value into the Text property like this: i can get the value, but not the new value.
<ItemTemplate>
<tr>
<td width="160">
<%# Eval("index")%>
</td>
<td>
<%# Eval("Sex") %>
</td>
<td align="right">
<button id="EditPuppy" class="open-dialog" runat="server">
Rediger hvalp</button>
<juice:Button TargetControlID="EditPuppy" runat="server" />
</td>
<td align="right" width="30">
<asp:ImageButton runat="server" ID="DeletePuppy" CommandArgument='<%# Eval("dogid").ToString() %>'
OnClientClick='return confirm("Er du sikker på at du gerne vil slette denne hvalp?")'
OnCommand="DeletePuppy_Command" SkinID="DefaultDeleteButton" />
</td>
</tr>
<div id="_Default" runat="server" class="basic-dialog" title="Basic dialog" runat="server">
<asp:TextBox runat="server" ID="TextBoxPuppyName" Text="HEJ" /><!-- The textbox i am trying to get the value from -->
<asp:Button UseSubmitBehavior="false" runat="server" ID="ButtonPuppyName" CommandArgument="<%# ((RepeaterItem)Container.Parent.Parent).ItemIndex %> <-- Getting parent repaterid"
CommandName="<%# Container.ItemIndex %> <-- Getting current repeater index -->"
OnCommand="ButtonPuppyName_Command" Text="Opdater" />
</div>
<juice:Dialog TargetControlID="_Default" AutoOpen="false" runat="server" />
</ItemTemplate>
Codebehind:
protected void ButtonPuppyName_Command(object sender, CommandEventArgs e) {
int parentRepeaterItemIndex = Convert.ToInt32(e.CommandArgument);
int childRepeaterItemIndex = Convert.ToInt32(e.CommandName);
Repeater childReapter = (Repeater)RepeaterShowKuldUserList.Items[parentRepeaterItemIndex].FindControl("RepeaterShowKuldPuppyList");
TextBox name = (TextBox)childReapter.Items[childRepeaterItemIndex].FindControl("TextBoxPuppyName");
HttpContext.Current.Response.Write(name.Text);
}
Thanks for your help!. Remember getting into the repeaters work because i can get the "static" value
I think your problem is that you are calling repeater.DataBind (in the page load?) try to add !IsPostBack and then bind your data...
other option is that the viewState=false.. it should be "true"
Hope that helps,
Ran
I have a form with 4 dropdownlists whose autopostback property is set to true and each dropdown list gets populated based on the selection of the previous dropdownlist.
Ex. ddlCourseType gets populated after a selection is made in ddlCourseLevel and so on.
I need to validate every textbox and dropdownlist but am having a hard time with the dropdownlists because of its autopostback property.
It will be great if somebody could help me with the best way to validate this form or any tips or advice would be awesome. Thanks a lot. Below is the aspx file that has the jquery function for validating dropdowns and textboxes.
Admin_Course_Edit.aspx
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="/JQuery_Plugins/timepicker/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<link href="../JQuery_Plugins/timepicker/css/ui-lightness/jquery-ui-1.7.2.custom.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$('#tbStartDate').datepicker({
duration: '',
showTime: true,
constrainInput: false
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="BreadCrumbs" runat="server">
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="rightNavigation" runat="server">
<script type="text/javascript">
$(document).ready(function () {
//Function to Validate DatePicker
$.validator.addMethod('isDate', function (value, element) {
var isDate = false;
try {
$.datepicker.parseDate('mm/dd/yy', value);
isDate = true;
}
catch (e) {
}
return isDate;
});
//Function to Validate DropDown Lists
$.validator.addMethod('selectNone',
function (value, element) {
return this.optional(element) ||
(value.indexOf("") == -1); //Leave it blank or enter the exact text in index 0
}, "Please Select an Option");
$("#form1").validate({
// $("#tbStartDate").rules("add", {isDate: true} messages: {isDate: "Date to Validate is invalid."}
rules: {
'<%=ddlCourseLevel.UniqueID %>': { selectNone: true },
'<%=tbStartDate.UniqueID %>': { required: true, isDate: true },
'<%=tbCourseName.UniqueID %>': { required: true, maxlength: 25 },
'<%=tbPointScale.UniqueID %>': { required: true, digits: true },
'<%=tbDescription.UniqueID %>': { maxlength: 50 }
},
messages: { '<%=tbStartDate.UniqueID %>': { isDate: "Please enter a Valid Date"} }
});
$("#imgBtn_A_save").click(function (evt) {
// Validate the form and retain the result.
var isValid = $("#form1").valid();
// If the form didn't validate, prevent the
// form submission.
if (!isValid)
evt.preventDefault();
});
$("#imgBtn_A_cancel").click(function () {
$("#form1").validate().cancelSubmit = true;
});
});
function HideLabel() {
document.getElementById('<%= lblMessage.ClientID %>').style.display = "none";
}
setTimeout("HideLabel();", 2000);
</script>
<div class="Admin_rightNavtop">
<div class="title">
<asp:Label ID="lblTitle" Text="Edit Course" runat="server" class="titleLbl" />
</div>
<p align="center">
<asp:Label ID="lblMessage" runat="server" Style="color: Red" /></p>
<!-- START TABLE ADD FORM-->
<table style="margin-left: 70px">
<tr>
<td>
<asp:Label ID="LblCourseLevel" Text="* Course Level :" runat="server" class="lblSize_largeGreen" />
</td>
<td>
<asp:DropDownList ID="ddlCourseLevel" class="ddlSize_large_addEdit" OnSelectedIndexChanged="ddlCourseLevel_SelectedIndexChanged"
AutoPostBack="true" EnableViewState="true" OnDataBound="helperCourseLevel_Databound"
runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="CourseType" Text="* Course Type :" runat="server" class="lblSize_largeGreen" />
</td>
<td>
<asp:DropDownList ID="ddlCourseType" runat="server" class="ddlSize_large_addEdit"
OnDataBound="helperCourseType_Databound" EnableViewState="true" OnSelectedIndexChanged="ddlCourseType_SelectedIndexChanged"
AutoPostBack="true" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblCourseName" Text="* Course Name :" runat="server" class="lblSize_largeGreen" />
</td>
<td>
<asp:DropDownList ID="ddlCourseName" class="ddlSize_large_addEdit" OnSelectedIndexChanged="ddlCourseName_SelectedIndexChanged"
AutoPostBack="true" EnableViewState="true" OnDataBound="helperCourse_Databound"
runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblCourseName2" Text="* New Name :" runat="server" class="lblSize_largeGreen" />
</td>
<td>
<asp:TextBox ID="tbCourseName" class="tbSize_large_addEdit" runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblStartDate" Text="* Start Date :" runat="server" class="lblSize_largeGreen" />
</td>
<td>
<asp:TextBox ID="tbStartDate" runat="server" class="tbSize_large_addEdit" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblGraded" Text="* Grade Type :" runat="server" class="lblSize_largeGreen" />
</td>
<td>
<asp:DropDownList ID="ddlGradeType" runat="server" class="ddlSize_large_addEdit"
OnSelectedIndexChanged="ddlGradeType_SelectedIndexChanged" AutoPostBack="true">
<asp:ListItem>---Select Grade Type---</asp:ListItem>
<asp:ListItem Value="1">Point Scale</asp:ListItem>
<asp:ListItem Value="2">Pass/Fail</asp:ListItem>
<asp:ListItem Value="3">Attendance</asp:ListItem>
<asp:ListItem Value="4">Not Graded</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblPointScale" Text="* Point Scale :" runat="server" class="lblSize_largeGreen"
Visible="false" />
</td>
<td>
<asp:TextBox ID="tbPointScale" runat="server" class="tbSize_large_addEdit" Visible="false" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblDescription" Text="Description :" runat="server" class="lblSize_largeGreen" />
</td>
<td>
<asp:TextBox ID="tbDescription" runat="server" class="tbSize_large_addEdit" />
</td>
</tr>
</table>
<!-- End of Table ADD COURSE-->
</div>
<!-- End of rightNavTop-->
<center>
<div class="Admin_action">
<asp:ImageButton ID="imgBtn_A_save" ImageUrl="../Images/Save.png" OnClick="save_Click"
runat="server" class="Admin_action_imgSize_small" />
<asp:ImageButton ID="imgBtn_A_cancel" ImageUrl="../Images/Cancel.png" runat="server"
class="Admin_action_imgSize_small" CausesValidation="false" OnClick="cancel_Click" />
</div>
</center>
<!-- End selection buttons-->
</asp:Content>
You can add an onchange event to the control and return false if you think it's invalid to cancel the postback.
Personally, I'd want to do the whole shebang using jQuery and AJAX and cut out the nasty auto postback.
The validations for the dependent DDLs will also have to check their "parent" DDL.
DDL 1 - Must be selected
DDL 2 - If DDL 1 is selected must be selected.
DDL 3 - If DDL 2 is selected must be selected.
DDL 4 - If DDL 4 is selected must be selected.
Sorry I don't have time to write up the code, but hopefully this will be helpful.
Within a gridview, I have an "Email" button and a "Delete" button that opens up a Modal popup window using the modalpopupextender. The problem is that the Email window opens when the button is clicked, but the Delete window does not open when its button is clicked. I am using both modalpopupextenders in the same way.
<asp:ButtonField ButtonType="Button" CommandName="Email" Text="Email" />
<asp:ButtonField ButtonType="Button" CommandName="Delete" Text="Delete" />
<%-- Email modal--%>
<asp:Panel ID="pnlPopupEmail" runat="server" Width="500px" Style="display: none">
<asp:UpdatePanel ID="updPnlEmail" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnShowEmail" runat="server" Style="display: none" />
<ajaxToolkit:ModalPopupExtender ID="mdlPopupEmail" runat="server" TargetControlID="btnShowEmail"
PopupControlID="pnlPopupEmail" CancelControlID="btnCancel" BackgroundCssClass="modalBackground" />
<div class="EmailPopup">
<table>
<tr>
<td>
To:
</td>
<td>
<asp:TextBox ID="EmailTo" runat="server" Width="350"></asp:TextBox>
</td>
</tr>
<tr>
<td>
From:
</td>
<td>
<asp:TextBox ID="EmailFrom" runat="server" Width="350"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Subject:
</td>
<td>
<asp:TextBox ID="Subject" runat="server" Width="350"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td> <asp:TextBox ID="EmailMessageBox" Width="350" Height="150" runat="server" TextMode="MultiLine" Wrap="true"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:LinkButton ID="SendBtn" runat="server" OnClick="SendBtn_Clicked" Text="Send" />
<asp:LinkButton ID="btnCancel" runat="server" Text="Cancel" CausesValidation="false" />
</td>
<td>
<asp:Label ID="theID" runat="server" Visible="false"></asp:Label>
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<%-- -----end email modal--%>
<%-- Start Delete Confirmation Modal --%>
<asp:Panel ID="DelConfirmPanel" runat="server" Width="500px" Style="display: none">
<asp:UpdatePanel ID="DelConfirmUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID ="TESTLabel" runat="server" Text="Are you sure?" ></asp:Label>
<asp:Button ID="DelModalButton" runat="server" Style="display: none" />
<ajaxToolkit:ModalPopupExtender ID="modalPopUpDelConfirm" runat="server" TargetControlID="DelModalButton"
PopupControlID="DelConfirmPanel" CancelControlID="DeleteCancel" BackgroundCssClass="modalBackground" />
<div class="DeletePopup">
<asp:LinkButton ID="DelConfirmedButton" runat="server" OnClick="DeleteConfirmation_Clicked"
Text="Delete" />
<asp:LinkButton ID="DeleteCancel" runat="server" Text="Cancel" CausesValidation="false" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<%-- End Delete Confirmation Modal --%>
</div>
Then in the codebehind I have a method that checks the command name and updates the updatepanel and shows the modalpopupextender.
protected void btn_Clicked(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Email")
{
// a bunch of stuff that I am leaving out but is just changing fields in the
//table withing the modal popup
updPnlEmail.Update();
mdlPopupEmail.show();
}
if (e.CommandName.Equals("Delete"))
{
int index = Convert.ToInt32(e.CommandArgument);
String id = gvReservations.DataKeys[index].Value.ToString(); // get id
try
{
DelConfirmUpdatePanel.Update();
modalPopUpDelConfirm.Show();
}
catch (Exception ex)
{
throw new Exception(ex.Message);
}
}
}
Any ideas why one works and not the other? Is there a good way to debug this kind of error? Thanks a lot for any help!
Figured it out.
<asp:ButtonField ButtonType="Button" CommandName="Delete" Text="Delete" />
This is where the problem was. I didn't realize that "Delete" was a reserved command name. So when this button was clicked an exception was being thrown saying that it couldn't delete from the table. Thus, the modal popup was never being shown. I figured it out by opening the javascript console in the chrome tools.
So to fix it, I changed the command name to something else and now everything works as expected.