I have a search webpage where the user can apply for jobs. The jobs are displayed through repeater control. When the user clicks on apply button I want a modal to popup with two textboxes containing the companies email and the job name. Now when I am not passing passing at that time the modal pops up but when I try to pass values from repeater than the modal doesn't show up. I have searched a lot and even tried something. With what I have tried I am not getting an error but the modal is not showing up. Here is my code .aspx code for repeater
<asp:Repeater ID="RepterDetails" runat="server" OnItemCommand="RepterDetails_ItemCommand">
<HeaderTemplate>
<table style="border:1px solid; width:800px" cellpadding="2" cellspaing="2">
<tr style=" color:#000000; font-size: large; font-weight: bold;">
<td colspan="2">
<b>JOBS Available</b>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<table style="border-top:3px solid; width:800px" >
<tr>
<td style="color:black" >
COMPANY:
<asp:Label ID="lblcmp" runat="server" Text='<%#Eval("cmp_name")%>' Font-Bold="true" ForeColor="black"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="color:black">
LOCATION:
<asp:Label ID="lbl_city" runat="server" Text='<%#Eval("city_name") %>' ForeColor="black"/>,
<asp:Label ID="lbl_state" runat="server" Text='<%#Eval("state_name") %>' ForeColor="black"/>
</td>
</tr>
<tr>
<td style="color:black">
Job:
<asp:Label ID="lbl_jname" runat="server" Font-Bold="true" Text='<%#Eval("job_name") %>' ForeColor="black"/>
</td>
</tr>
<tr>
<td style="color:black">
Job Details:
<asp:Label ID="lbl_jdet" runat="server" Text='<%#Eval("job_details") %>' ForeColor="black"/>
</td>
</tr>
<tr>
<td style="color:black">
Experience :
<asp:Label ID="lbl_jexp" runat="server" Text='<%#Eval("experience") %>' ForeColor="black"/>
</td>
</tr>
<tr>
<td style="color:black">
Job-Type :
<asp:Label ID="lbl_jobtype" runat="server" Text='<%#Eval("job_type") %>' ForeColor="black"/>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td style="color:black" >Comapny Email: <asp:LinkButton ID="link_cemail" runat="server" CommandName='<%#Eval("cemail") %>' CommandArgument='<%#Eval("cemail") %>' Text='<%#Eval("cemail") %>' ForeColor="black" OnClick="link_cemail_Click" ></asp:LinkButton></td>
</tr>
</table>
<tr>
<td>
<asp:Button runat="server" ID="btn_apply" CommandName="popup" OnClick="btn_apply_Click" Text="apply"/>
<script type="text/javascript">
function openModal() {
$('#exampleModal').modal('show');
}
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline">
<ContentTemplate>
<asp:Button runat="server" ID="btn_save" OnClick="btn_save_Click" AutoPostBack="true" Text="Save" Height="34px"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn_save" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
Modal code
<div id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div > <div >
<div >
<h5 id="exampleModalLabel">Apply for Job</h5> <button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div >
Company Email : <asp:TextBox ID="txt_email" runat="server" ReadOnly="true" ></asp:TextBox><br /><br />
Job-Name : <asp:TextBox ID="txt_app_jname" runat="server" ReadOnly="true"></asp:TextBox>
</div>
<div >
<button type="button" data-bs-dismiss="modal">Close</button>
<button type="button" >Save changes</button></div>
</div>
This is my code behind
protected void btn_apply_Click(object sender, EventArgs e)
{
RepeaterItem item = (sender as Button).Parent as RepeaterItem;
string cemail = (item.FindControl("link_cemail") as System.Web.UI.WebControls.LinkButton).Text;
txt_email.Text = cemail;
ClientScript.RegisterStartupScript(GetType(), "popup", "openModal()", true);
}
I have tried this and I am not getting any error but my modal is not opening up. please can someone help me?
CodePudding user response：
This is my advice:
I use for asp.net projects Ajaxtoolkit:
Then I add in my project the dll
In my aspx page, I added this line to work with ajax controls
For modal scream I did the next:
- Used ajx:ModalPopupExtender
- Put the modal in asp panel
Resume of my code:
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajx" %>
<ajx:ModalPopupExtender ID="mppPagos" runat="server" PopupControlID="pnl_PagosModal" TargetControlID="lk_BusquedaPagos" BackgroundCssClass="modalBackground">
</ajx:ModalPopupExtender>
<asp:HiddenField ID="lbl_IdAbono" Value="0" runat="server"/>
<div >
<div >
<asp:LinkButton runat="server" CssClass="btn btn-success btn-sm" ID="lk_BusquedaPagos" Text=">> Agregar Pagos <<"></asp:LinkButton>
</div>
<div>
<asp:Button ID="btn_EliminarPagosRenta" CssClass="btn btn-success btn-sm" runat="server" Text="Eliminar Pago" OnClick="btn_EliminarPagosRenta_Click" />
</div>
</div>
<asp:Panel ID="pnl_PagosModal" runat="server" CssClass="panel EstiloPanel" ScrollBars="Vertical">
<asp:UpdatePanel ID="upl_ModalPagos" runat="server">
<ContentTemplate>
<div >
<div >
<div >
<div >
<asp:Button ID="btnCerrarModalPago" runat="server" Text="x" CssClass="btn-xs" OnClick="btnCerrarModalPago_Click"/>
</div>
<h5 >Pagos</h5>
<asp:Label ID="lbl_ErrorPagos" runat="server" Text="" ForeColor="Red"></asp:Label>
</div>
<div >
<div id="tab3_1">
<asp:HiddenField ID="HiddenField2" runat="server"/>
<div >
<asp:Label ID="lbl_FormaPago" CssClass="control-label col-lg-offset-0 col-md-2 col-lg-2" runat="server" Text="Forma de Pago:"></asp:Label>
<div >
<telerik:RadComboBox ID="rad_ddl_FormaPago" runat="server" Height="100%" Width="100%" OnSelectedIndexChanged="rad_ddl_FormaPago_SelectedIndexChanged"
ZIndex="10000000" AutoPostBack="true"
EmptyMessage="Seleccionar Forma Pago" MarkFirstMatch="true" EnableLoadOnDemand="true">
</telerik:RadComboBox>
</div>
<asp:Label ID="lbl_NumeroTarjeta" CssClass="control-label col-lg-offset-0 col-md-2 col-lg-2" runat="server" Text="Número de Tarjeta:"></asp:Label>
<div >
<asp:TextBox ID="txtNumeroTarjeta" CssClass="form-control" runat="server"></asp:TextBox>
</div>
</div>
<div >
<asp:Label ID="lbl_MontoPago" CssClass="control-label col-lg-offset-0 col-md-2 col-lg-2" runat="server" Text="Monto Pago:"></asp:Label>
<div >
<asp:TextBox ID="txtMontoPago" CssClass="form-control" runat="server"></asp:TextBox>
</div>
<asp:Label ID="lbl_Cambio" CssClass="control-label col-lg-offset-0 col-md-2 col-lg-2" runat="server" Text="Cambio:"></asp:Label>
<div >
<asp:TextBox ID="txtMontoCambio" CssClass="form-control" runat="server"></asp:TextBox>
</div>
</div>
<div >
<asp:Label ID="lbl_DescGarantia" CssClass="control-label col-lg-offset-0 col-md-2 col-lg-2" runat="server" Text="Descripción de garantía:" Visible="false"></asp:Label>
<div >
<asp:TextBox ID="txt_DescGarantia" CssClass="form-control" runat="server" Visible="false"></asp:TextBox>
</div>
</div>
</div>
</div>
<div >
<asp:Button ID="btnAgregarPago" runat="server" Text="Agregar Pago" CssClass="btn btn-success btn-sm" OnClick="btnAgregarPago_Click" />
<asp:Button ID="btnAgregarMontoTarjeta" runat="server" Text="Agregar Monto Tarjeta" CssClass="btn btn-success btn-sm" OnClick="btnAgregarMontoTarjeta_Click" />
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>