I have kept Iframe inside updtae panel but then also it flickers every time it reload. I think I can use javascript to load my content of Iframe in order to make it flicker free.Is this way correct? If yes, then How can I do it? And if not, then What should I do?
This is the code
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<div style="width:100%; height: 195px; margin-left: -7px;">
<asp:PlaceHolder ID="ContentPlaceHolderChatRequest" runat="server">
<iframe id="iframe1" frameborder="0" style=" width: 379px;
height:110%;" src="frmChatRequest.aspx"
scrolling="no" runat="server">
</iframe>
</asp:PlaceHolder>
<div></div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Related
I am a new one to ASP.NET and currently learning from the book "Beginning ASP.NET with Visual Studio 2015" by William Penberthy. In the chapter 7 about layout with master pages I created a custom master page WebForms with stylesheet RentMyWrox and moved the inline style for various controls of the page ManagedItems.aspx to RentMyWrox.css. This cause the layout to mess up.
When I switched back to default master page and added the inline style to default Site.css stylesheet the layout was displayed correctly. I downloaded the source code for the book and it has the same issue. Could anyone explain, what is the problem?
My custom master page WebForms.Master
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="WebForms.master.cs"
Inherits="RentMyWrox.WebForms" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="Content/RentMyWrox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="header">
</div>
<div id="nav">
Navigation content here
</div>
<div id="section">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer">
Footer content here
</div>
</form>
</body>
</html>
Stylesheet for custom master page RentMyWrox.css
body {
font-family: verdana;
}
#header {
background-color:#C40D42;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:750px;
float:left;
padding:10px;
}
#footer {
background-color:#C40D42;
color:white;
clear:both;
text-align:center;
padding:5px;
}
.dataentry input{
width: 250px;
margin-left: 20px;
margin-top: 15px;
}
.dataentry textarea{
width: 250px;
margin-left: 20px;
margin-top: 15px;
}
.dataentry label{
width: 75px;
margin-left: 20px;
margin-top: 15px;
}
#fuPicture {
margin-top: -20px;
margin-left: 120px;
}
Page ManagedItems.aspx
<%# Page Title="" Language="C#" MasterPageFile="~/WebForms.Master" AutoEventWireup="true" CodeBehind="ManageItem.aspx.cs" Inherits="RentMyWrox.Admin.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
<div class="dataentry">
<asp:Label ID="Label1" runat="server" Text="Name"
AssociatedControlID="tbName"></asp:Label>
<asp:TextBox ID="tbName" runat="server"></asp:TextBox>
</div>
<div class="dataentry">
<asp:Label ID="Label2" runat="server" Text="Description"
AssociatedControlID="tbDescription"></asp:Label>
<asp:TextBox ID="tbDescription" runat="server"
TextMode="MultiLine" Rows="5"></asp:TextBox>
</div>
<div class="dataentry">
<asp:Label ID="Label3" runat="server" Text="Cost"
AssociatedControlID="tbCost"></asp:Label>
<asp:TextBox ID="tbCost" runat="server"></asp:TextBox>
</div>
<div class="dataentry">
<asp:Label runat="server" Text="Item Number" AssociatedControlID="tbItemNumber"/>
<asp:TextBox runat="server" ID="tbItemNumber" /> </div> <div class="dataentry">
<asp:Label runat="server" Text="Picture" AssociatedControlID="fuPicture" />
<asp:FileUpload ID="fuPicture" ClientIDMode="Static" runat="server" />
</div>
<div class="dataentry">
<asp:Label runat="server" Text="Acquired Date" AssociatedControlID="tbAcquiredDate"/>
<asp:TextBox runat="server" ID="tbAcquiredDate"/>
</div>
<asp:Button Text="Save Item" runat="server" OnClick="SaveItem_Click" />
</div>
</asp:Content>
This is how it should look according to the book
This is how it actually looks like
The source code can be downloaded at http://media.wiley.com/product_ancillary/27/11190774/DOWNLOAD/RentMyWrox_Chapter7_CSharp..zip
Is the code attached/linked the "before" or "after" modification code?
My recommendation is to use the tools of your browser to check if the CSS file was actually loaded. In Chrome, you can press F12 and then click on the "Sources" tab. This will show you what is loaded down the left, I'm guessing your CSS file is not there.
If that's the case, it might be your reference in your master file.
Currently you have it as:
But that link is not a valid link from your manageitem.aspx page which is inside the 'Admin' folder.
Instead, try "~/Content/RentMyWrox.css" - this should map the proper path from the root of your application, rather than relative to whichever child page is loading the master.
I have used AJAX Rating control for star rating. I am trying to achieve rating without page postback, therefore I placed inside update panel but still page is used to reload.
Below is aspx page code:
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<cc2:Rating ID="Rating1" AutoPostBack="true" OnChanged="OnRatingChanged" runat="server"
StarCssClass="Star" WaitingStarCssClass="WaitingStar" EmptyStarCssClass="Star" FilledStarCssClass="FilledStar">
</cc2:Rating>
<div style="text-align: left; padding-right: 2px;">
<asp:Label ID="lblRatingStatus" runat="server" Text=""></asp:Label>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Change update mode of updatepanel from conditional to always and set ChildrenAsTriggers="True". Should work in your case.
Let me know if it doesn't work.
I have kept Iframe inside update panel but then also it flickers every time it reload. I think I can use javascript to load my content of Iframe in order to make it flicker free.Is this way correct? If yes, then How can I do it? And if not, then What should I do?
This is the code
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<div style="width:100%; height: 195px; margin-left: -7px;">
<asp:PlaceHolder ID="ContentPlaceHolderChatRequest" runat="server">
<iframe id="iframe1" frameborder="0" style=" width: 379px;
height:110%;" src="frmChatRequest.aspx"
scrolling="no" runat="server">
</iframe>
</asp:PlaceHolder>
<div></div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Can you try this, use setInterval() with load()
$(function(){
setInterval(function(){
$( "#result" ).load( "frmChatRequest.aspx", function() {
alert( "Load was performed." );
});
}, 10000);
});
HTML: Remove iframe and add below div there
<div id="result" ></div>
I am working on asp.net and ajax using c#. I am trying to create a new user registration where i am poping a updatepanel with loading image when an user clicks on submit button. and also i need to insert the data into database at the same time. I use the following code,
<asp:UpdatePanel ID="updatepanel1" runat="server">
<ContentTemplate>
<asp:TextBox runat="server" ID="txtMI" Width="80px" Height="20px" CssClass="s1"> </asp:TextBox>
<asp:TextBox runat="server" ID="txtMI" Width="80px" Height="20px" CssClass="s1"></asp:TextBox>
<asp:TextBox runat="server" ID="txtMI" Width="80px" Height="20px" CssClass="s1"></asp:TextBox>
<asp:Dropdownlist ID="drpCountries" runat="server" Font-Bold="True" ForeColor="#FF3300"></asp:Dropdownlist>
<br />
<asp:Button ID="btnLoad" runat="server" onclick="btnLoad_Click" Text="submit" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress id="updateProgress" runat="server">
<ProgressTemplate>
<div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
<asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/avatarloading.gif" AlternateText="Loading ..." ToolTip="Loading ..." style="padding: 10px;position:fixed;top:25%;left:35%;" /><center><span style="color:White;font-weight:bolder;font-size:x-large;"><b>Loading...</b></span></center>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
and in my code behind file like,
protected void btnLoad_Click(object sender,EventArgs e)
{
//INsert the records into database
}
At first when user clicks on submit i am able to pop loading panel with loading gif image. after successful insertion i need to show some message like registration success in place of image on loading panel. please guide me.
You can bind endRequest event of asp.net ajax to get control after ajax request completed.
<script language="javascript" type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(endRequest);
function endRequest(sender, args) {
alert("After ajax request");
}
</script>
I'd create a panel which looks identical to the UpdateProgress markup (css classes) with a label in it. And on a successful operation you set the label text and switch the panels Visible property to true.
I'm working on employee web application project, in my application i used the 2 update panels,hidden fields and buttons. actually what I'm doing is while clicking button i need to get next employee info and save it this info. and here whenever I'll click on button which in update panel2, get employee info and I'll keep this employee id into hidden field which in update panel1 and while debugging hidden field value shows correct employee id but saving time its having old value. for this I'm facing lot problem please help me.
Thank you
Here is my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td style="border-left: 1px solid #CDCDCD; border-right: 1px solid #CDCDCD; background-color: #E9E9E9">
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true"
AsyncPostBackTimeout="36000" />
<div>
<asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Interval="60000">
</asp:Timer>
</div>
<div align="left" style="width: 715px; background: #E9E9E9;">
<div style="margin: 0px 30px 0px 45px; line-height: 140%; border-bottom: 1px solid #E0E2E0;
padding: 10px 0px 15px 0px">
<asp:UpdatePanel ID="upNextChapter" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table width="100%">
<tr>
<td align="right">
<asp:HiddenField ID="hfEmpId" runat="server" Value="0" />
** Employee Info **
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="imgbtnNext" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
<div align="right" style="padding-right: 30px;">
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ImageButton ID="imgbtnNext" runat="server" OnClick="imgbtnNext_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
<div align="center">
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Code behind:
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void imgbtnNext_Click(object sender, EventArgs e)
{
//Get Employee Info & store it in Hidden field value=Employee Id
//** Saving Employee Info using Hidden filed value **
}
}
I did a similar test on my machine, I really can't see why HiddenField is not updated. Its most likely your "Get Employee Info" is the root cause.
Also I want to correct your code a bit.
Your first UpdatePanel is doing unnecessary task, the tag UpdateMode="Conditional" is no need.
Also
<Triggers>
<asp:AsyncPostBackTrigger ControlID="imgbtnNext" EventName="Click" />
</Triggers>
this tag has no effect to anything because the button is not in the current UpdatePanel. By default everything in UpdatePanel is AsyncPostBackTrigger anyway, unless you have something to post back you can add asp:PostBackTrigger.