C# not picking up change in ASP or HTML elements - c#

I have a few dynamic html items which are populated by jquery and/or JS, but for some reason the C# will only see the original values from when the page loaded.
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3">Date</label>
<div class="col-sm-9">
<asp:ToolkitScriptManager ID="tsm" runat="server" />
<asp:TextBox CssClass="btn btn-default pull-right" ID="calBtn" runat="server" Style="width: 150px">Click Here</asp:TextBox>
<asp:CalendarExtender ID="calExt" TargetControlID="calBtn" runat="server" />
</div>
</div>
<div class="form-group">
<label class="col-sm-5">
Start (Actual Begin Time)</label>
<div class="col-sm-7">
<%--<input runat="server" id="startTime" class="time btn btn-default pull-right" type="text" autocomplete="off" style="width: 150px" />--%>
<asp:TextBox runat="server" ID="startTime" CssClass="time btn btn-default pull-right" AutoCompleteType="Disabled" Style="width: 150px"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label class="col-sm-4">End</label>
<div class="col-sm-8">
<%--<input runat="server" id="endTime" class="time btn btn-default pull-right disabled" type="text" autocomplete="off" style="width: 150px" />--%>
<asp:TextBox runat="server" ID="endTime" CssClass="time btn btn-default pull-right" AutoCompleteType="Disabled" Style="width: 150px"></asp:TextBox>
</div>
</div>
</form>
Above the asp:TextBox items I have commented out my original "input" elements since I was trying both methods. If I call string date = calBtn.Text in the C#, it says "Click here" as the returned value. I have also tried date = calExt.SelectedDate which returns empty.
In the text box I have tried .Text and .SelectedValue but still empty.

#DrewKennedy had the right idea. I was nesting all these <form> tags for the Bootstrap which caused it to not be seen server-side. I had wrongly assumed I needed the nested forms to make the CSS work.
I already had a <form runat="server"> surrounding the whole body, but changing the inner <form class="form-horizontal"> to <div class="form-horizontal"> fixed the problem.

ASP.NET only support ONE SINGLE . So you had to add runat=server on your form makup.
Now it is working for me.

Related

Not able to access input text box value to code behind asp.net c#

Here my page :
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<%# Register Assembly="Microsoft.ReportViewer.WebForms" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>
<asp:HiddenField ID="hdnfromDate" Value="" runat="server" />
<asp:HiddenField ID="hdntoDate" Value="" runat="server" />
<div id="myModal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Issue Invoice</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form id="reused_form" runat="server">
<p>
Send invoice to...
</p>
<div class="form-group">
<label for="name">
To:</label>
<input type="text" class="form-control"
id="name" name="name" readonly maxlength="50" runat="server">
</div>
<div class="form-group">
<label for="email">
CC:</label>
<input type="email" ID="cc" class="form-control" runat="server" multiple>
</div>
<div class="form-group">
<strong><i>Note:</i><small>&nbsp<i>The invoice can not be edited after issuing.</i></small></strong>
</div>
<asp:LinkButton CssClass="btn btn-warning m-btn btn-block btn-lg m-btn--custom m-btn--icon m-btn--air " OnClick="Onbtn3_Click" Text="Issue Invoice " ID="LinkButton3" runat="server"></asp:LinkButton>
</form>
<div id="success_message" style="width: 100%; height: 100%; display: none;">
<h3>Sent your message successfully!</h3>
</div>
<div id="error_message"
style="width: 100%; height: 100%; display: none;">
<h3>Error</h3>
Sorry there was an error sending your form.
</div>
</div>
</div>
</div>
</div>
In cs File i am trying to access email value using cc.Value as for email textbox id is cc. But it always gets empty string. In my default master page i have a form tag which runs at server so if i keep this modal in a form runat server then gives me error saying page can have only one form tag. Please can anyone help me out. Thanks in advance
This may help
There is Text property available, so you can use textBox.Text to get textbox contian. In your case cc.Text.
Try textBox.text(). Should work.
As Html 5 type=“email” control is not available using runat attribute, you can access TextBox like below:
<asp:TextBox ID="txtBoxCc" runat="server" TextMode="Email"></asp:TextBox>
Now in codebehind you can access it like txtBoxCc.Text
Also, you have to put it like below:
if(!Page.IsPostBack) {
string cc = txtBoxCc.Text;
}

ASP DropdownList doesn't work inside Bootstrap modal

