Develop Reference

Open a modal with a text area to fill and a text area loading some content from the page

I'm working with WebForms and I need to create a modal, or anything like this on click on a button to reject an item, the modal should show the item ID and a text area to fill up with the reason why this item will be rejected.
I'm on it for about one week and I can't figure out how could I get the item id and put it on the modal.
I've never used WebForms before, and I'm not finding anything that helps me.
this is my modal code:
<asp:Panel ID="pnlMotivoRejeitarTitulo" runat="server" Width="610px">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Button runat="server" ID="btnShowModalPopup2" Style="display: none" />
<ajaxToolkit:ModalPopupExtender ID="modalRejeitarTitulo" runat="server" TargetControlID="btnShowModalPopup2"
PopupControlID="divPopUp2" BackgroundCssClass="popUpStyle" PopupDragHandleControlID="panelDragHandle"
DropShadow="true" RepositionMode="RepositionOnWindowResize" />
<div class="popUpStyle" id="divPopUp2" style="display: none;">
<div style="width: 600px; max-height: 160px;">
<asp:Panel runat="Server" ID="panel1" CssClass="drag01">
<asp:Label ID="lblTituloModal" runat="server" Text="EXCLUIR TÍTULO?"></asp:Label>
<br />
</asp:Panel>
<div class="subtitulo">
<asp:Label ID="lblMensagemOrigemAgregadoMiudo" runat="server" Text=""></asp:Label>
</div>
<br />
<asp:Panel ID="pnlRejeitarTitulo" runat="server" Width="550px" BackColor="#CCCCCC"
CssClass="centralizaPanel" BorderStyle="Outset">
<div style="padding-top: 10px;">
<div class="campo">
<div class="label_formulario8">
<asp:Label ID="lblId" runat="server" Text="ID: "></asp:Label>
</div>
<asp:TextBox ID="txtId" runat="server" Width="100px" ReadOnly="true"></asp:TextBox>
</div>
<div class="campo">
<div class="label_formulario8">
<asp:Label ID="Label3" runat="server" Text="Descrição: "></asp:Label>
</div>
<asp:TextBox ID="txtDescricao" runat="server" Width="300px"></asp:TextBox>
</div>
<br />
</div>
<div class="centraliza_botao">
<asp:Button ID="btnConfirmarExcluirTitulo" runat="server" Text="Confirmar" CssClass="btn btn-primary" OnClick="btnConfirmarExcluirTitulo_Click"
Style="height: 31px" CausesValidation="false" />
<asp:Button ID="btnFecharExcluirTitulo" runat="server" Text="Fechar" CssClass="btn btn-warning"
Style="height: 31px" CausesValidation="false" OnClick="btnFecharExcluirTitulo_Click" />
</div>
<br />
</asp:Panel>
</div>
<br />
<br />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
on txtId must appear the item ID, I've tried to use JS getting the id of the rendered input, but it take so long to render, so JS does not work.

I figured out that I had to fill all the fields before call the method that shows the modal dialog.
I was thinking like jQuery but it does work like that on WebForms

Update Panel - The ScriptManager must appear before any controls that need it

