Adding html to div inside update panel in asp.net website? - asp.net

I am trying to add few HTML lines to div that is inside the update panel using the following lines.
protected void ListView2_ItemCommand(object sender, ListViewCommandEventArgs e)
{
string[] arg = new string[2];
arg = e.CommandArgument.ToString().Split(';');
listofdisplayblogs.Count();
DisplayBlog db = listofdisplayblogs.ElementAt(0);
Blog b = db.DisplayBlogsByYear.ElementAt(Convert.ToInt32(arg[1]) - 1);
div1.InnerHtml = b.BlogContent;
}
In design page I have this code inside update panel.
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ListView1" EventName="ItemCommand" />
</Triggers>
<ContentTemplate>
<div style="width: 70%; height: 500px; overflow: scroll; scrollbar-3dlight-color: cadetblue; float: right; border: 1px solid black">
<div id="div1" runat="server"></div>
</ContentTemplate>
</asp:UpdatePanel>
I have a list view above it and updating on Itemcommand.
But i browser I see this error.
Cannot read property 'PRM_ParserErrorDetails' of undefined

Have you tried using a placeholder?
<ContentTemplate>
<div style="width: 70%; height: 500px; overflow: scroll; scrollbar-3dlight-color: cadetblue; float: right; border: 1px solid black">
<div id="div1" runat="server">
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</div>
</ContentTemplate>
And then in you backend code do
PlaceHolder1.Controls.Add(b);

Related

ASP UpdateProgress not working with iframe

I am using the updateProgress control to display loader.gif while the iframe in my page loads.
The iframe takes much time to load but the loader.gif does not appear
This is my aspx page
<!DOCTYPE html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial;
}
.MyModal {
position: fixed;
z-index: 999;
height: 100%;
width: 100%;
top: 0;
filter: alpha(opacity=60);
opacity: 0.6;
-moz-opacity: 0.8;
}
.center {
z-index: 1000;
margin: 300px 400px 300px 400px;
padding: 10px;
width: 130px;
background-color: White;
border-radius: 10px;
filter: alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
}
.center img {
height: 128px;
width: 128px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<h1>My Payment Page</h1>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="MyModal">
<div class="center">
<img alt="" src="images/my-loader.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<iframe id="frame1" runat="server" width="100%" height="600" scrolling="no" frameborder="0"></iframe>
</ContentTemplate>
</asp:UpdatePanel>
</form> </body> </html>
and in my code behind file i set the source for the iframe programmatically
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
frame1.Src = "http://example.com";
}
}
I don't know what i am missing.
UpdateProgress controls are for partial-page updates (AJAX requests); they do not respond to normal postbacks.
To see it work, put a button control inside the UpdatePanel (content template). Because it's inside the update panel it makes an AJAX request (basically) so the UpdateProgress control should work automatically.
If the response is really fast, you might not see the UpdateProgress control's image. For testing, add some time to the response so you can see the image.
protected void btn_Click(object sender, EventArgs e)
{
// add a fake delay for testing.
System.Threading.Thread.Sleep(3000);
}

Set a gray transparent background