I'm very new to CSS styling and Bootstrap stuff, so I'm having too many issues during working on my job project.
Here I have an issue that prevents me to use asp:DropDownList control to be used inside a Bootstrap modal.
Actually what I'm trying to do is that I have a button called New Ticket, so when the user clicks on it a Bootstrap modal should popup includes in its body a form panel which has different controls like Text Boxes, Labels and DropDownLists. These DropDownLists are asp controls, and are being pre-populated in the C# Code-Behind.
Using this form-panel outside the modal is working perfectly, but trying to use it inside the modal brought me to this issue. Below is the error that occurs for me:
Compilation Error
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.
Compiler Error Message: CS1061: 'ASP.openticket_aspx' does not contain a definition for 'ddlServices_SelectedIndexChanged' and no extension method 'ddlServices_SelectedIndexChanged' accepting a first argument of type 'ASP.openticket_aspx' could be found (are you missing a using directive or an assembly reference?)
This is my Modal code:
<div class="container-fluid">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-lg CenterForm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-heading h4 text-primary text-center">
Token Registration
</div>
<div class="panel-body">
<div class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="lblCallerID">Caller ID:</label>
<asp:Label class="col-sm-2 control-label" ID="lblCallerID" runat="server" Text="66355356"></asp:Label>
<div class="col-sm-10">
<asp:TextBox CssClass="form-control" ID="txtCallerID" runat="server"></asp:TextBox>
</div>
</div>
<div class="row">
<label class="col-sm-4 control-label" for="lblServices">Complaint/Suggestion:</label>
<div class="col-sm-8">
<asp:DropDownList class="form-control" ID="ddlServices" runat="server" OnSelectedIndexChanged="ddlServices_SelectedIndexChanged"></asp:DropDownList>
</div>
</div>
<br />
<div class="row">
<label class="col-xs-2 control-label" for="lblSeverity">Severity:</label>
<div class="col-xs-4">
<asp:DropDownList class="form-control" ID="ddlSeverity" runat="server" OnSelectedIndexChanged="ddlServices_SelectedIndexChanged"></asp:DropDownList>
</div>
<label class="col-xs-2 control-label" for="lblStatus">Status:</label>
<div class="col-xs-4">
<asp:DropDownList class="form-control" ID="ddlStatus" runat="server" OnSelectedIndexChanged="ddlServices_SelectedIndexChanged"></asp:DropDownList>
</div>
</div>
<br />
<div class="form-group">
<label class="col-sm-2 control-label" for="lblSubject">Subject:</label>
<div class="col-sm-10">
<asp:TextBox class="form-control" ID="txtSubject" runat="server" placeholder="Enter Subject"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="lblComments">Comments:</label>
<div class="col-sm-10">
<asp:TextBox class="form-control" ID="txtComments" runat="server" placeholder="Enter Comments" TextMode="MultiLine"></asp:TextBox>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<asp:Label ID="lblmsg" runat="server" CssClass="label label-danger"></asp:Label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<asp:Button ID="btnLogin" OnClick="btnLogin_Click" runat="server" CssClass="btn btn-success" Text="Submit"></asp:Button>
<asp:Button ID="btnCancel" OnClick="btnCancel_Click" runat="server" CssClass="btn btn-danger" Text="Cancel"></asp:Button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">New Ticket</button>
<asp:Button ID="btnNewTicket" OnClick="btnNewTicket_Click" runat="server" CssClass="btn btn-default" Text="Open Ticket"></asp:Button>
</div>
</div>
</div>
</div>
</div>
And here is my try to trigger the modal using a button:
<ul class="nav navbar-nav navbar-right">
<li>New Ticket</li>
<li>New Client</li>
<li>Username</li>
</ul>
Any ideas please?
It is not because bootstrap. It is because you are not handling event properly. You should have following in your code behind
protected void ddlServices_SelectedIndexChanged(Object sender, EventArgs e)
{
// code to handle event
}
You also should have AutoPostBack="true" on dropdown list in mark up.
<asp:DropDownList class="form-control" ID="ddlServices" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlServices_SelectedIndexChanged"></asp:DropDownList>
I can also see you are calling same event handler ddlServices_SelectedIndexChanged which seems copy paste error to me. So keep that in account too.
Or if you dont want to handle this event then just remove OnSelectedIndexChanged="ddlServices_SelectedIndexChanged" from your dropdowns.
Assuming that your code is stored in an .aspx page, and you do have a "ddlServices_SelectedIndexChanged" function declared in the related .aspx.cs file, here's my answer:
Go to the top of your .aspx page, and check that the details on the first line are correct.
I've had situations where I've had a beautifully working .aspx page (with a code-behind page), I've copied that .aspx to a second page, renamed it, but Visual Studio hasn't updated the values in the top line of my .aspx page.
For example, if your webpage is called OpenTicket.aspx, then you should have the following at the top of your .aspx page:
<%# Page Title="" Language="C#" AutoEventWireup="true"
CodeBehind="OpenTicket.aspx.cs" Inherits="SomeNamespace.OpenTicket" %>
This explains why ASP.Net sometimes fails to find a code-behind function for one of the controls in an .aspx page.