I tried to put an update panel in my aspx form, but it keeps on showing this error. The ScriptManager must appear before any controls that need it
This is my aspx
<form id="Form1" runat="server" class="form-horizontal">
<div class="col-lg-6">
<%--<asp:Panel id="pnlExisting" runat="server">
<div class="alert alert-danger" role="danger">
<i class="glyphicon glyphicon-exclamation-sign"></i> <asp:Label ID="recordCheck" runat ="server"> </asp:Label>
</div>
</asp:Panel>--%>
<div class="form-group">
<label class="control-label col-lg-4">Project</label>
<div class="col-lg-8">
<asp:DropDownList ID="ddlProjects" runat="server" class="form-control" AutoPostBack="true"
onselectedindexchanged="ddlProjects_SelectedIndexChanged" /><br />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">Project Code</label>
<div class="col-lg-8">
<asp:Textbox ID="txtProjectCode" runat="server" class="form-control" required />
</div>
</div>
<%-- <div class="form-group">
<label class="control-label col-lg-4">Price</label>
<div class="col-lg-8">
<asp:Textbox ID="txtPrice" runat="server" class="form-control" Textmode="Number" required />
</div>
</div>--%>
<%-- <div class="form-group">
<label class="control-label col-lg-4">Status</label>
<div class="col-lg-8">
<asp:Textbox ID="txtStatus" runat="server" class="form-control" required />
</div>
</div>--%>
</div>
<asp:UpdatePanel ID="upMaterialsList" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lvMaterialsList" EventName="PagePropertiesChanging" />
</Triggers>
<ContentTemplate>
<table class="table table-hover">
<thead>
<th>Material</th>
<th>Quantity</th>
<th>Status</th>
<th>Date Added</th>
<th>Date Modified</th>
<th></th>
</thead>
<tbody>
<asp:ListView ID="lvMaterialsList" runat="server" ondatabound="lvMaterialsList_DataBound"
onpagepropertieschanging="lvMaterialsList_PagePropertiesChanging" OnItemCommand="lvMaterialsList_ItemCommand">
<ItemTemplate>
<tr>
<td><%# Eval("SupplierProduct")%></td>
<td><%# Eval("Quantity") %></td>
<td><%# Eval("Status") %></td>
<td><%# Eval("DateAdded", "{0: MMMM dd, yyyy}") %></td>
<td><%# Eval("DateModified", "{0: MMMM dd, yyyy}") %></td>
<td>
<asp:Label ID="ltReqMat" runat="server" Text='<%# Eval("ReqMatID") %>' Visible="false" />
</td>
<td>
<asp:LinkButton Text="Approved" class="btn btn-success " ID="lbtnApproved" runat="server"
CommandName="Approve" > </asp:LinkButton>
<asp:LinkButton Text="Decline" class="btn btn-warning " ID="lbtnDecline" runat="server"
CommandName="Decline" > </asp:LinkButton>
</td>
</tr>
</ItemTemplate>
<EmptyDataTemplate>
<tr>
<td colspan="12"><h2 class="text-center">No records found.</h2></td>
</td>
</tr>
</EmptyDataTemplate>
</asp:ListView>
</tbody>
</table>
<div class="col-lg-12">
<center>
<asp:Button ID="btnReturn" runat="server" class="btn btn-default" Text="Back"
PostBackUrl="Default.aspx" formnovalidate />
</center>
</div>
<br />
<center>
<asp:DataPager ID="dpMaterialsList" runat="server" PageSize="10" PagedControlID="lvMaterialsList">
<Fields>
<asp:NumericPagerField ButtonType="Button"
NumericButtonCssClass="btn btn-default"
CurrentPageLabelCssClass="btn btn-success"
NextPreviousButtonCssClass="btn btn-default" />
</Fields>
</asp:DataPager>
</center>
</ContentTemplate>
</asp:UpdatePanel>
</form>
I want to know why it is not working properly

Add ScriptManager tags just below the <Form> tag of your page.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

You have to include the ScriptManager control in either your content page or Master page to enable ASP.NET AJAX features. So in your Master page you can place this control just after the form tag and ensure you put it before any ContentPlaceHolder control:-
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
By this all the content page which have the Master page set to the above master will automatically use this ScriptManager.
Apart from this, if at all you want to include any specific script reference in any of your content page then you can make use of ScriptManagerProxy control which at run time will combine the properties of both ScriptManager and ScriptManagerProxy.
According to ASP.NET AJAX:-
ScriptManager - A server control that makes script resources available
to the browser, including the Microsoft AJAX Library and the
functionality that enables partial-page rendering.
ScriptManagerProxy - A server control that enables nested components
to add script and service references if the page already contains a
ScriptManager control.

Certain controls won't get generated in aspx.designer.cs-file