Hello friends I have a code that show a processing image, but I don't get that the background change its color, I need to change it to gray color.
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
// Get the instance of PageRequestManager.
var prm = Sys.WebForms.PageRequestManager.getInstance();
// Add initializeRequest and endRequest
prm.add_initializeRequest(prm_InitializeRequest);
prm.add_endRequest(prm_EndRequest);
// Called when async postback begins
function prm_InitializeRequest(sender, args) {
// get the divImage and set it to visible
var panelProg = $get('divImage');
panelProg.style.display = '';
// reset label text
var lbl = $get('<%= this.lblText.ClientID %>');
lbl.innerHTML = '';
// Disable button that caused a postback
$get(args._postBackElement.id).disabled = true;
}
// Called when async postback ends
function prm_EndRequest(sender, args) {
// get the divImage and hide it again
var panelProg = $get('divImage');
panelProg.style.display = 'none';
// Enable button that caused a postback
$get(sender._postBackSettings.sourceElement.id).disabled = false;
}
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lblText" runat="server" Text=""></asp:Label>
<div id="divImage" style="display:none" class="divCentro">
<div class="FondoGris">
<asp:Image ID="img1" runat="server" ImageUrl="~/Procesando2.gif"/>
</div>
<br />
<p class="divCentro"><br /><br /><br />Processing...</p>
</div>
<br />
<asp:Button ID="btnInvoke" runat="server" Text="Click"
onclick="btnInvoke_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
And here is the css code:
<style type="text/css">
.divCentro {
text-align:center;
width: 327px; height: 60px; margin-top: -23px; margin-left: -158px; left: 50%; top: 40%; position: absolute;
}
</style>
I've tried writing background-color: gray transparent but this only change the color in the div image.
If anyone has any suggestion please help me.
Thanks in advance!
try this one..
<div class="divOuterCentro">
<p class="divCentro"><br /><br /><br />Processing...</p>
</div>
CSS:
.divOuterCentro{
height:100%;
width:100%;
background-color:rgba(0,0,0,0.4);
position:absolute;
}
.divCentro {
text-align:center;
width: 327px;
height: 60px;
margin-top: -23px;
margin-left: -158px;
left: 50%;
top: 40%;
position: absolute;
}
working fiddle.. link here
To create a semi-transparent background use rgba() or hsla() functions:
.divCentro {
background-color: rgba(60, 60, 60, 0.5);
}

How can i place Gridview center of div or panel.?

Hello!
Can anyone tell me how can I place any Gridview in center in Div or panel? I have applied following CSS but its does not working:
<asp:Panel ID="pnlGrid" CssClass="panel" runat="server">
<div style="text-align:center">
<asp:GridView ID="grdReqApproval" runat="server" AutoGenerateColumns="false" CssClass="SimpleGrid">
<Columns>
<asp:BoundField DataField="Approved By" HeaderText="Approved By" />
<asp:BoundField DataField="User Name" HeaderText="User Name" />
<asp:BoundField DataField="Approval Time" HeaderText="Approvel Time" />
</Columns>
</asp:GridView>
</div>
</asp:Panel>
.panel
{
width: 330px;
padding: 10px;
min-height: 20px;
border: 1px solid #dcdcdc;
margin-left:auto;
margin-right:auto;
}
HorizontalAlign property of Gridview can solve your problem
<asp:Panel ID="pID" runat="server">
<div>
<asp:GridView ID="gvID" runat="server" AutoGenerateColumns="false"
HorizontalAlign="Center">
<Columns>
...
...
</Columns>
</asp:GridView>
</div>
Check this is working for me , Ultimatly gridview get converted to table so the apply following stylesheet to your gridview which i applied to table
CSS
.centered-table {
margin-left: auto;
margin-right: auto;
}
HTML
<div>
<table class="centered-table" border="1">
<tr><td>Pekin</td> <td>Illinois</td></tr>
<tr><td>San Jose</td><td>California</td></tr>
</table>
</div>
JsFiddle Demo
Slight case of thread necromancy, but I was having the same problem and managed to fix it by aligning the code block rather than the gridview itself.
Basically I set the width of the element to 40%, and left to 30% (which means right is also 30%, because maths) and that positions the whole lot, text, grid and all into the middle of the page.
The css looks roughly like this
GridExample
{
position:absolute;
left:30%;
width:40%;
padding:0;
margin:0;
}
on your div text-align: center
as you see here, your class works. Just be sure its parent container is wider so it can center
http://jsfiddle.net/C7ybw/
#container{
width:800px;
border:1px solid #000;
}
.div_text_center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
<div class="div_text_center">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:GridView ID="GridView1" runat="server" HorizontalAlign="Center">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>

ModalPopup div not displaying