ASP ListView SelectedIndexChanged/Changing Fires in Internet Explorer for All Records ONLY

I have got an ASP ListView, bound programmatically to its DataSource at runtime.
Firefox and Chrome browsers have the issue where ONLY the first record of the ListView is causing the SelectedIndexChanged/Changing events to fire. All other selected records (2nd, 3rd, 4th record etc) are causing a Postback only, without the SelectedIndecChanged/Changing events being fired.
The strange thing, is that Internet Explorer fires the SelectedIndexChanged/Changing events on every record (not just the first record).
Does anyone know what I may be doing wrong?
<asp:ListView ID="lvUsersShoppingCart" runat="server" DataKeyField="ProductID" DataKeyNames="ProductID" OnSelectedIndexChanged="lvUsersShoppingCart_SelectedIndexChanged">
<ItemTemplate>
<div class="top-buffer">
<div class="row">
<div class="col-sm-3">
<asp:Image ID="imgProductThumbnail" class="img-responsive" runat="server" ImageUrl='<%# Eval("ThumbnailImageLocation")%>' />
</div>
<div class="col-sm-9">
<form class="form-horizontal">
<div class="form-group">
<strong>
<asp:Label ID="lblProductName" runat="server" Text='<%# Eval("ProductName")%>' /></strong>
</div>
<div class="form-group">
<asp:Label ID="lblProductShortDescription" runat="server" Text='<%# Eval("ProductShortDescription")%>' />
</div>
<div class="form-group">
$<asp:Label ID="lblProductPrice" runat="server" Text='<%# Eval("ProductPrice")%>' />
(AUD)
</div>
<div class="form-group hidden">
<div class="col-sm-3">
<label for="lblProductQuantity" class="control-label">Quantity</label>
</div>
<asp:Label ID="lblProductQuantity" class="input-sm" runat="server" Text='<%# " x " + Eval("ProductQuantity").ToString%>'></asp:Label>
<asp:Button ID="btnEditQuantity" runat="server" Text="Change Qty" CssClass="btn btn-link" CommandName="Edit" />
</div>
<div class="form-group">
<asp:Button ID="btnDelete" runat="server" Text="Remove" CssClass="btn btn-danger" CommandName="Select" />
</div>
</form>
</div>
</div>
</div>
</ItemTemplate>
</asp:ListView>
The problem is caused by the form element in your ItemTemplate:
<form class="form-horizontal">
...
</form>
You can get the correct behavior if you replace it by another type of container (typically a div):
<div class="form-horizontal">
...
</div>

Why ScriptManager causes postback on RequiredFieldValidator in ASP.NET (Web Forms)?

