Develop Reference

How can I select the record in the grid view and delete or edit this record? In Asp.Net Web Form

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.)

How can I use my currentDate variable to set the arrival date in the asp.net textbox control?

<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Request.aspx.cs" Inherits="XEx06Reservation.Request" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Chapter 6: Reservations</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/site.css" rel="stylesheet" />
<style type="text/css">
.auto-style1 {
display: block;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.auto-style2 {
left: 0px;
top: 0px;
width: 1112px;
height: 64px;
}
</style>
</head>
<body>
<div class="container">
<header class="jumbotron">
<img src="Images/logo.png" alt="Royal Inns and Suites" />
</header>
<main>
<form id="form1" runat="server" class="form-horizontal">
<h1>Reservation Request</h1>
<h3>Request data</h3>
<div class="form-group">
<label class="col-sm-3 control-label">Arrival Date</label>
<div class="col-sm-4">
<asp:TextBox ID="txtArrivalDate" runat="server" CssClass="form-control" TextMode="Date"
Height="39px" Width="186px"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Departure Date</label>
<div class="col-sm-4">
<!-- text box -->
<asp:TextBox ID="TextBox1" runat="server" CssClass="form-control" TextMode="Date" Height="39px" Width="186px"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Number of people</label>
<div class="col-sm-4">
<!-- drop-down -->
<asp:DropDownList ID="DropDownList3" runat="server" Height="39px" Width="186px">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Bed type</label>
<div class="auto-style2">
<!-- radio buttons -->
<asp:RadioButton ID="RadioButton1" runat="server" Text="King" Selected="True" />
<asp:RadioButton ID="RadioButton2" runat="server" Text="Two Queens"/>
<asp:RadioButton ID="RadioButton3" runat="server" Text="One Queen"/>
</div>
</div>
<h3>Special requests</h3>
<div class="form-group">
<div class="col-sm-7">
<!-- multiline text box -->
<asp:TextBox ID="TextBox2" runat="server" CssClass="form-control" TextMode="MultiLine" Rows="4" Width="334px" ></asp:TextBox>
</div>
</div>
<h3>Contact information</h3>
<div class="form-group">
<label class="col-sm-3 control-label">First Name</label>
<div class="col-sm-4">
<asp:TextBox ID="txtFirstName" runat="server" CssClass="auto-style1" Width="153px" Height="36px"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-4">
<!-- text box -->
<asp:TextBox ID="TextBox3" runat="server" CssClass="form-control" Width="158px"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Email address</label>
<div class="col-sm-4">
<!-- text box -->
<asp:TextBox ID="TextBox4" runat="server" CssClass="form-control" Width="159px" TextMode="Email"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Telephone number</label>
<div class="col-sm-4">
<!-- text box -->
<asp:TextBox ID="TextBox5" runat="server" CssClass="form-control" Width="155px" TextMode="Phone"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Preferred method</label>
<div class="col-sm-4">
<!-- drop down -->
<asp:DropDownList ID="DropDownList2" runat="server" CssClass="auto-style1" Width="155px">
<asp:ListItem>Email</asp:ListItem>
<asp:ListItem>Telephone</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<%-- Submit and Clear buttons --%>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<asp:Button ID="btnSubmit" runat="server" Text="Submit"
CssClass="btn btn-primary" />
<asp:Button ID="btnClear" runat="server" Text="Clear"
CssClass="btn btn-primary" />
</div>
</div>
<%-- message label --%>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-11">
<asp:Label ID="lblMessage" runat="server" CssClass="text-info"></asp:Label>
</div>
</div>
</form>
</main>
<footer>
<p>© <asp:Label ID="lblYear" runat="server"></asp:Label>
Royal Inns and Suites</p>
</footer>
</div>
</body>
</html>
I am trying to figure out how can I use the currentDate variable to set an arrival date (like October 10, 2017 - 10/10/2017) in that control's box everytime the page loads. Here is my code that I have tried on my own, but everytime I test the page, nothing is automatically put into that control's textbox. Can someone help me? Any others sources other then this (https://www.quora.com/How-do-I-populate-date-automatically-in-a-text-box-in-asp-net)?
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace XEx06Reservation
{
public partial class Request : System.Web.UI.Page
{
private string currentDate = DateTime.Today.ToString("d");
private string currentYear = DateTime.Today.Year.ToString();
protected void Page_Load(object sender, EventArgs e)
{
txtArrivalDate.Text = currentDate;
}
}
}

I think this is what you are looking for:-
In Your .aspx page:-
<asp:Label ID="lblYear" runat="server"></asp:Label>
<asp:TextBox ID="txtArrivalDate" runat="server"></asp:TextBox>
In your .aspx.cs page:-
public partial class WebForm1 : System.Web.UI.Page
{
private static readonly DateTime currentDate = new DateTime(2017, 10, 10);
private string currentYear = DateTime.Today.Year.ToString();
protected void Page_Load(object sender, EventArgs e)
{
txtArrivalDate.Text = currentDate.ToString();
lblYear.Text = currentYear;
}
}

UpdateProgress not working on secound click

UpdateProgress works good on first button click . But when i click second time the UpdateProgress didn't appeared.Instead of UpdateProgress all things works good on second click. Please help me..
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubmit" />
</Triggers>
<ContentTemplate>
<div class="form-group row">
<div class="col-sm-6">
<p style="margin: 0 0 5px 0;"><b>Class</b></p>
<asp:DropDownList ID="drpClass" CssClass="form-control" OnSelectedIndexChanged="drpClass_SelectedIndexChanged" AutoPostBack="true" runat="server"></asp:DropDownList>
</div>
<div class="col-sm-6">
<p style="margin: 0 0 5px 0;"><b>Division</b></p>
<asp:DropDownList ID="drpDiv" CssClass="form-control"
runat="server">
</asp:DropDownList>
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<p style="margin: 0 0 5px 0;"><b>Date</b></p>
<asp:TextBox runat="server" ID="txtDateGiven" CssClass="form-control"
placeholder="Select a Date"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender2" runat="server" Format="dd/MMM/yyyy" PopupButtonID="txtDateGiven"
TargetControlID="txtDateGiven">
</asp:CalendarExtender>
</div>
<div class="col-sm-6">
<p style="margin: 0 0 5px 0;"><b>Date of Submission</b></p>
<asp:TextBox runat="server" ID="txtDateSubmit" CssClass="form-control"
placeholder="Select a Date"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" runat="server" Format="dd/MMM/yyyy" PopupButtonID="txtDateSubmit"
TargetControlID="txtDateSubmit">
</asp:CalendarExtender>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<p style="margin: 0 0 5px 0;"><b>Subject</b></p>
<asp:DropDownList ID="drpSubject" CssClass="form-control" runat="server"></asp:DropDownList>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<p style="margin: 0 0 5px 0;"><b>Type</b></p>
<asp:DropDownList ID="drpAssignmentType" CssClass="form-control" runat="server"></asp:DropDownList>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<p style="margin: 0 0 5px 0;"><b>Title</b></p>
<asp:TextBox ID="txtAssignmentTitle" CssClass="form-control" placeholder="Enter Title"
runat="server"></asp:TextBox>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<p style="margin: 0 0 5px 0;"><b>Description</b></p>
<asp:TextBox ID="txtAssignmentDes" CssClass="form-control" TextMode="MultiLine" Height="250"
placeholder="Enter Description"
runat="server"></asp:TextBox>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="updProgress"
AssociatedUpdatePanelID="UpdatePanel1"
runat="server">
<ProgressTemplate>
<div class="modal">
<div class="center">
<span style="padding-left: 10px"><b>Please Wait..</b></span>
<img alt="" src="../images/Preloader_3.gif" width="50" height="50" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<div class="form-group row">
<div class="col-sm-6">
<p style="margin: 0 0 5px 0;"><b>Upload File</b></p>
<asp:FileUpload ID="imgPhoto" runat="server" />
<br />
<asp:Button ID="btnUpload" Text="Upload" runat="server" OnClick="Upload" Style="display: none" />
<% if (ViewState["Image"] != null)
{%>
<a target="_blank" href="<%=ViewState["ImageName"]%>">View Attachment</a>
<%}
else
{ %>
<asp:Label ID="Label1" runat="server" ForeColor="Red" Text="No File Uploaded"></asp:Label>
<%} %>
</div>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="form-group row">
<div class="col-sm-6">
<div class="col-sm-6">
<asp:Button ID="btnSubmit" OnClick="btnSubmit_Click"
OnClientClick="javascript:return btnSubmit();" CssClass="btn btn-primary"
runat="server" Text="Submit" />
Cancel
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Code behind
updProgress.Visible = true;
SendEmail(Convert.ToInt32(drpDiv.Text));
updProgress.Visible = false;
txtAssignmentTitle.Text = "";
txtAssignmentDes.Text = "";
txtDateGiven.Text = "";
txtDateSubmit.Text = "";
ViewState["Image"] = null;
ViewState["ImageName"] = null;
drpAssignmentType.Items.Clear();
drpClass.Items.Clear();
drpDiv.Items.Clear();
drpSubject.Items.Clear();
drpSubject.Items.Insert(0, new ListItem("--Select--", "0"));
drpAssignmentType.Items.Insert(0, new ListItem("--Select--", "0"));
LoadClass();
LoadClassAndAssignmentType();
drpDiv.Items.Insert(0, new ListItem("--Select--", "0"));
i am using update panel to avoid page load .Also the UpdateProgress didn't appeared if i try to reload the page using response.redirect . Please help me ..

UpdateProgress not firing on every PostBack of controls inside UpdatePanel

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>

Page content disappear after timer ticks

I am using UpdatePanel control to update charts on my page after a certain time. I faced a problem that when the timer ticks, all charts disappear. I traced and found nothing error. Can anyone help me on this?
Here is a sample of the .aspx file
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
<asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Interval="120000">
</asp:Timer>
<div class="row">
<div class="col-lg-4 col-md-4">
<asp:DropDownList ID="ddlDuration" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlDuration_SelectedIndexChanged" CssClass="form-control" Style="margin-left: 5px;">
<asp:ListItem Value="1">Today</asp:ListItem>
<asp:ListItem Value="3">A week ago</asp:ListItem>
<asp:ListItem Value="2">A month ago</asp:ListItem>
<asp:ListItem Value="4">A year ago</asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-lg-8 col-md-8">
<div class="col-lg-1 col-md-1">
<label class="control-label">From Date:</label>
</div>
<div class="col-lg-3 col-md-3">
<asp:TextBox ID="txtDateFrom" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<div class="col-lg-1 col-md-1">
<label class="control-label">To Date:</label>
</div>
<div class="col-lg-3 col-md-3">
<asp:TextBox ID="txtDateTo" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<asp:Button ID="btnGetReport" runat="server" Text="Apply" CssClass="btn btn-success" Style="background-color: #8B0000; border: #8B0000;" OnClick="btGetReport_Click"></asp:Button>
<div class="row">
<asp:Label ID="dterror" runat="server" />
</div>
<hr />
<div id="chart">
<div class="row">
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-body">
<div id="ComplaintsByStatus">
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
and here is part of the code behind
protected void Timer1_Tick(object sender, EventArgs e)
{
UpdateChart();
}
here is a screen shot of what I get before timer ticks
and this is what I get after
Thanks in advance.