I have a weird problem. I can't access some of my server controls from my codebehind. I've looked around and can only find answers for situations where you can't find ANY controls and I've tried all solutions I've found here on stack. re-creating designer file, deleting temp data, renaming controls etc. Nothing works.
The weird thing is that I can access every controller I put outside my ListView element. But everything inside will not get generated in my aspx.designer.cs file.
Code:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderMid" runat="server">
<h2><asp:Label ID="LabelCat" runat="server" Text=""></asp:Label></h2>
<asp:HiddenField ID="HiddenFieldID" runat="server" />
<br />
<div class="list-group">
<asp:ListView ID="ListViewSearch" runat="server" DataSourceID="SqlDataSourceWebsite" DataKeyNames="WebsiteID">
<EmptyDataTemplate>
<table runat="server">
<tr>
<td>Darn</td>
</tr>
</table>
</EmptyDataTemplate>
<ItemTemplate>
<td>
<div class="row list-group-item">
<div class="">
<%# Eval("url") %>
</div>
<div class="col-xs-5">
<div class="pull-left">
<div>
<asp:LinkButton ID="BtnUp" runat="server" CssClass="btn btn-default btn-xs" CommandArgument='<%# Eval("websiteId").ToString() %>' OnClick="up_click"><i class="fa fa-chevron-up" style="color:green"></i></asp:LinkButton>
</div>
<div>
<asp:LinkButton ID="BtnDown" runat="server" CssClass="btn btn-default btn-xs" CommandArgument='<%# Eval("websiteId").ToString() %>' OnCommand="down_click"><i class="fa fa-chevron-down" style="color:red"></i></asp:LinkButton>
</div>
</div>
<div class="lbl-score">
<asp:Label ID="LabelScore" runat="server" Text="Score: "></asp:Label>
<asp:ScriptManagerProxy ID="ScriptManagerProxySearch" runat="server"></asp:ScriptManagerProxy>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Label ID="LabelRating" runat="server" Text=' <%# Eval("rating") %>'></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="BtnUp" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
<div class="lbl-desc">
<asp:Label ID="LabelDesc1" runat="server" Text=' <%# Eval("Description1") + " | "%> '></asp:Label>
<asp:Label ID="LabelDesc2" runat="server" Text=' <%# Eval("Description2") %> '></asp:Label>
</div>
</div>
</td>
</ItemTemplate>
</asp:ListView>
</div>
<asp:SqlDataSource ID="SqlDataSourceWebsite" runat="server" ConnectionString="<%$ ConnectionStrings:WDBAPPConnectionString %>" SelectCommand="SELECT * FROM [Website] WHERE ([categoryId] = #HFID)">
<SelectParameters>
<asp:ControlParameter ControlID="HiddenFieldID" Name="HFID" Type="Int32" DefaultValue="0" />
</SelectParameters>
</asp:SqlDataSource>
</asp:Content>
I know there is a lot of code but basically the controls "LabeCat", "HiddenFieldID", "ListViewSearch" and "SqlDataSourceWebsite" show up in my aspx.designer.cs-file, but no other controls do, in other words; all controls before and after my ListView work fine. What could be wrong here? So confused.

The UpdatePanel doesn't work with button

I had my code to insert values into DB and after the data inserted the
ModalPopupExtender show and when click on OK button event fire to
reload the page . but I don't want all paged reload I tried to use
update panel but the OK event doesn't work .
<asp:Panel ID="PostPanel" runat="server" Style="display: none;">
<div class="modalPopup">
<div class="PopupBody">
<p class="ads-text">
GO </p>
</div>
<div class="Controls">
<div class="post">
<asp:Button Text="OK" runat="server" ID="btnOkay" ValidationGroup="AddUserpopup"
OnClick="btnOkay_Click" />
</div>
</div>
</div>
</asp:Panel>
<cc1:ModalPopupExtender ID="ModelExtenderPost" OkControlID="btnOkay" runat="server"
TargetControlID="HiddenField22" PopupControlID="PostPanel" PopupDragHandleControlID="PopupHeader"
Drag="true" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:HiddenField ID="HiddenField22" runat="server" />
protected void btnOkay_Click(object sender, EventArgs e)
{
Response.Redirect(Request.Url.ToString(), true);
}

use updatepanel that is in asp.net
in top of your page :
<%# Page Title="" Language="C#" MasterPageFile="~/..." EnableEventValidation="false" AutoEventWireup="true" ....
and for ypur panel:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode= "Conditional">
<ContentTemplate>
<div class="modalPopup">
<div class="PopupBody">
<p class="ads-text">
GO </p>
</div>
<div class="Controls">
<div class="post">
<asp:Button Text="OK" runat="server" ID="btnOkay" ValidationGroup="AddUserpopup"
OnClick="btnOkay_Click" />
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnOkay" EventName ="Click" />
</Triggers>
</asp:UpdatePanel>

Button event doesn't fire inside Update panel