Before adding the ScriptManager when I was clicking on the login button it was showing the required field warning without page postback but after that it has started to do postback first and then validate fields.
It's required to add a ScriptManager when there is an UpdatePanel on the page.
How can I fix this so it doesn't postback on RequiredFieldValidator?
Login Page
<form id="signinform" runat="server" defaultfocus="username" defaultbutton="LogInBtn">
<asp:scriptmanager id="FormScriptManager" runat="server"></asp:scriptmanager>
<div class="form-signup">
<div class="form-group form-group-info">
<div class="append-icon m-b-30">
<asp:textbox id="username" runat="server" cssclass="form-control c-white form-control-success" placeholder="Username" />
<i class="mdi-action-perm-identity c-light"></i>
<asp:requiredfieldvalidator runat="server" id="UserNameValidator" controltovalidate="username" display="Dynamic" validationgroup="LoginVAL" setfocusonerror="true" cssclass=" f-11 c-red m-b-0" errormessage="The username is required." />
</div>
</div>
<div class="form-group form-group-info">
<div class="append-icon m-b-30">
<asp:textbox id="Password" textmode="Password" runat="server" cssclass="form-control c-white form-control-success" placeholder="Password" />
<i class=" mdi-action-lock-outline c-light"></i>
<asp:requiredfieldvalidator runat="server" id="PasswordValidator" controltovalidate="Password" display="Dynamic" setfocusonerror="true" validationgroup="LoginVAL" cssclass="f-11 c-red m-b-0" errormessage="The password is required." />
</div>
</div>
<div class="togglebutton togglebutton-info">
<label class="c-light normal f-11 m-b-15">
<input type="checkbox" runat="server" name="RememberMe" id="RememberMe" class="md-checkbox">
Remember me?
</label>
</div>
</div>
<asp:placeholder runat="server" id="ErrorMessage" visible="false" viewstatemode="Disabled">
<p id="ErrorMessageContainer" runat="server" class="badge badge-danger m-b-5 f-11">
<asp:Literal runat="server" ID="FailureText" ViewStateMode="Disabled" />
</p>
</asp:placeholder>
<div class="progress-demo">
<asp:linkbutton id="LogInBtn" runat="server" onclick="LogIn" text="Login" cssclass="btn btn-material-indigo btn-block btn-embossed ladda-button" validationgroup="LoginVAL" data-style="zoom-in"></asp:linkbutton>
</div>
<p>
<%-- Enable this once you have account confirmation enabled for password reset functionality--%>
<asp:hyperlink runat="server" id="ForgotPasswordHyperLink" viewstatemode="Disabled">Forgot your password?</asp:hyperlink>
</p>
<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div id="LoginModalHeader" runat="server" class="modal-header bg-aero">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icons-office-52"></i></button>
<h4 class="modal-title c-white">
<asp:label id="LoginModalTitle" runat="server" />
</h4>
</div>
<asp:updatepanel id="LoginModalUpdatePanel" runat="server">
<ContentTemplate>
<div class="modal-body m-t-10">
<p class=" c-gray w-300 f-13"><asp:Label ID="LoginModalDetails" runat="server" /></p>
</div>
<div class="modal-footer">
<asp:LinkButton runat="server" ID="ResendConfirm" OnClick="SendEmailConfirmationToken" Text="Resend Confirmation" Visible="false" CssClass="btn btn-material-blue-grey btn-embossed" />
<button id="LoginModalCancel" runat="server" type="button" class="btn btn-default btn-embossed" data-dismiss="modal">Cancel</button>
</div>
</ContentTemplate>
</asp:updatepanel>
</div>
</div>
</div>
</form>
I appreciate your efforts in reaching a solution for my problem.
I came across the same issue a while back and was able to resolve it via Page.Validate();.
Basically, before I added ScriptManager everything was working well. When I would click the update button, the field validators would run and prevent a post back until requirements were met. After adding ScriptManager tag, the page would post back rendering my validators pretty much useless.
What I did was add on my update (submit) button click event:
page.validate();
if (Page.IsValid)
{
// Your update or submit code here.
}
This seems to work fine!
Write like this..
<asp:updatepanel id="LoginModalUpdatePanel" runat="server">
<ContentTemplate>
//paste all codes inside here
</ContentTemplate>
</asp:updatepanel>

How to use dropdownlist of asp.net as input-group in bootstrap

I have a problem in adding dropdownlist in input group..
I use this one..
<div class="input-group">
<div class="input-group-btn">
<asp:DropDownList runat="server" CssClass="selectpicker form-control">
<asp:ListItem Value="Val">Item1sadfasdf</asp:ListItem>
<asp:ListItem Value="Val3">Item2asdfasd</asp:ListItem>
</asp:DropDownList>
</div>
<asp:TextBox CssClass="form-control" ID="txtSearch" runat="server"></asp:TextBox>
<span class="input-group-btn">
<asp:Button CssClass="btn btn-info" runat="server" Text="Search" ID="btnSearch" OnClick="btnSearch_Click" />
</span>
</div>
but it just give me a result like this:
I also got a code like this..
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span runat="server" id="spanCategory">All Category</span>&nbsp&nbsp<span class="caret"></span></button>
<ul id="myMenu" class="dropdown-menu">
<li>All Category</li>
<li class="divider"></li>
<li>JO Number</li>
<li>Date</li>
<li>Status</li>
<li>Client Name</li>
<li>Institution</li>
<li>Department</li>
<li>Location</li>
<li>Priority</li>
<li>Problem</li>
<li>Remark</li>
<li>Assigned</li>
<li>CITI Department</li>
</ul>
</div>
<asp:TextBox CssClass="form-control" ID="txtSearch" runat="server"></asp:TextBox>
<span class="input-group-btn">
<asp:Button CssClass="btn btn-info" runat="server" Text="Search" ID="btnSearch" OnClick="btnSearch_Click" />
</span>
</div>
and showed me output like this..
It is what i want but the problem is that everytime i click the search button which do the post back, it just change the value into a default value which is the "All Category" value.. The value is just change through jQuery but everytime a postback is done the value back to default so i decided to use dropdownlist which retain its value even if there is a post back happen.. but the design is not that good..
How to make it same as the design i liked.. Thank you so much
To use DropDownList as an input group you need code like this:
<div class="input-group">
<asp:DropDownList ID="DD1" runat="server" CssClass="form-control" AutoPostBack="true" />
<span class="input-group-btn">
<button id="btn" class="btn btn-default" type="button">Reset</button>
</span>
</div>
The problem you have is a textbox within the input-group div tag as well as the dropdown. This is causing them both to display and your button to span two lines.

Categories

Resources