I am having some problem with AJAX Collapsible Panel Extender. Currently what I am trying to do is when certain panel is extended, then it will perform some sql statement. I have no idea on how to write the code other than just squeeze all of them in the Page Load method. Here is how I set up my collapsible panel extender:
<!-- FIRST COLLAPSIBLE PANEL EXTENDER -->
<asp:Panel ID="pHeader1" runat="server" CssClass="cpHeader">
<!-- First collapsible panel extender header -->
<div class="form-group" style="background-color:#ffb848; height: 30px; vertical-align: middle">
<div class="col-md-3">
<div style="float: left; color: White; padding: 5px 5px 0 0">
Collapsible Panel
</div>
</div>
<div class="col-md-9">
<div style="float: right; color: White; padding: 5px 5px 0 0">
<asp:Label ID="lblHeaderText1" runat="server" />
<asp:Image ID="imgArrows1" Text = "IMAGE" runat="server" />
</div>
</div>
<div style="clear: both"></div>
</div>
</asp:Panel>
<!-- First collapsible panel extender body -->
<asp:Panel ID="pBody1" runat="server" CssClass="cpBody">
<asp:Label ID="lblBodyText1" runat="server" />
Hey there
</asp:Panel>
<asp:CollapsiblePanelExtender ID="cpe1" runat="server" TargetControlID="pBody1" CollapseControlID="pHeader1"
ExpandControlID="pHeader1" Collapsed="true" ImageControlID="imgArrows1"
CollapsedImage="~/Images/downarrow.jpg"
ExpandedImage="~/Images/uparrow.jpg" TextLabelID="lblHeaderText1" CollapsedText="Show"
ExpandedText="Hide" CollapsedSize="0" ExpandedSize="200"
ScrollContents="true">
</asp:CollapsiblePanelExtender>
Any related research link would be appreciated. Thanks in advance.
This is possible.
In gist you are supposed to work with the ajax client-side page life-cycle. Like there is a page load in your server-side aspx page; there is a page load in the client (i.e. the web page rendered in the browser) which happens after all the asp.net client ajax js libraries are all loaded.
In that you are supposed to do something like:
//this would be <%=myExtender.ClientID%> when using a master page
var extender = $find('myExtender_ClientId');
extender.add_collapsed( function() { alert('collapsed'); });
extender.add_expanded( function() { alert('expanded'); });
More details here: http://forums.asp.net/p/1112899/1717195.aspx
You'd want to execute some server side logic to populate stuff in the container that becomes visible. For this you need some AJAJ. This is nothing but some aspx pages written in such a way to render JSON responses back to your browser. But they will be invoked via an XMLHttpRequest object.
Alternatively you can rely on asmx web services, or even page methods to do the work for you. They've to run as script services to do the work for you.
Have a look at this thread for that: http://forums.asp.net/t/1729092.aspx?loading+data+in+the+target+control+panel+of+collapsible+extender+when+Collapse+Expand+control+panel+is+clicked+
Related
I am using asp.net web form (without mvc) with c#. I am trying to show images through masonry layout and imagesLoaded and to start with I have written the following code:
<script src="../Plugins/masonry/masonry.pkgd.min.js"></script>
<script src="../Plugins/masonry/imagesloaded.pkgd.min.js"></script>
<style>
.grid-item { width: 200px; background-color: gray;
}
.grid-item--width2 { width: 400px; }
</style>
<script>
$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 200
});
</script>
<div class="grid">
<div class="grid-item"><img src="images/Chrysanthemum20180717094352440.jpg" /></div>
<div class="grid-item grid-item--width2"><img src="images/Chrysanthemum20180717094352440.jpg" /></div>
<div class="grid-item"><img src="images/Chrysanthemum20180717094352440.jpg" /></div>
</div>
When I run this I see three large images. I am not able to understand how all this works. I would be getting image src in my c# code so how do I bind it here and ensure that it renders as per masonry layout and show the images.
i would appreciate if someone could please suggest an example where either json is used or through code behind how can I create this image gallery.
I've been researching for hours a demo of the AJAX Modal Popup Extender markup in a child page.
I'm trying to implement an ASP.NET LinkButton on the parent page in a Gridview column to fire the modal (the child page) and keep the UI markup separate.
Can someone please provide a code demo of this?
Put iframe inside panel and set src to your file:
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="PanelX" TargetControlID="YourButtonID"
CancelControlID="btnClose" BackgroundCssClass="Background">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" style = "display:none">
<iframe style=" width: 410px; height: 190px;" src="YourChildPage.aspx" runat="server"></iframe>
<br/>
<asp:Button ID="btnClose" runat="server" ClientIDMode="Static" style="display:none"/>
</asp:Panel>
I need to validate two separate group one by click button1,and another one is click button2
Two buttons are in separate user controls implemented in same page ,the validation to the first user control also validates the second one,i give the validation group for both user controls separately it don't work.
please help me...
the below code contains two user controls,that having the one button is in < uc1:UCEditRegisterUser> and anothe one is in < uc1:UCEditDoctorProfile>
<div style="width: 950px; margin: 0px auto 0px auto;">
<div style="width: 425px; min-height: 800px; overflow: hidden; float: left; padding-left: 17px;
margin-top: 30px;">
<uc1:UCEditRegisterUser ID="UCEditRegisterUser1" runat="server" />
</div>
<div style="width: 485px; min-height: 800px; overflow: hidden; float: right; margin-top: 30px;
padding-right: 20px;">
<uc1:UCEditDoctorProfile ID="UCEditDoctorProfile1" runat="server" />
</div>
</div>
This seems obvious so apologies
Make sure that the validation group on the validators within both user groups is exactly the same
Make sure that the button (or whatever) the triggers the validation also has the same validation group
make sure that the triggering button doesn't have the CausesValidation attribute set to false
You could consider making the ValidationGroup a property that is set externally on both controls. Might make things clear to you all all who inherit your code
I got the solution,
it needs to call the validation from the page event Page_ClientValidate("pwd");
the pwd in bracket is the validation group.
<script type="text/javascript">
function ValidateUserContrlos()
{
var isValid=false;
isValid=Page_ClientValidate("pwd");
if(isValid)
{
return true;
}
else
return false;
}
</script>
call the function from the button click like this
<asp:Button ID="btnSave" runat="server" Text="Save" onClick="btnSave_Click"
OnClientClick="return ValidateUserContrlos()"/>.
it solved thank u all for the support..
I am developing an application that manages a photo contest. In that application, I use an AsyncFileUpload control for the user selected photo. The server-side UploadedComplete does basic validation, and scales/clip the image as necessary.
The problem is, when i click on the submit button on the page, the content of the AsyncFileUpload gets sent with the other user-submitted data, so the user gets to wait twice as long to get a response from the server (I'm expecting photos that are between 3 and 7 Mb big, which takes a minute or two to upload).
My form looks like that:
<%-- ... snip - all other fields ... -->
<div style="margin-top: 20px; margin-bottom: 5px;">
<span class="texteB"><b>Upload a photo</b></span><br />
Browse your computer to find a photo.</div>
<div>
<asp:AsyncFileUpload onclientuploaderror="UploadError" persistfile="true" onuploadedcomplete="fuPhoto_UploadedComplete"
completebackcolor="#52ad0b" onclientuploadstarted="UploadStarted" id="fuPhoto"
throbberid="throbber" runat="server" />
</div>
<div runat="server" id="throbber" style="display: none; margin: 8px 0 15px 0">
<div style="float: left; width: 48px;">
<img src="images/throbber.gif" /></div>
<span class="texteV_14pt"><b>Please wait while
<br />
your photo is uploaded...</b></span>
</div>
<div style="margin-top: 20px; margin-bottom: 20px;">
Please double-check your informations and press Send when ready.</div>
<div>
<asp:ImageButton onclick="btnSubmit_Click" ImageUrl="images/bt_envoyer_demande.gif"
runat="server" id="btnSubmit" />
</div>
Is there something I missed out in the documentation? I've been working on this all day without much success.
Thanks in advance!
The AsyncFileUpload doesn't really work like this. It only really works when you use the filedata in the OnUploadedComplete event.
I'd just bite the bullet and use something like SWFUpload or just use a native FileUpload control.
private bool _justDeleted = false;
void AsyncFileUpload1_UploadedComplete(object sender, AsyncFileUploadEventArgs e)
{
if (_justDeleted) return;
protected void btnDeleteLogo_Click(object sender, EventArgs e)
{
_justDeleted = true;
How can i use progress bar in web application c#, without ajax tools... When i click from one page to next page..the page load should be shown as in progress bar.. Can anyone help out, without ajax tools..
Thank you in advance
I think you still need javascript but dont need to use the AJAX update panel.
on your page add a div with an
progress animated image
set the div to hidden using CSS
on your linkbutton/button or
whatever, link up your onClick event
as normal
on the same linkbutton/button add an
onClientClick attribute and call a
javascript function to set the div
style to visible
this will in effect display the progress meter until the page has actually posted back.
Wired up Button
<asp:Button ID="btnProgress" runat="server" Text="show progress" OnClientClick="javascript:DisplayProgress()" OnClick="btnProgress_Click"
CausesValidation="false" />
Progress Meter Div
<div ID="pnlProgress" Class="modalBackground" style="visibility: hidden;">
<div id="content" class="modalDialogClear" style="text-align: center; " >
<br />
<br />
looking up address, please wait...<br />
<img src="/images/progress_bar.gif" />
</div>
Javascript
function DisplayProgress()
{
document.getElementById('pnlProgress').style.visibility = 'visible';
window.setTimeout(HideProgressPanel, 20000); //handles hiding the progress panel should the operation time out
}
function HideProgressPanel()
{
document.getElementById('pnlProgress').style.visibility = "hidden", 20000
}
I did in this way, when page load, before loading complete I am show progress bar...
<body onload="javascript:HidePreloader();">
<div id="preloader" style="width: 100%; text-align: center;">
<img src="../Images/loading.gif" alt="" style="display: block;" />
</div>
<script language="javascript" type="text/javascript">
function HidePreloader() {
if (document.getElementById('preloader') != null) {
document.getElementById('preloader').style.visibility = 'hidden';
}
}
</script>