I have a asp.net web form Page which uses master page also.
This is a simple page which displays some text and has a form, this page also allows user to upload resume in .doc, .docx & pdf format.
Problem with this code is that i am not able to trigger
for some reason <asp:Button ID="btnUploadCV" runat="server" Text="Upload" CssClass="btnUpload" onclick="btnUploadCV_Click"/>
<%# Page Title="" Language="C#" MasterPageFile="~/en/SiteMasterPage.master" AutoEventWireup="true" CodeFile="career.aspx.cs" Inherits="career" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"></asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<!-- Content Page-->
<!-- page content wrapper -->
<div id="page-content-area" class="page-content-area">
<div id="pg-left-bar" class="pg-left-bar">
<div class="page-title">
<h5><asp:Label ID="lblPageTitle" CssClass="page-title-lbl" runat="server" Text="Introduction"></asp:Label></h5>
</div>
<div class="page-text">
<asp:Label ID="lblPageContents" runat="server" Text=""></asp:Label>
</div>
<div class="career-form-wrapper">
<!-- UpdatePanel -->
<asp:UpdatePanel ID="updPnlArticles" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlCareerForm" runat="server">
<div class="row-form">
<div class="row-lbl-wrapper"> <span class="row-req">*</span>
<asp:Label ID="lblFirstName" runat="server" CssClass="row-label" Text="First Name:"></asp:Label>
</div>
<asp:TextBox ID="txtFirstName" runat="server" CssClass="row-input"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfFN" runat="server" ValidationGroup="Careers" ErrorMessage="*" CssClass="row-validate" ControlToValidate="txtFirstName"></asp:RequiredFieldValidator>
</div>
<div class="row-form">
<div class="row-lbl-wrapper"> <span class="row-req">*</span>
<asp:Label ID="lblFamilyName" runat="server" CssClass="row-label" Text="Family Name:"></asp:Label>
</div>
<asp:TextBox ID="txtFamilyName" runat="server" CssClass="row-input"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfLN" runat="server" ValidationGroup="Careers" ErrorMessage="*" CssClass="row-validate" ControlToValidate="txtFamilyName"></asp:RequiredFieldValidator>
</div>
<div class="row-form">
<div class="row-lbl-wrapper"> <span class="row-req">*</span>
<asp:Label ID="lblEmail" runat="server" CssClass="row-label" Text="Email:"></asp:Label>
</div>
<asp:TextBox ID="txtEmail" runat="server" CssClass="row-input"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmail" runat="server" ValidationGroup="Careers" ErrorMessage="*" CssClass="row-validate" ControlToValidate="txtEmail"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revEmail" runat="server" ErrorMessage="*" CssClass="row-validate" ControlToValidate="txtEmail" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="Careers"></asp:RegularExpressionValidator>
</div>
<div class="row-form">
<div class="row-lbl-wrapper">
<asp:Label ID="lblPhone" runat="server" CssClass="row-label" Text="Phone Number:"></asp:Label>
</div>
<asp:TextBox ID="txtPhone" runat="server" CssClass="row-phone" Text=""></asp:TextBox>
<asp:RegularExpressionValidator ID="revPhone" runat="server" ErrorMessage="*" ValidationGroup="Careers" ControlToValidate="txtPhone" ValidationExpression="^([\+]?[0-9]{1,3}[\s.-][0-9]{1,12})([\s.-]?[0-9]{1,4}?)$"></asp:RegularExpressionValidator>
<div class="tooltip tooltip-override" title="Accepts local format (eg. 04 1234567, 050 1234567 or 04-1234567, 050-1234657)<br />and international format (eg. +971 41234567, +971-41234567 ).<br />Also accepts an optional extention of up to four digits (eg. 04 1234567 289 or +974 41234567 289)">
<asp:Image ID="imgtooltip" CssClass="tooltip-img" runat="server" ImageUrl="~/images/tooltipgreen.png" />
</div>
</div>
<div class="row-form">
<div class="row-lbl-wrapper">
<asp:Label ID="lblFax" runat="server" CssClass="row-label" Text="Fax Number:"></asp:Label>
</div>
<asp:TextBox ID="txtFax" runat="server" CssClass="row-input"></asp:TextBox>
<asp:RegularExpressionValidator ID="revFax" runat="server" ErrorMessage="*" ValidationGroup="Careers" ControlToValidate="txtFax" ValidationExpression="^([\+]?[0-9]{1,3}[\s.-][0-9]{1,12})$"></asp:RegularExpressionValidator>
<div class="tooltip tooltip-override" title="Accepts local format (eg. 04 1234567 or 040-1234567)<br />and international format (eg. +974 41234567 or +974-41234567)">
<asp:Image ID="Image1" CssClass="tooltip-img" runat="server" ImageUrl="~/images/tooltipgreen.png" />
</div>
</div>
<div class="row-form">
<div class="row-lbl-wrapper">
<asp:Label ID="lblAddress" runat="server" CssClass="row-label" Text="Address:"></asp:Label>
</div>
<asp:TextBox ID="txtAddress" runat="server" CssClass="row-input-multiline" TextMode="MultiLine"></asp:TextBox>
</div>
<div class="row-form">
<div class="row-lbl-wrapper"> <span class="row-req">*</span>
<asp:Label ID="lblCountry" runat="server" CssClass="row-label" Text="Country:"></asp:Label>
</div>
<asp:DropDownList ID="ddCountry" runat="server" CssClass="row-dd"></asp:DropDownList>
<asp:CascadingDropDown ID="csdCountry" runat="server" Category="Country" TargetControlID="ddCountry" PromptText="-- Select --" LoadingText="[Loading Countries...]" ServiceMethod="FetchCountries" ServicePath="~/wsCountryCity.asmx" PromptValue="0"></asp:CascadingDropDown>
<asp:RequiredFieldValidator ID="rfCountry" ValidationGroup="Careers" ControlToValidate="ddCountry" CssClass="row-validate" InitialValue="0" runat="server" ErrorMessage="*"></asp:RequiredFieldValidator>
</div>
<div class="row-form">
<div class="row-lbl-wrapper">
<asp:Label ID="lblCity" runat="server" CssClass="row-label" Text="City:"></asp:Label>
</div>
<asp:DropDownList ID="ddCity" runat="server" CssClass="row-dd"></asp:DropDownList>
<asp:CascadingDropDown ID="csdCity" runat="server" Category="City" TargetControlID="ddCity" ParentControlID="ddCountry" PromptText="-- Select --" LoadingText="[Loading Cities...]" ServiceMethod="FetchCities" ServicePath="~/wsCountryCity.asmx" PromptValue="0"></asp:CascadingDropDown>
</div>
<div class="row-form">
<div class="row-lbl-wrapper"> <span class="row-req">*</span>
<asp:Label ID="Label1" runat="server" CssClass="row-label" Text="CV:"></asp:Label>
</div>
<asp:FileUpload ID="FileUpload1" runat="server" CssClass="fileUpload" />
<div id="dFileUpload1" class="btnUploadHack">Browse</div>
<asp:Button ID="btnUploadCV" runat="server" Text="Upload" CssClass="btnUpload" onclick="btnUploadCV_Click" />
<asp:RequiredFieldValidator ID="rfvF1" runat="server" ValidationGroup="Careers" ErrorMessage="*" CssClass="row-validate" ControlToValidate="FileUpload1"></asp:RequiredFieldValidator>
<asp:Label ID="lblImageMSG" runat="server" Text=""></asp:Label>
</div>
<div class="contactus-row">
<asp:Button ID="btnSave" runat="server" CssClass="btnContactUsSave" Text="Send Message" onclick="btnSave_Click" ValidationGroup="Careers" />
</div>
</asp:Panel>
<asp:Panel ID="pnlCareerMSG" runat="server"></asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<!-- UpdatePanel -->
</div>
</div>
<div class="pg-right-bar">
<asp:Image ID="imgSideBanner" runat="server" />
</div>
</div>
<!-- page content wrapper -->
<!-- Content Page-->
</asp:Content>
Code Behind
protected void btnUploadCV_Click(object sender, EventArgs e)
{
// code is here
}
So far i am not able to figure out what i s blocking the any button inside from firing. Yes i did even put a simple button to test even that didn't fire.
I am not sure if it is Validation or Update Panel which is creating problem.

You need to add Triggers after ContentTemplate in Update panel.
<Triggers>
<asp:PostBackTrigger ControlID="btnexport" />
</Triggers>

The required field validators are probably biting you.Just add the property 'causes validation="false" ' to your button and it will fire.You can handle the validation server side using if Page.IsValid
<asp:Button ID="btnUploadCV" runat="server" Text="Upload" CssClass="btnUpload" onclick="btnUploadCV_Click" CausesValidation="false" />
Server Side
protected void btnUploadCV_Click(object sender, EventArgs e)
{
Page.Validate();
if (Page.IsValid == true)
{
// your code here
}
}
Update
I am not sure what is happening with your button.Then if all fails do a brute force attack to cause the post back like this.
<asp:Button ID="btnUploadCV" runat="server" Text="Upload" CssClass="btnUpload" onclick="btnUploadCV_Click" CausesValidation="false" onClientClick='forcePostBack()" />
**Javascript**
function forcePostback(){
__doPostBack('<%#btnUploadCv.UniqueID %>','');
}