I have a ModalPopup window in my asp.net application, that I want to display when a Listview control item is clicked.
<div id="ModalPopup" style="visibility:hidden" runat="server">
<div style="position: absolute; width: 100%; height: 100%; z-index: 10002; background-color: Gray; filter: alpha(opacity=70); opacity: 0.7;">
</div>
<table style="position: absolute; width: 100%; height: 100%; z-index: 10003;">
<tr>
<td align="center" valign="middle">
<div style="color: Black; font-weight: bolder; background-color: White; padding: 15px; width: 200px;">
<asp:Image ID="Image4" runat="server" ImageUrl="~/Images/ajax-loader.gif" />...Processing....
</div>
</td>
</tr>
</table>
</div>
However, in my RadListView1_SelectedIndexChanged event, my code is: ModalPopup.Attributes.Add("style", "visibility:visible"); but the modal popup does not display.
How can I display it when a ListView item is selected?
Since you've already defined your ModalPopup div as a server control (e.g. runat=server) and you're trying to decide if to show it or not in codebehind - just use the Visible property...
<div id="ModalPopup" Visible="false" runat="server">
....
</div>
And in your RadListView1_SelectedIndexChanged event in code behind just change Visible to true:
protected void RadListView1_SelectedIndexChanged()
{
ModalPopup.Visible = true;
}
and if you insist on changing the visibility attribute itself, you can use RegisterStartupScript like this:
protected void RadListView1_SelectedIndexChanged()
{
ClientScript.RegisterStartupScript(this.GetType(), "ShowPopup", "document.getElementById('" + ModalPopup.ClientID + "').style.visibility = 'visible';", true);
}

Updateprogress panel, CSS and removal of inline stlyes

This is driving me mental!!!
Ok, I have the following scenario - ModalPopupExtender used to display an UpdateProgress panel when AJAX is running. So I have the following:
<asp:Panel ID="panelUpdateProgress" runat="server" CssClass="updateProgress" >
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="2" runat="server" ClientIDMode="Static">
<ProgressTemplate>
<div style="position: relative; top: 40%; text-align: center;">
<asp:Image ID="Image1" runat="server" Style="border: 0px; vertical-align: middle;
padding-bottom: 4px;" ImageUrl="~/Images/Refresh.gif" />
<asp:Label ID="Label2" runat="server" Style="border: 0px; vertical-align: middle;
margin-left: 7px" Text="Refreshing data, please wait..."></asp:Label>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="panelUpdateProgress"
BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress">
</ajaxToolkit:ModalPopupExtender>
Javascript to fire the thing when AJAX kicks ins:
<script type="text/javascript" language="javascript">
var ModalProgress = '<%= ModalProgress.ClientID %>';
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);
function beginReq(sender, args) {
// shows the Popup
$find(ModalProgress).show();
}
function endReq(sender, args) {
// Hides the Popup
$find(ModalProgress).hide();
}
</script>
With the styling of :
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=50);
opacity: 0.50;
}
.updateProgress
{
float: right;
border-width: 1px;
border-style: solid;
background-color: #FAFAD2;
width: 250px;
height: 100px;
}
</style>
However, I cannot for the life of me get the updateProgress to float right or adjust position (just as an example).
Using the developer tools, I can see that some sort of inline style overides the CSS style.
How on earth can I get, for example, my updateprogress to float right?
If you're fighting against inline styles that you have no control over, this is one of those rare cases where the use of !important is actually justified:
Give this a try:
.updateProgress
{
float: right !important;
/* etc. */
}
If this doesn't work, try adding a clear:right, or using a more specific selector like:
#someElement .updateProgress {}
EDIT: Specificity in CSS selectors won't help against inline styles, so ignore that as a possible solution.
well I've ditch the style sheet and run with this:
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="2" runat="server" ClientIDMode="Static">
<ProgressTemplate>
<div style="float: right; border-width: 1px; border-style: solid; background-color: #FAFAD2;
width: 250px; height: 100px;">
<div style="position: relative; top: 40%; text-align: center;">
<asp:Image ID="Image1" runat="server" Style="border: 0px; vertical-align: middle;
padding-bottom: 4px;" ImageUrl="~/Images/Refresh.gif" />
<asp:Label ID="Label2" runat="server" Style="border: 0px; vertical-align: middle;
margin-left: 7px" Text="Refreshing data, please wait..."></asp:Label>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
It does the business so I'm happy for now :D

Resources