I was closely following the tutorial that was placed on this guide to create a modal View/Edit form for GridView. Everything seems to be working as it should, however, the modal form simply doesn't show up, the Screen turns gray but the form itself doesn't show up. Furthermore, if I check source code for the page, I can see that The modal form contains the data that I've passed to it.
Code For GridView
//REFERENCES IN HEAD
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
//.............
<asp:ScriptManager runat="server" ID="ScriptManager1" />
<asp:UpdatePanel ID="upCrudGrid" runat="server">
<ContentTemplate>
<div class="col-md-6">
<asp:GridView ID="CompanyUserList" GridLines="None" CssClass="table table-striped" OnRowCommand="CompanyUserList_RowCommand" Style="margin-top: 2em;" runat="server">
<Columns>
<asp:ButtonField CommandName="editRecord" ControlStyle-CssClass="btn btn-info"
ButtonType="Button" Text="View & Edit" HeaderText="Edit Record">
<ControlStyle CssClass="btn btn-info"></ControlStyle>
</asp:ButtonField>
</Columns>
</asp:GridView>
</div>
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>
Code For Modal Body
<div id="editModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="editModalLabel">Edit Record</h3>
</div>
<asp:UpdatePanel ID="upEdit" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-body">
<table class="table">
<tr><td>Country Code : <asp:Label ID="lblCountryCode" runat="server"></asp:Label></td>
</tr>
<tr>
<td>Population : <asp:TextBox ID="txtPopulation" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Country Name:<asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Continent:<asp:TextBox ID="txtContinent1" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<asp:Label ID="lblResult" Visible="false" runat="server"></asp:Label>
<asp:Button ID="btnSave" runat="server" Text="Update" CssClass="btn btn-info" />
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="CompanyUserList" EventName="RowCommand"/>
<%--<asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />--%>
</Triggers>
</asp:UpdatePanel>
</div>
C# Code To Populate Modal Form
protected void CompanyUserList_RowCommand(object sender, GridViewCommandEventArgs e)
{
int index = Convert.ToInt32(e.CommandArgument);
GridViewRow gvrow = CompanyUserList.Rows[index];
lblCountryCode.Text = HttpUtility.HtmlDecode("test");
txtPopulation.Text = HttpUtility.HtmlDecode("test");
txtName.Text = HttpUtility.HtmlDecode("test");
txtContinent1.Text = HttpUtility.HtmlDecode("test");
lblResult.Visible = false;
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(#"<script type='text/javascript'>");
sb.Append("$('#editModal').modal('show');");
sb.Append(#"</script>");
ScriptManager.RegisterClientScriptBlock(this, this.GetType(),
"EditModalScript", sb.ToString(), false);
}
Now If I had to Guess there's a problem somewhere in the ScriptManager.RegisterClientScriptBlock , however I can't really tell if that's the case and/or what should be done in order to fix the problem since I'm limited to c# knowledge.
Could Anyone give a hint or two on where the problem is or how to fix it?
After some intense digging around, I realized that in the tutorial Bootstrap 2.2.2 was used, so in order to make it work with the newest bootstrap I had to slightly modify the HTML/CSS.
<div id="editModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
<%--<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="editModalLabel">Edit Record</h3>
</div>--%>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<asp:UpdatePanel ID="upEdit" runat="server">
<ContentTemplate>
<div class="modal-body">
<table class="table">
<tr>
<td>Country Code :
<asp:Label ID="lblCountryCode" runat="server"></asp:Label></td>
</tr>
<tr>
<td>Population :
<asp:TextBox ID="txtPopulation" runat="server"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text="Type Integer Value!" /></td>
</tr>
<tr>
<td>Country Name:<asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Continent:<asp:TextBox ID="txtContinent1" runat="server"></asp:TextBox></td>
</tr>
</table>
</div>
<div class="modal-footer">
<asp:Label ID="lblResult" Visible="false" runat="server"></asp:Label>
<asp:Button ID="btnSave" runat="server" Text="Update" CssClass="btn btn-info" />
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="CompanyUserList" EventName="RowCommand" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>
Related
How can I select the record in the grid view and delete or edit this record? In Asp.Net Web Form
I want this to be done with the Bootstrap modal
I do this with Entity Framework
I have only been able to code to add
The methods I know for editing and deleting are not suitable for this project and they do not work on Bootstrap Modal
Html Code:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ProductControl.aspx.cs" Inherits="AppData.Pages.ProductControl" %>
<asp:Content ID="HeadContent" ContentPlaceHolderID="Head" runat="server">
<script src="../Scripts/jquery-3.6.0.slim.min.js"></script>
<script src="../Scripts/Site.js"></script>
</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="container">
<div class="row">
<div class="col-md-12 table-responsive" id="ProductDiv">
<div class="d-flex justify-content-between align-items-center mb-3 mt-3">
<h4>List of Products</h4>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#ModalAdd">
Add Product
</button>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:GridView ID="GridView" runat="server" CssClass="table text-center table-bordered table-hover" HeaderStyle-CssClass="table-dark" AutoGenerateColumns="false" DataKeyNames="Id" OnRowCommand="GridView_RowCommand">
<Columns>
<asp:TemplateField HeaderText="" ItemStyle-Font-Size="Small">
<HeaderTemplate>Row</HeaderTemplate>
<ItemTemplate><%# Container.DataItemIndex+1 %></ItemTemplate>
<ItemStyle Wrap="False" />
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Price" HeaderText="Price" />
<asp:BoundField DataField="Type" HeaderText="Type" />
<asp:BoundField DataField="Barcode" HeaderText="Barcode" />
<asp:TemplateField HeaderText="Commands" ItemStyle-Font-Size="Small">
<ItemTemplate>
<asp:LinkButton CssClass="btn btn-warning" ID="BtnEdit" runat="server">Edit</asp:LinkButton>
<asp:LinkButton CssClass="btn btn-danger" ID="BtnDelete" runat="server" data-toggle="modal" data-target="#ModalDelete">Delete</asp:LinkButton>
<asp:LinkButton CssClass="btn btn-info" ID="BtnDetail" runat="server">Detail</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div class="row">
<asp:Label ID="LblNotFound" runat="server" Text="No Product Found" CssClass="col-12 alert alert-danger text-center" Visible="false"></asp:Label>
</div>
</div>
<!-- Modal Add -->
<asp:UpdatePanel ID="UpdatePanelModalAdd" runat="server">
<ContentTemplate>
<div class="modal" id="ModalAdd">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add New Record</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-6">
<p>Name:</p>
<asp:TextBox ID="Name" placeholder="Name" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<div class="col-6">
<p>Price:</p>
<asp:TextBox ID="Price" placeholder="Price" runat="server" CssClass="form-control"></asp:TextBox>
</div>
</div>
<div class="row">
<div class="col-6">
<br />
<p>Type:</p>
<asp:TextBox ID="Type" placeholder="Type" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<div class="col-6">
<br />
<p>Barcode:</p>
<asp:TextBox ID="Barcode" placeholder="Barcode" runat="server" CssClass="form-control"></asp:TextBox>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button ID="BtnCreate" runat="server" CssClass="btn btn-success" Text="Create" OnClick="BtnCreate_Click" />
<asp:Button ID="BtnCancel" runat="server" CssClass="btn btn-danger" Text="Cancel" data-dismiss="modal" />
</div>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="BtnCreate" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="BtnCancel" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<!-- Modal Detail -->
<asp:UpdatePanel ID="UpdatePanelModalDetail" runat="server">
<ContentTemplate>
<div class="modal" id="ModalDetail">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Detail Record</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-6">
<p>Name:</p>
<asp:Label ID="LblName" CssClass="text-secondary" runat="server" Text=""></asp:Label>
</div>
<div class="col-6">
<p>Price:</p>
<asp:Label ID="LblPrice" CssClass="text-secondary" runat="server" Text=""></asp:Label>
</div>
</div>
<div class="row">
<div class="col-6">
<br />
<p>Type:</p>
<asp:Label ID="LblType" CssClass="text-secondary" runat="server" Text=""></asp:Label>
</div>
<div class="col-6">
<br />
<p>Barcode:</p>
<asp:Label ID="LblBarcode" CssClass="text-secondary" runat="server" Text=""></asp:Label>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button ID="Button1" runat="server" CssClass="btn btn-success" Text="Create" OnClick="BtnCreate_Click" />
<asp:Button ID="Button2" runat="server" CssClass="btn btn-danger" Text="Cancel" data-dismiss="modal" />
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<!-- Modal Delete -->
<asp:UpdatePanel ID="UpdatePanelModalDelete" runat="server">
<ContentTemplate>
<div class="modal" id="ModalDelete">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Delete Record</h4>
</div>
<div class="modal-body">
<h6 class="text-center">Are you sure you want to delete this record?</h6>
<br />
<div class="text-center">
<asp:Button ID="Delete" CssClass="btn btn-danger border-2 border-dark" runat="server" Text="Delete" CommandArgument='<%# Eval("Id") %>' CommandName="Delete" />
<button id="Cancel" class="btn btn-light border-2 border-dark" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Delete" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</asp:Content>
And Backend Code:
using AppData.Models;
using System;
using System.Collections.Generic;
using System.EnterpriseServices;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace AppData.Pages
{
public partial class ProductControl : System.Web.UI.Page
{
Models.ProductDbEntities Db = new Models.ProductDbEntities();
protected void Page_Load(object sender, EventArgs e)
{
if (GridView.Rows.Count > 0)
{
LblNotFound.Visible = false;
}
else
{
GridView.DataSource = Db.TblProducts.ToList();
GridView.DataBind();
}
}
protected void BtnCreate_Click(object sender, EventArgs e)
{
TblProduct Row = new TblProduct();
Row.Name = Name.Text;
Row.Price = Price.Text;
Row.Type = Type.Text;
Row.Barcode = Convert.ToInt64(Barcode.Text);
Db.TblProducts.Add(Row);
Db.SaveChanges();
Response.Redirect("ProductControl.aspx");
}
protected void BtnCancel_Click(object sender, EventArgs e)
{
Response.Redirect("Pages/ProductControl.aspx");
}
protected void GridView_RowCommand(object sender, GridViewCommandEventArgs e)
{
var id = e.CommandArgument;
if (e.CommandName == "Delete")
{
Int64 Id = Convert.ToInt64(id);
var Row = Db.TblProducts.FirstOrDefault(n => n.Id == Id);
Db.TblProducts.Remove(Row);
Db.SaveChanges();
Response.Redirect("DataControl.aspx");
GridView.DataSource = Db.TblProducts.ToList();
GridView.DataBind();
}
}
}
}
I understand your approach, but if you are using bootstrap modals you need to write a little bit more code.
One way to achieve this is by following the next steps:
In the Delete modal add a hidden field to hold the selected productId and an event handler for the delete button:
<div class="modal-body">
<h6 class="text-center">Are you sure you want to delete this record?</h6>
<br />
<!--add this inside delete modal -->
<input type="hidden" id="productIdToDelete" runat="server" />
<div class="text-center">
<!-- remove CommandArgument and CommandName from the Delete button. They are useless in the popup. -->
<!-- add an event handler to OnClick-->
<asp:Button ID="Delete" CssClass="btn btn-danger border-2 border-dark" runat="server" Text="Delete" OnClick="BtnDelete_Click" />
...
Create event handlers for when the modal is opened in order to propagate the productId from the current row in the grid to the modal:
<script src="../Scripts/Site.js"></script>
<script type="text/javascript">
$(document).ready(
function () {
//use a jquery selector to assign an event handler to all Delete Buttons found on the page (nottice they all start with the same prexif)
$("[id*=MainContent_GridView_BtnDelete]").click(function () {
//get the id of the product from the selected row first cell and assign it to the hidden field in the modal
$("#MainContent_productIdToDelete").val($(this).closest('tr').find('td').eq(0).html());
});
});
</script>
Finally, handle the delete event in the code behind:
protected void BtnDelete_Click(object sender, EventArgs e)
{
string idVal = Request.Form[productIdToDelete.UniqueID];
var id = Convert.ToInt64(idVal);
// implement delete logic ...
}
Use the same approach for Edit. (Look at this example.)
I have an UpdatePanel:
<asp:UpdatePanel runat="server" ID="panelFatt">
<ContentTemplate>
<div class="row" runat="server" id="divCFPIva">
<div class="col-md-6">
<div class="form-group">
<label for="txtCF">Codice Fiscale</label>
<asp:TextBox runat="server" ID="txtCF" type="text" MaxLength="16" class="form-control" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="txtPIVA">Partita IVA</label>
<asp:TextBox runat="server" ID="txtPIVA" type="text" MaxLength="11" class="form-control" />
</div>
</div>
<div class="col-md-12">
<span class="help-inline hidden lblerror" runat="server" id="lblErrorCFPIva"></span>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group" runat="server" id="divEmail">
<label for="txtEmail" class="control-label">Email*</label>
<div class="controls">
<asp:TextBox runat="server" TextMode="Email" type="text" ID="txtEmail" class="form-control" />
<span class="help-inline hidden lblerror" runat="server" id="lblErrorEmail"></span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group" runat="server" id="divTelefono">
<label for="txtTelefono" class="control-label">Recapito Telefonico*</label>
<div class="controls">
<asp:TextBox runat="server" ID="txtTelefono" type="text" TextMode="Phone" class="form-control" />
<span class="help-inline hidden lblerror" runat="server" id="lblErrorTelefono"></span>
</div>
</div>
</div>
</div>
<!-- /Row -->
<div class="form-group">
<asp:RadioButton runat="server" ID="radioScegliIndirizziFatt" Text=" Scegli tra uno dei tuoi indirizzi" AutoPostBack="true" OnCheckedChanged="radioScegliIndirizziFatt_CheckedChanged" Checked="true" GroupName="radioIndirizziFatt" />
<div class="form-group" runat="server" id="divScegliIndirizzoFatt">
<asp:DropDownList runat="server" ID="ddlIndirizziFatt" class="form-control"></asp:DropDownList>
<span class="help-inline hidden lblerror" runat="server" id="lblErrorScegliIndirizziFatt"></span>
</div>
<br />
<asp:RadioButton runat="server" ID="radioNuovoIndirizzoFatt" Text=" Inserisci un nuovo Indirizzo" AutoPostBack="true" OnCheckedChanged="radioNuovoIndirizzoFatt_CheckedChanged" GroupName="radioIndirizziFatt" />
<div class="form-group" runat="server" id="divNomeFatt">
<label for="txtNomeFatt" class="control-label">Nome o Ragione Sociale*</label>
<div class="controls">
<asp:TextBox runat="server" ID="txtNomeFatt" type="text" class="form-control" />
<span class="help-inline hidden lblerror" runat="server" id="lblErrorNomeFatt"></span>
</div>
</div>
<div class="form-group" runat="server" id="divIndirizzoFatt">
<label for="txtIndirizzoFatt" class="control-label">Indirizzo*</label>
<div class="controls">
<asp:TextBox runat="server" ID="txtIndirizzoFatt" type="text" class="form-control" />
<span class="help-inline hidden lblerror" runat="server" id="lblErrorIndirizzoFatt"></span>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="form-group" runat="server" id="divStatoFatt">
<label for="ddlStatoFatt" class="control-label">Stato</label>
<div class="controls">
<asp:DropDownList runat="server" ID="ddlStatoFatt" OnSelectedIndexChanged="ddlStatoFatt_SelectedIndexChanged" class="form-control" AutoPostBack="true" />
</div>
</div>
</div>
<div class="col-md-7">
<div class="form-group" runat="server" id="divProvinciaFatt" visible="false">
<label runat="server" id="lblProvinciaFatt" for="ddlProvinciaFatt" class="control-label">Provincia</label>
<div class="controls">
<asp:DropDownList runat="server" ID="ddlProvinciaFatt" class="form-control" OnSelectedIndexChanged="ddlProvinciaFatt_SelectedIndexChanged" AutoPostBack="true" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8" runat="server" id="divCittaFatt">
<div class="form-group">
<label runat="server" id="lblCittaFatt" for="txtCittaFatt" class="control-label">Città*</label>
<div class="form-group" runat="server" id="divDDLFatt" visible="false">
<asp:DropDownList runat="server" ID="ddlCittaFatt" class="form-control" OnSelectedIndexChanged="ddlCittaFatt_SelectedIndexChanged" AutoPostBack="true" />
</div>
<br />
<div class="form-group" runat="server" id="divTXTFatt" visible="false">
<asp:TextBox runat="server" ID="txtCittaFatt" type="text" class="form-control" />
</div>
<span class="help-inline hidden lblerror" runat="server" id="lblErrorCittaFatt"></span>
</div>
</div>
<div class="col-md-4" runat="server" id="divCAPFatt">
<div class="form-group">
<label for="txtCAPFatt" class="control-label">CAP*</label>
<div class="controls">
<asp:TextBox runat="server" ID="txtCapFatt" type="text" class="form-control" />
<span class="help-inline hidden lblerror" runat="server" id="lblErrorCAPFatt"></span>
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
And I'm trying to fire an UpdateProgress that I would like show loading image at every post back of the controls inside the UpdatePanel.
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="panelFatt">
<ProgressTemplate>
<div class="modal">
<div class="center">
<img alt="" src="http://i.stack.imgur.com/FhHRx.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
This is not working at all.
I saw on the Internet that someone associates a client method with the click of a button in the Update Panel.
But I should do it for all the controls that make a post back within my update panel.
Is there a way to make it work?
I modified my code in this way:
<asp:UpdatePanel runat="server" ID="panelFatt" UpdateMode="Conditional">
<ContentTemplate>
<div class="row">
<div class="col-md-6">
<h4>
<asp:CheckBox runat="server" ID="checkFattura" Text="Desidero ricevere la Fattura" AutoPostBack="true" OnCheckedChanged="checkFattura_CheckedChanged" CssClass="checkbox-inline cssRadio" /></h4>
</div>
</div>
<br />
<div class="row" runat="server" id="divCFPIva">
<div class="col-md-6">
<div class="form-group">
<label for="txtCF" runat="server" id="lblCF" visible="false">Codice Fiscale</label>
<asp:TextBox runat="server" ID="txtCF" type="text" MaxLength="16" class="form-control" Visible="false" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="txtPIVA" runat="server" id="lblPIva" visible="false">Partita IVA</label>
<asp:TextBox runat="server" ID="txtPIVA" type="text" MaxLength="11" class="form-control" Visible="false" />
</div>
</div>
<div class="col-md-12">
<span class="help-inline hidden lblerror" runat="server" id="lblErrorCFPIva"></span>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group" runat="server" id="divEmail">
<label for="txtEmail" class="control-label">Email*</label>
<div class="controls">
<asp:TextBox runat="server" TextMode="Email" type="text" ID="txtEmail" class="form-control" />
<span class="help-inline hidden lblerror" runat="server" id="lblErrorEmail"></span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group" runat="server" id="divTelefono">
<label for="txtTelefono" class="control-label">Recapito Telefonico*</label>
<div class="controls">
<asp:TextBox runat="server" ID="txtTelefono" type="text" TextMode="Phone" class="form-control" />
<span class="help-inline hidden lblerror" runat="server" id="lblErrorTelefono"></span>
</div>
</div>
</div>
</div>
<!-- /Row -->
<div class="form-group">
<div runat="server" id="divNotVisibleFatt">
<asp:RadioButton runat="server" ID="radioScegliIndirizziFatt" Text=" Scegli tra uno dei tuoi indirizzi" AutoPostBack="true" OnCheckedChanged="radioScegliIndirizziFatt_CheckedChanged" Checked="true" GroupName="radioIndirizziFatt" />
<div class="form-group" runat="server" id="divScegliIndirizzoFatt">
<asp:DropDownList runat="server" ID="ddlIndirizziFatt" class="form-control"></asp:DropDownList>
<span class="help-inline hidden lblerror" runat="server" id="lblErrorScegliIndirizziFatt"></span>
</div>
<br />
<asp:RadioButton runat="server" ID="radioNuovoIndirizzoFatt" Text=" Inserisci un nuovo Indirizzo" AutoPostBack="true" OnCheckedChanged="radioNuovoIndirizzoFatt_CheckedChanged" GroupName="radioIndirizziFatt" />
</div>
<div class="form-group" runat="server" id="divNomeFatt">
<label for="txtNomeFatt" class="control-label">Nome o Ragione Sociale*</label>
<div class="controls">
<asp:TextBox runat="server" ID="txtNomeFatt" type="text" class="form-control" />
<span class="help-inline hidden lblerror" runat="server" id="lblErrorNomeFatt"></span>
</div>
</div>
<div class="form-group" runat="server" id="divIndirizzoFatt">
<label for="txtIndirizzoFatt" class="control-label">Indirizzo*</label>
<div class="controls">
<asp:TextBox runat="server" ID="txtIndirizzoFatt" type="text" class="form-control" />
<span class="help-inline hidden lblerror" runat="server" id="lblErrorIndirizzoFatt"></span>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="form-group" runat="server" id="divStatoFatt">
<label for="ddlStatoFatt" class="control-label">Stato</label>
<div class="controls">
<asp:DropDownList runat="server" ID="ddlStatoFatt" OnSelectedIndexChanged="ddlStatoFatt_SelectedIndexChanged" class="form-control" AutoPostBack="true" />
</div>
</div>
</div>
<div class="col-md-7">
<div class="form-group" runat="server" id="divProvinciaFatt" visible="false">
<label runat="server" id="lblProvinciaFatt" for="ddlProvinciaFatt" class="control-label">Provincia</label>
<div class="controls">
<asp:DropDownList runat="server" ID="ddlProvinciaFatt" class="form-control" OnSelectedIndexChanged="ddlProvinciaFatt_SelectedIndexChanged" AutoPostBack="true" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8" runat="server" id="divCittaFatt">
<div class="form-group">
<label runat="server" id="lblCittaFatt" for="txtCittaFatt" class="control-label">Città*</label>
<div class="form-group" runat="server" id="divDDLFatt" visible="false">
<asp:DropDownList runat="server" ID="ddlCittaFatt" class="form-control" OnSelectedIndexChanged="ddlCittaFatt_SelectedIndexChanged" AutoPostBack="true" />
</div>
<br />
<div class="form-group" runat="server" id="divTXTFatt" visible="false">
<asp:TextBox runat="server" ID="txtCittaFatt" type="text" class="form-control" />
</div>
<span class="help-inline hidden lblerror" runat="server" id="lblErrorCittaFatt"></span>
</div>
</div>
<div class="col-md-4" runat="server" id="divCAPFatt">
<div class="form-group">
<label for="txtCAPFatt" class="control-label">CAP*</label>
<div class="controls">
<asp:TextBox runat="server" ID="txtCapFatt" type="text" class="form-control" />
<span class="help-inline hidden lblerror" runat="server" id="lblErrorCAPFatt"></span>
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="checkFattura" EventName="CheckedChanged"/>
<asp:AsyncPostBackTrigger ControlID="radioScegliIndirizziFatt" EventName="CheckedChanged"/>
<asp:AsyncPostBackTrigger ControlID="radioNuovoIndirizzoFatt" EventName="CheckedChanged"/>
<asp:AsyncPostBackTrigger ControlID="ddlStatoFatt" EventName="SelectedIndexChanged"/>
<asp:AsyncPostBackTrigger ControlID="ddlProvinciaFatt" EventName="SelectedIndexChanged"/>
<asp:AsyncPostBackTrigger ControlID="ddlCittaFatt" EventName="SelectedIndexChanged"/>
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="panelFatt">
<ProgressTemplate>
<div class="modal">
<div class="center">
<img alt="" src="https://i.stack.imgur.com/FhHRx.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
but even not working..
and my data bind aer in Page_Load
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// Combo Province
DataTable dtProv = oTabelle.GetDTProvinceByIdStato(IdStatoITA);
oUty.loadDDL(ref ddlProvinciaFatt, dtProv, "IdProvincia", "NomeProvincia", "", "", "");
ddlProvinciaFatt.SelectedValue = "";
...
}
}
and my associated event is the following
protected void ddlProvinciaFatt_SelectedIndexChanged(object sender, EventArgs e)
{
txtCapFatt.Text = "";
string idProvincia = ddlProvinciaFatt.SelectedValue;
// carico i comuni della provincia
oUty.loadDDL(ref ddlCittaFatt, oTabelle.GetDTComuniByIdProvincia(idProvincia), "IdComune", "NomeComune", "", "", "", true);
ddlCittaFatt.SelectedIndex = -1;
}
where I'm wrong?
For displaying UpdateProgress on every PostBack of your Controls in UpdatePanel:
Set UpdateMode of your UpdatePanel to Conditional:
Manually trigger AsyncPostBackTrigger to your controls inside UpdatePanel and give the ControlID and EventName that will fire:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" >
</ContentTemplate>
<!-- Some other controls that perform post back -->
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlStatoFatt"
EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
And can test its working in events using System.Threading.Thread.Sleep(3000);:
protected void ddlStatoFatt_SelectedIndexChanged(object sender, EventArgs e)
{
// delay it for testing
System.Threading.Thread.Sleep(3000);
Label1.Text = "Page refreshed with DropDownList at " +
DateTime.Now.ToString();
}
I have tried this at my site and its working:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<fieldset>
<legend>UpdatePanel1</legend>
<asp:Label ID="Label1" runat="server" Text="Panel initially rendered."></asp:Label>
<br />
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"
OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Value="1">Choose</asp:ListItem>
<asp:ListItem Value="2">Blue</asp:ListItem>
<asp:ListItem Value="3">Green</asp:ListItem>
</asp:DropDownList>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</fieldset>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
Panel2 updating....
</ProgressTemplate>
</asp:UpdateProgress>
And Code-Behind:
protected void Button1_Click(object sender, EventArgs e)
{
// Introducing delay for demonstration.
System.Threading.Thread.Sleep(3000);
Label1.Text = "Page refreshed at " +
DateTime.Now.ToString();
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
// Introducing delay for demonstration.
System.Threading.Thread.Sleep(3000);
Label1.Text = "Page refreshed with DDL at " +
DateTime.Now.ToString();
}
I used code below in my projects and worked properly. I hope it helps you.
<asp:UpdatePanel ID="panelFatt" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:UpdateProgress ID="UpdateProgress1" runat="Server" DisplayAfter="1" AssociatedUpdatePanelID="panelFatt">
<ProgressTemplate>
<div style="position: absolute; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
<image src="http://i.stack.imgur.com/FhHRx.gif" alternatetext="Loading ..." tooltip="Loading ..." style="padding: 10px; position: absolute; top: 45%; left: 50%;" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
From the Code you provided , everything seems fine but you have missed to add the AsyncPostback trigger in your <asp:updatepanel></asp:updatepanel> : for your case , this can be added:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlStatoFatt"
EventName="SelectedIndexChanged" />
</Triggers>
I have added only on dropdown , to check whether its working or not , if it goes well then you can change the controlID with your updatepannelId.
Another thing you missed in your code is that you need to see the UpdateMode="Conditional" in your update panel
If you need to show it for fullpostbacks you can use a simple javascript function. Taken from, https://forums.asp.net/t/1101546.aspx?Update+Progress+show+on+Ajax+Full+Postback+Trigger
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="upTest">
<ProgressTemplate>
Updating!
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="upTest" ChildrenAsTriggers="False" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Button ID="btnFullPost" Text="Full Post" runat="server" OnClick="btnFullPost_Click" OnClientClick="ShowProgress();"/>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnFullPost" />
</Triggers>
</asp:UpdatePanel>
<script type="text/javascript">
function ShowProgress()
{
document.getElementById('<% Response.Write(UpdateProgress1.ClientID); %>').style.display = "inline";
}
</script>
I have modal pop up after clicking an asp button :
<div class="form-group">
<asp:Button ID="btnBrand" runat="server" Text="Add brand" CssClass="btn btn-info" OnClick="btnAdd_Click" />
</div>
Code Behind :
protected void btnAdd_Click(object sender, EventArgs e) //Open Model popup
{
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(#"<script type='text/javascript'>");
sb.Append("$('#addModal').modal('show');");
sb.Append(#"</script>");
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "AddShowModalScript", sb.ToString(), false);
}
My popup modal html :
<div id="addModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="addModalLabel">Add brand details</h3>
</div>
<asp:UpdatePanel ID="updAdd" runat="server">
<ContentTemplate>
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group" title="Code">
<div class="input-group FullWidth ">
<label for="Code" class="col-sm-2 control-label">Code</label>
<div class="col-sm-10">
<asp:TextBox ID="txtCodeAdd" runat="server" CssClass="form-control" MaxLength="10" onchange="OnTextChanged()" ToolTip="Colour Code" ValidationGroup="Save"></asp:TextBox>
</div>
</div>
</div>
<div class="form-group" title="Vendor">
<div class="input-group FullWidth">
<label for="Code" class="col-sm-2 control-label">Vendor</label>
<div class="col-sm-5">
<asp:TextBox ID="txtVendorAdd" runat="server" MaxLength="20" CssClass="form-control" ToolTip="Vendor" ReadOnly="true"></asp:TextBox>
</div>
<div class="col-sm-5 row form-inline">
<asp:Button ID="btnLookup" runat="server" Text="Lookup" CssClass="btn btn-info" OnClientClick="openLookup()" />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAddRecord" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>
In this popup modal will trigger new window look-up page, my apsx lookup page as below :
<asp:UpdatePanel ID="upVendorLookup" runat="server">
<ContentTemplate>
<asp:GridView ID="grdVendor" runat="server" Width="100%" HorizontalAlign="Center"
AutoGenerateColumns="false" AllowPaging="True"
DataKeyNames="ID" CssClass="table table-condensed" GridLines="None"
OnPageIndexChanging="grdVendorPageIndexChanging">
<Columns>
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<input name="rdVendor" type="radio" value='<%# Eval("ID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Code" HeaderText="Code" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Tel1" HeaderText="Tel#1" />
<asp:BoundField DataField="Tel2" HeaderText="Tel#2" />
</Columns>
</asp:GridView>
<asp:Button ID="btnSelect" runat="server" Text="Select" CssClass="btn btn-info" OnClick="btnSelectVendor" />
</ContentTemplate>
</asp:UpdatePanel>
Code behind :
protected void btnSelectVendor(object sender, EventArgs e)
{
string selectedValue = Request.Form["rdVendor"];
HttpContext.Current.Items["rdVendor"] = selectedValue;
Server.Transfer("../CodeEntry/Brand.aspx");
}
How do pass back the selected vendorID back to the brand.aspx and refreshing the pop up modal then set the vendorID value to the textbox in the popup modal ? And also closed the pop window..
Does it possible to implement in this way ?
I am now using HttpContext and able to get the vendorID in the pageload function from brand.aspx but unable to set the vendorID to the popup modal..
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
string test = (String)HttpContext.Current.Items["rdVendor"];
txtVendorAdd.Text = test;
}
}
Any idea ?
If you fire up a modal popup using the below approach it would give you complete control on passing values between parent and popup.
http://02e34b5.netsolhost.com/youtube/Zpopup.aspx
I have a page where I am using 3 update panels and all the update panels are working well. In one of the update panels, I have a button which on click changes label text but the problem is that on if post back happens in any of the update panels file upload loses its file.
All the update panels are used to update separate sections of page. No update panel is nested. The file upload is outside; it is not in any of the update panels but it is still losing its file.
<%# Control Language="C#" AutoEventWireup="true" CodeFile="WalkInControl.ascx.cs"
Inherits="Modules_WalkInControl" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>
<asp:Panel ID="Panel1" runat="server" Font-Size="13px" Width="670">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers ="true" UpdateMode="Conditional">
<ContentTemplate>
<div class="formfieldset" style="margin-bottom: 40px;">
<div class="formrow">
<div class="paymentfrmlabels">
Check In :</div>
<div class="paymentfrmtxtbox">
<asp:TextBox ID="txtCheckIn" runat="server" Width="153px"></asp:TextBox>
<asp:ImageButton ID="imgbtnCalendar1" runat="server" ImageUrl="~/App_Themes/Default/images/ico-calendar.gif"
CausesValidation="false" Width="20" Height="20" />
<ajaxtoolkit:CalendarExtender ID="CalendarExtender2" runat="server" Format="dd/MM/yyyy"
TargetControlID="txtCheckIn" PopupButtonID="imgbtnCalendar1" />
</div>
<div class="paymentfrmvalidation">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="[*]"
ControlToValidate="txtCheckIn" Display="Dynamic" ValidationGroup="a"></asp:RequiredFieldValidator>
</div>
</div>
<div class="formrow">
<div class="paymentfrmlabels">
Check Out:
</div>
<div class="paymentfrmtxtbox">
<asp:TextBox ID="txtCheckOut" runat="server" Width="153px"></asp:TextBox>
<asp:ImageButton ID="imgbtnCalendar" runat="server" ImageUrl="~/App_Themes/Default/images/ico-calendar.gif"
CausesValidation="false" ImageAlign="Top" Width="20" Height="20" />
<ajaxtoolkit:CalendarExtender ID="CalendarExtender1" runat="server" Format="dd/MM/yyyy"
TargetControlID="txtCheckOut" PopupButtonID="imgbtnCalendar" />
</div>
<div class="paymentfrmvalidation">
<asp:RequiredFieldValidator ID="valStartDate" runat="server" ErrorMessage="[*]" ControlToValidate="txtCheckOut"
Display="Dynamic" ValidationGroup="a"></asp:RequiredFieldValidator>
</div>
</div>
<div class="formrow">
<div class="paymentfrmlabels">
Room Type :
</div>
<div class="paymentfrmtxtbox">
<asp:DropDownList ID="drpRoomtype" runat="server" Width="172px" AutoPostBack="True"
OnSelectedIndexChanged="drpRoomtype_SelectedIndexChanged" AppendDataBoundItems="True">
</asp:DropDownList>
</div>
</div>
<div class="formrow">
<div class="paymentfrmlabels">
Plan :
</div>
<div class="paymentfrmtxtbox" style="height: 25px;">
<asp:DropDownList ID="drpPlan" Width="172px" AutoPostBack="True"
runat="server" onselectedindexchanged="drpPlan_SelectedIndexChanged1">
</asp:DropDownList>
</div>
</div>
<div class="formrow" style="height: 75px;">
<div class="paymentfrmlabels">
Room :
</div>
<div class="paymentfrmtxtbox">
<asp:ListBox ID="lstRooms" runat="server" Width="172px" SelectionMode="Multiple">
</asp:ListBox>
</div>
<div class="paymentfrmvalidation">
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="lstRooms"
ErrorMessage="[*]" ValidationGroup="b"></asp:RequiredFieldValidator>
</div>
<div class="paymentfrmvalidation">
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<img src="../Images/loading_sm.gif" border="0" alt="">
</ProgressTemplate>
</asp:UpdateProgress>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="drpRoomtype"
ErrorMessage="[*]" ValidationGroup="a"></asp:RequiredFieldValidator>
</div>
</div>
<div class="formrow">
<div class="paymentfrmlabels">
Adults :
</div>
<div class="paymentfrmtxtbox" style="width: 50px; height: 25px;">
<asp:DropDownList ID="drpAdults" Width="50px" runat="server" AutoPostBack="True"
OnSelectedIndexChanged="drpAdults_SelectedIndexChanged" AppendDataBoundItems="True">
</asp:DropDownList>
</div>
<div class="paymentfrmlabels" style="width: 65px;">
Children :
</div>
<div class="paymentfrmtxtbox" style="width: 50px; height: 25px;">
<asp:DropDownList ID="drpChildren" Width="50px" runat="server" AutoPostBack="True"
OnSelectedIndexChanged="drpChildren_SelectedIndexChanged">
</asp:DropDownList>
</div>
</div>
<div class="formrow">
<div class="paymentfrmlabels">
Rate :</div>
<div class="paymentfrmtxtbox">
<asp:TextBox ID="txtRate" Width="153px" runat="server"></asp:TextBox>
</div>
<div class="paymentfrmvalidation">
<%--<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtRate"
ErrorMessage="Invalid Format" ValidationExpression="^(-)?\d+(\.\d\d)?$" ValidationGroup="a"></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtRate"
ErrorMessage="Rate Required" ValidationGroup="a"></asp:RequiredFieldValidator></div>--%>
</div>
</div> <div align="center"> <asp:Label ID="lblRoomMsg" runat="server" ForeColor="Red"></asp:Label></div>
<div class="formrow">
<div class="paymentfrmlabels">
Advance Pay:
</div>
<div class="paymentfrmtxtbox" style="height: 25px;">
<asp:TextBox ID="txtAdvance" runat="server" Width="153px">0.0</asp:TextBox>
</div>
</div>
<div class="formrow" style="text-align: right;">
<asp:LinkButton ID="lnkAdd" CssClass="btn" runat="server" Width="60px" OnClick="lnkAdd_Click1">ADD</asp:LinkButton>
</div>
<div class="formrow" style="text-align:center;">
<asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="txtCheckOut"
ControlToValidate="txtCheckIn" Operator="LessThanEqual" Type="Date" ForeColor="Red" ErrorMessage="CheckIn Must Be Before CheckOut"
Display="Dynamic" ValidationGroup="a"/>
</div>
<div class="formrow" style="height: auto; margin-top: 20px; width: 430px;">
<asp:GridView ID="gvAddedRooms" runat="server" CssClass="active-grid" AutoGenerateColumns="False"
DataKeyNames="ID" Height="18px" Width="100%" OnRowDeleting="gvAddedRooms_RowDeleting">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="RoomTypeX" HeaderText="RoomType" />
<asp:BoundField DataField="RoomX" HeaderText="RoomX" />
<asp:BoundField DataField="Rate" HeaderText="Rate" DataFormatString="{0:f}" />
<asp:BoundField DataField="Adults" HeaderText="Adults" />
<asp:BoundField DataField="Children" HeaderText="Children" />
<asp:CommandField ShowDeleteButton="True" />
</Columns>
</asp:GridView>
</div>
<div style="float:left;"> <asp:Label ID="Label1" runat="server" Text="Total Charge : " Font-Bold="true" ForeColor ="Blue" style="font-size:19px;"></asp:Label><asp:Label ID="lblTotalAmount" runat="server" Text=""></asp:Label>
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="gvAddedRooms" />
<asp:PostBackTrigger ControlID="drpRoomtype" />
<asp:PostBackTrigger ControlID="drpPlan" />
<asp:PostBackTrigger ControlID="lnkAdd" />
<asp:PostBackTrigger ControlID="lstRooms" />
<asp:PostBackTrigger ControlID="drpAdults" />
<asp:PostBackTrigger ControlID="drpChildren" />
<asp:PostBackTrigger ControlID="btnRemoveFilename1" />
</Triggers>
</asp:UpdatePanel>
<%--<div class="formrow" style="text-align: right;">
<asp:UpdatePanel ID="UpdatePanel3" UpdateMode ="Conditional" runat="server">
<ContentTemplate >
Agency :
<asp:DropDownList ID="drpChannel" runat="server" Width="172px" AutoPostBack="True"
Height="32px" >
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="drpChannel"
/>
<asp:AsyncPostBackTrigger ControlID="lnkNewChannel" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:LinkButton ID="lnkNewChannel" runat="server" >New Channel</asp:LinkButton>
</div> --%>
<div class="newsubheadingsearchqueryresults" style="width: 685px;">
<h3>
Customer Details</h3>
<span class="requiredExample">[ * ] = Required Information</span></div>
<div class="formfieldset" style="margin-bottom: 40px;">
<div class="formrow">
<div class="paymentfrmlabels">
Paying Customer :</div>
<div class="paymentfrmtxtbox">
<asp:TextBox ID="txtCustomerName" Width="153px" runat="server"></asp:TextBox>
</div>
<div class="paymentfrmvalidation">
<asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="txtCustomerName"
ErrorMessage="[*]" ValidationExpression="^[a-zA-Z''-'\s]{1,40}$"
ValidationGroup="a" Display="Dynamic"></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtCustomerName"
ValidationGroup="a" ErrorMessage="[*]" Display="Dynamic"></asp:RequiredFieldValidator>
</div>
</div>
<div class="formrow">
<div class="paymentfrmlabels">
Customer Type :</div>
<div class="paymentfrmtxtbox">
<asp:DropDownList ID="drpCustomerType" Width="153px" runat="server">
<asp:ListItem Text="Person" Value="Person"></asp:ListItem>
<asp:ListItem Text="Company" Value="Company"></asp:ListItem>
</asp:DropDownList>
</div>
</div>
<div class="formrow">
<div class="paymentfrmlabels">
E-Mail :
</div>
<div class="paymentfrmtxtbox">
<asp:TextBox ID="txtEmail" Width="153px" runat="server"></asp:TextBox>
</div>
<div class="paymentfrmvalidation">
</div>
</div>
<div class="formrow">
<div class="paymentfrmlabels">
Phone No :
</div>
<div class="paymentfrmtxtbox">
<asp:TextBox ID="txtPhone" runat="server" Height="23px" Width="153px"></asp:TextBox>
</div>
<div class="paymentfrmvalidation">
<asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" ErrorMessage="Invalid format"
Display="Dynamic" ValidationExpression="^[0-9]*$" ControlToValidate="txtPhone"
ValidationGroup="a"></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="txtPhone"
Display="Dynamic" ValidationGroup="a" ErrorMessage="[*]"></asp:RequiredFieldValidator>
</div>
</div>
<div class="formrow" style="height: 130px;">
<div class="paymentfrmlabels">
Address:</div>
<div class="paymentfrmtxtbox">
<asp:TextBox ID="txtAddress" runat="server" Height="129px" TextMode="MultiLine" Width="153px"></asp:TextBox>
</div>
</div>
<div class="formrow">
<div class="paymentfrmlabels">
City :</div>
<div class="paymentfrmtxtbox">
<asp:TextBox ID="txtCity" runat="server" Width="153px"></asp:TextBox>
</div>
</div>
<div class="formrow">
<div class="paymentfrmlabels">
Country :</div>
<div class="paymentfrmtxtbox">
<asp:DropDownList ID="drpCountry" Width="153px" runat="server">
</asp:DropDownList>
</div>
</div>
<div class="formrow">
<div class="paymentfrmlabels">
State :</div>
<div class="paymentfrmtxtbox">
<asp:TextBox ID="txtState" Width="153px" runat="server"></asp:TextBox>
</div>
</div>
<div class="formrow">
<div class="paymentfrmlabels">
Postal Code :</div>
<div class="paymentfrmtxtbox">
<asp:TextBox ID="txtPostalCode" Width="153px" runat="server"></asp:TextBox>
</div>
</div>
<div class="formrow" style="height: 90px; width: 670px;">
<div class="paymentfrmlabels">
Other Guest Names :</div>
<div class="paymentfrmtxtbox" style="margin-right:45px;">
<asp:TextBox ID="txtOtherGuest" runat="server" Height="90px" Width="153px" TextMode="MultiLine"></asp:TextBox>
</div>
<div class="paymentfrmlabels">
Other Information:</div>
<div class="paymentfrmtxtbox">
<asp:TextBox ID="txtOtherInf" runat="server" Height="90px" Width="153px" TextMode="MultiLine"></asp:TextBox>
</div>
</div>
<div class="formrow" style="vertical-align: text-top;">
<div class="paymentfrmlabels">
Identity Proof :</div>
</div>
<div class="formrow">
<div class="paymentfrmtxtbox">
</div>
</div>
<div class="formrow" style="text-align: right">
<div class="paymentfrmlabels">
<input id="txtLogoFileName1" type="file" style ="float :left; z-index:999;" name="txtSmallImage1FileName" runat="server" />
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers ="true" UpdateMode ="Conditional">
<ContentTemplate >
<div class="paymentfrmtxtbox">
<asp:Button ID="btnRemoveFilename1" runat="server" style="margin-left:50px; float :left; z-index:999;" Text="Remove" OnClick="btnRemoveFilename1_Click">
</asp:Button>
</div>
<asp:Label ID="lblLogoFileName1" runat="server" CssClass="labelText" ForeColor="Silver"> </asp:Label>
</div>
</ContentTemplate>
<Triggers >
<asp:PostBackTrigger ControlID ="btnRemoveFilename1" />
</Triggers>
</asp:UpdatePanel>
<div class="formrow" style="width: 300px;">
<div class="paymentfrmtxtbox ">
<asp:UpdatePanel ID="UpdatePanel3" UpdateMode ="Conditional" ChildrenAsTriggers ="true" runat="server">
<ContentTemplate >
Agency:
<asp:DropDownList ID="drpChannel" runat="server" Width="153px" AutoPostBack="True"
style=" float: right; height: 28px; margin-right: 65px;width: 157px;" >
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="drpChannel"
/>
<asp:AsyncPostBackTrigger ControlID="lnkNewChannel" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:LinkButton ID="lnkNewChannel" runat="server" style="display:block; float: right;margin-right: -71px; margin-top: 16px;" >New Channel</asp:LinkButton>
</div>
</div>
</div>
<div class="formrow" style="text-align: right; font-weight:bold; color:#000;">
</div>
<div class="formrow" style="text-align: right; width: 670px;">
<asp:LinkButton ID="lnkSubmit" CssClass="btn" runat="server" OnClick="lnkSubmit_Click1"
Width="65px" ValidationGroup="a">Check In</asp:LinkButton>
<asp:LinkButton ID="lnkCheckout" CssClass="btn" Width="65px" runat="server" OnClick="lnkCheckout_Click"
ValidationGroup="a">Check Out</asp:LinkButton>
<asp:LinkButton ID="lnkCancel" CssClass="btn" Width="65px" runat="server" OnClick="lnkCancel_Click1">Cancel</asp:LinkButton>
</div>
</div>
</div>
<ajaxtoolkit:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="modalBackground" PopupControlID ="pnlChannel" TargetControlID ="lnkNewChannel" CancelControlID ="ImgBtnClose" runat="server">
</ajaxtoolkit:ModalPopupExtender>
<asp:Panel ID="pnlChannel" runat="server">
<div align="right" style ="padding-top :50px" >
<asp:ImageButton ID="ImgBtnClose" width="25px" Height ="25px" ImageUrl="~/Images/cross.png" runat="server" /></div>
<div style ="background-color:White ; border :20px; border-color:Blue;padding:20px 40px; border-radius:20px;" >
<style type="text/css">
.style1 {
width: 100%;
}
.style2
{
text-align: center;
font-weight: bold;
font-family: Andalus;
font-size: xx-large;
color: #434343;
}
.style3
{
width: 81px;
}
</style>
<div>
<table class="style1">
<tr>
<td class="style2" colspan="2">
Agency</td>
</tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr>
<td class="style3">
<asp:Label ID="lblName" runat="server" Text="Name:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtName" runat="server" Width="189px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server"
ControlToValidate="txtName" Display="Dynamic" ErrorMessage="Mandatory Field!!!"
ForeColor="Red" ValidationGroup="acssd23"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator5" runat="server"
ControlToValidate="txtName" Display="Dynamic"
ErrorMessage="Invalid Name Format!!!" Font-Names="Arial" Font-Size="8pt"
ForeColor="Red" SetFocusOnError="True"
ValidationExpression="^[a-zA-Z-'.\s]{1,50}" ValidationGroup="acssd23"></asp:RegularExpressionValidator>
</td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td class="style3">
<asp:Label ID="lblContact" runat="server" Text="Contact:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtContact" runat="server" Width="189px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server"
ControlToValidate="txtContact" Display="Dynamic"
ErrorMessage="Mandatory Field!!!" ForeColor="Red"
ValidationGroup="acssd23"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ControlToValidate="txtContact" Display="Dynamic"
ErrorMessage="Invalid Contact Format!!!" ForeColor="Red"
style="font-size: xx-small" ValidationExpression="^[0-9-+]*$"
ValidationGroup="acssd23"></asp:RegularExpressionValidator>
</td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td class="style3">
<asp:Label ID="lblAddress" runat="server" Text="Address:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtAddresss" runat="server" Height="64px" TextMode="MultiLine"
width="189px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server"
ControlToValidate="txtAddresss" Display="Dynamic"
ErrorMessage="Mandatory Field!!!" ForeColor="Red"
ValidationGroup="acssd23"></asp:RequiredFieldValidator>
</td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td class="style3">
<asp:Label ID="lblEmail" runat="server" Text="Email:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtEmails" runat="server" Width="189px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server"
ControlToValidate="txtEmails" Display="Dynamic"
ErrorMessage="Mandatory Field!!!" ForeColor="Red"
ValidationGroup="acssd23"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator015" runat="server"
ControlToValidate="txtEmail" ErrorMessage="Invalid Email Format!!!"
ForeColor="Red"
ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"
ValidationGroup="acssd23"></asp:RegularExpressionValidator>
</td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td class="style3">
<asp:Label ID="lblWebsite" runat="server" Text="Website:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtWebsite" runat="server" Width="189px"></asp:TextBox>
</td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td class="style3">
</td>
<td>
</td>
</tr>
<tr>
<td class="style3">
</td>
<td align ="right" >
<asp:Button ID="btnSubmit" CssClass="btn" Width ="140px" runat="server" Text="Submit"
onclick="btnSubmit_Click" style="height: 26px" ValidationGroup="acssd23" />
</td>
</tr>
</table>
</div>
</div>
</asp:Panel>
</asp:Panel>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional">
<Triggers>
<asp:PostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="Button1" runat="server"Text="Upload" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
The default ASP.NET FileUpload control will never work with an UpdatePanel. You need a special AsyncFileUpload control as defined in an AjaxControl Toolkit.
<ajaxToolkit:AsyncFileUpload OnClientUploadError="uploadError"
OnClientUploadComplete="uploadComplete" runat="server"
ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern"
UploadingBackColor="#CCFFFF" ThrobberID="myThrobber" />
or you can use UpdatePanel Triggers
<Triggers>
<asp:PostBackTrigger ControlID="YourControlID" />
</Triggers>
I spent all afternoon on this today, using any number of solutions I found on various forums, including this one, CodeProject.com, asp.net forums, and a whole slew of others. I tried setting Postback triggers and AsyncPostback triggers, and this late at night I can't remember what all else. None of them worked, including the one marked as the answer on this page. What I finally found was an obscure post from 2007 on the asp.net forum which, for some reason now will not load on my browser. At any rate, what finally worked for me was replacing the
<form id="form1" runat="server>
tag with this:
<form id="Form1" method="post" enctype="multipart/form-data" runat="server">
Worked beautifully.
In my case it was in the Site.Master file, but in the case of the posting on forums.asp.net, it worked in a default.aspx file.
Update: The forums.asp.net site was down, but it's back up now: UpdatePanel + FileUpload + PostBackTrigger doesn't seem to work.
I making an add form in my modal. The modal contains 2 dropdownlists, 4 textboxes (1 hidden) and a button for adding.
I bind my dropdown list for the item category then bind my other dropdown list for the item name. However when I change my Item Category in my dropdown list the dropdown list for my item name is not responding or it not binding. Can anyone help me?
<div id="addModal" class="modal fade">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Add Item</h4>
</div>
<div class="modal-body">
<div class="form-inline form-group">
<asp:Label ID="Label1" CssClass="control-label col-xs-3" runat="server" Text="Category:"></asp:Label>
<div class="col-xs-offset-3">
<asp:DropDownList ID="drpCategory" runat="server" CssClass="form-control col-xs-5" OnTextChanged="drpCategory_TextChanged" />
</div>
</div>
<div class="form-inline form-group">
<asp:Label ID="Label2" CssClass="control-label col-xs-3" runat="server" Text="Item Name:"></asp:Label>
<div class="col-xs-offset-3">
<asp:TextBox ID="txtitem" runat="server" CssClass="form-control col-xs-5" Visible="false" />
<asp:DropDownList ID="drpItem" runat="server" CssClass="form-control col-xs-5" Visible="true" />
</div>
</div>
<div class="form-inline form-group">
<asp:Label ID="Label3" CssClass="control-label col-xs-3" runat="server" Text="Unit:"></asp:Label>
<div class="col-xs-offset-3">
<asp:TextBox ID="txtUnit" runat="server" CssClass="form-control col-xs-5" Enabled="false" />
</div>
</div>
<div class="form-inline form-group">
<asp:Label ID="Label4" CssClass="control-label col-xs-3" runat="server" Text="Quantity:"></asp:Label>
<div class="col-xs-offset-3">
<asp:TextBox ID="txtQty" runat="server" CssClass="form-control col-xs-3" type="number" min="1" onkeypress="return isNumberKey(event)" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button runat="server" ID="btnADD" CssClass="btn btn-sm" OnClick="btnADD_Click" Text="Add" />
</div>
</div>
</div>
then this is the code behind:
public void drpCategory_TextChanged(object sender, EventArgs e)
{
if (drpCategory.Text == "Others")
{
drpItem.Visible = false;
txtitem.Visible = true;
}
else
{
byCateg();
DataBind();
drpItem.Visible = true;
txtitem.Visible = false;
}
}
Is there a problem in my code?