Dropzone and asp elements - asp.net

i'm quite new developing for asp.net and found a problem i can't figure it out.
My .aspx look like the follow:
<form action="#" class="" runat="server" >
<asp:DropDownList ID="ddlCombo" runat="server">
</asp:DropDownList>
</form>
<div class="clsbox-1" runat="server">
<div class="dropzone clsbox" id="mydropzone">
</div>
</div>
As you can see i have a dropdownlist that i will populate on page_load and a dropzone inside a div (i need to be this way).
<script>
Dropzone.autoDiscover = false;
$("#mydropzone").dropzone({
url: "WebForm1.aspx?param=1",
addRemoveLinks: true,
maxFilesize: 0.5,
dictDefaultMessage: 'drag and drop',
dictResponseError: 'Error uploading file!'
});
<script>
this is the script that make div like a dropzone, i'm not sure if the url is right though.
The problems comes when in the page_load part, since i need to populate the dropdownlist on page load,
when i try to upload a file via dropzone it will be sent as postback and enter in the 'if' and populate again the combobox, reseting the value that was selected.
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack) {
loadCombo(); //populate ddlCombo
}
string aux = ddlCombo.SelectedValue.ToString();//this will have the first item
//processing file...
}
Please let me know if there is any fancy way to do this because i can't figure it out!
EDIT:
I don't understand why if i send within a form it work as intended:
<form action="#" class="dropzone" runat="server" >
<asp:DropDownList ID="ddlCombo" runat="server">
</asp:DropDownList>
<div class="clsbox-1 " id="mydropzone" runat="server">
<div class="clsbox" >
</div>
</div>
</form>
When i upload a file here it doesn't send as post back.
Thx you!

Your dropzone url parameter should be to a different page/httphandler/controller you have created to accept the upload and save it to a file (or whatever you want to do with it). You could technically use the page you're currently on, but it'd be a little trickier in your situation as you'd need to detect what caused the postback and handle appropriately (ie don't reset the dropdown).
I would recommend using an HttpHandler instead of a normal page for receiving the files. Here's an example of one.

Related

Set the style of a parent DIV to a usercontrol

I have a dynamically named DIV in a GridView which contains a user control with a dynamically assigned Parent_ID. The javascript is used to show or hide the DIV. I'll show you two examples of different rows without the ASP code.
Row 1 showing for Order # 123456:
<a href="<%#"javascript:collapseExpand('Order_Notes_Panel123456');" %>" >+</a>
<div id='Order_Notes_Panel123456' style="display:none;">
<uc:Comments_Control id="Comments_Control_ID" runat="server" Parent_ID='123456'/>
</div>
Row 2 showing for Order # 678901:
<a href="<%#"javascript:collapseExpand('Order_Notes_Panel678901');" %>" >+</a>
<div id='Order_Notes_Panel678901' style="display:none;">
<uc:Comments_Control id="Comments_Control_ID" runat="server" Parent_ID='678901'/>
</div>
The good news is that the user control binds and works perfectly. The javascript shows (sets the style to "display:block;") and hides (style set to "display:none;") the appropriate DIV each time the '+' is clicked.
Here is my problem: there is a 'Reply' link in the user control that, when clicked, does a post-back and puts the control into Edit mode. When I employ this user control on another page without a containing DIV, you won't notice a thing. However, when the 'Reply' does its post-back, the containing DIV reverts back to style="display:none;".
Can you provide a recommendation how to set the parent DIV's style to "display:block;" while a user is obviously working with it? I would imagine the appropriate code would go in the code behind of the user control when it goes into Edit mode.
Thanks,
Rob
Update: I recognize that there is no runat=server in my DIV. Since I'm trying to establish a dynamic ID for each, I get an error if I try to use the runat. That is probably the reason why I can't reach it from code behind...
I am very happy of myself... (see the YouTube video for this phrase, you'll be glad you did.)
In summary, this is what I added:
1. New Javascript function to add the name of the target DIV to a hidden field (The "collapseExpand" function is in the Site.Master. I couldn't put "load_div_to_hidden" in the Site.Master since "myhiddenField" isn't set up on every page
2. New hidden field to capture the name of the target DIV
3. New Javascript function to run on window.onload, check if we've got a post-back, and then display the value from the hidden field
4. Adding second Javascript call from the href in the link
Below are the new snippets of code:
<script type="text/javascript">
function load_div_to_hidden(obj) {
var hidden = document.getElementById('<%= myhiddenField.ClientID %>');
hidden.value = obj;
}
function windowOnLoad() {
var isPostBack = (('<%= IsPostBack %>').toLowerCase() == 'true') ? true : false;
if (isPostBack == true) {
var hid_field_value = document.getElementById('<%= myhiddenField.ClientID %>').value;
var right_div = document.getElementById(hid_field_value);
right_div.style.display = "block";
}
}
window.onload = windowOnLoad;
</script>
<input type="hidden" id="myhiddenField" runat="server" value="" />
<a href="<%#"javascript:collapseExpand('Order_Notes_Panel123456'); javascript:load_div_to_hidden('Order_Notes_Panel123456');" %>" >+</a>
<div id='Order_Notes_Panel123456' style="display:none;">
<uc:Comments_Control id="Comments_Control_ID" runat="server" Parent_ID='123456'/>
</div>
Works like a charm!

Executing Javascript code after submission of asp.net form

How do I execute Javascript after submission of an ASP.NET form?
For example, if I got a submit button click after submission of page then I want to display a DIV which I have hidden on page.
Since you are using a full postback, you can easily include the javascript from the code-behind.
Place your JavaScript Code inside a Placeholder
<asp:Placeholder ID="javascriptPlaceholder" runat="server" Visible="false">
<%-- Your Javascript here -->
</asp:Placeholder>
I assume in your OnClick handling method, you are getting the value of the form and do something else with it. In this method you could set the Visibile property of the placeholder:
this.javascriptPlaceholder.Visible = true;
If you would only want to convert the hidden div to a visible one then that can be done on the server side. In the aspx, give the div an id and a runat="server". Then in the server side, set its display style attribute to 'block'. For example, say the div is defined as
<div id="divTest" runat="server" style="display:none;">
This is a div test
</div>
Then in the post event of the submit button you can set its style as given below:
divTest.Style["display"] = "block";
If you only want to emit scripts after the post then using the ScriptManager you could use:
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "ScriptRegisterTest", "alert('Testing');", true);
Maybe I'm not understanding your question, but if you're going back to the server and doing some processing, why do you need javascript? Just add a runat="server" to the div in question and make it visible after the processing.
<div id="YourDiv" runat="server" Visible="false" >
...Whatever is here
</div>
Code Behind:
protected void Button_Click(object sender, EventArgs e)
{
/*
Your Logic Here
*/
YourDiv.Visible = true;
}

loading image while loading a gridview on runtime

I'm looking for a solution to my problem for two days and I didn't find anything that can help. I have two page : page 1 and page 2
Page1 contains parameters that will be send to page2 and a button "Create"
Page2 contains the GridView and on page_load I have
GetParameters() ; // extract parameters
PrepareParameters(); // prepare local variable
DataTable dt = CreateDataTable(); // create the BoundField/Columns based on prepared local variables
myGridView.DataSource = dt;
myGridView.DataBind();
My problem is that the method PrepareParameters() takes time due to the huge amount of data even though it's optimized. When I click on "Create" button the browser doesn't move to page2 but instead it doesn't respond and stay in page1 and the user does not know what happens.
So I'm wondering how to redirect the browser to page2 and show to the user a loading animation on the grid place until the PrepareParameters() finish processing data and display the GridView once finished?
Thanks for your reply.
You can use Javascript to do that. Get any loader image you prefer, there are many available on net, google it
put this image top/bottom of grid, assign some id to it and set default property Visible = false.
Now on button click call javascript where you make this image visible.
Sample code
<html>
<head>
<script type="text/javascript" language="JavaScript">
function Loading() {
document.getelemanebyId('Img').visibility = visible;
}
</script>
</head>
<body>
<form action="" method="POST" id="myForm">
//Gridview control here
<img id="Img" src="give image file path" runat="server" visible="false"/>
<button name="Create" onClientClick="Loading();" runat="server" >
</form>
</body>
</html>

Displaying and hiding parts of the web form freely without limitations in order to avoid ViewState loading problems

The problem
I have a web form and I would like to hide and show some panels. When I say "Panel" I do not mean the Panel control but just a pane in the html (usually represented by a DIV).
Well I want to show and hide this panels as I wish... no limits means that not necessarly only one pane must by visible, also 2, 3 or 4 can be.
Usually I achieved this by:
<div id="mypane1" runat="server">
...
</div>
<div id="mypane2" runat="server">
...
</div>
<div id="mypane3" runat="server">
...
</div>
and this:
this.mypane1.Visible = true;
this.mypane2.Visible = false;
this.mypane3.Visible = true;
Unfortunately these panels contain controls and some of them are not shown from the beginning (first web form load, so when no PostBack happens). This leads to problems for ViewState loading.
Regarding ViewState loading
Of course many will obviously ask about these ViewState problems of mine. Well, briefly, the thing is this: a ViewState loading error is not easy to manage but in the end I could understand the following.
Let's say to have this:
<!-- In .aspx -->
<div id="mypane1" runat="server">
...
<asp:Literal ID="..." runat="server" ...></asp:Literal>
<asp:TextBox ID="..." runat="server" ...></asp:TextBox>
...
</div>
<div id="mypane2" runat="server">
...
<asp:LinkButton ID="lb1" OnClick="lb1_Click" runat="server" ...></asp:LinkButton>
<asp:LinkButton ID="lb2" OnClick="lb2_Click" runat="server" ...></asp:LinkButton>
<asp:LinkButton ID="lb3" OnClick="lb3_Click" runat="server" ...></asp:LinkButton>
...
</div>
<div id="mypane3" runat="server">
...
<asp:TextBox ID="..." runat="server" ...></asp:TextBox>
<asp:LinkButton ID="lb4" OnClick="lb4_Click" runat="server" ...></asp:LinkButton>
<asp:TextBox ID="..." runat="server" ...></asp:TextBox>
...
</div>
// In .aspx.cs
protected void Page_Load(...) {
if (!this.IsPostBack) {
this.mypane1.Visible = true;
this.mypane2.Visible = false;
this.mypane3.Visible = true;
}
}
/// ... In the page many happens and the panes are shown and hidden ... ///
// Event Handlers
protected void lb1_Click(object sender, EventArgs e) {
...
}
protected void lb2_Click(object sender, EventArgs e) {
...
}
protected void lb3_Click(object sender, EventArgs e) {
...
}
protected void lb4_Click(object sender, EventArgs e) {
...
}
Well the problem is the following.
At the beginning pane2 is not shown.
After some actions pane2 is shown and its controls are shown too.
User click lb1 --> ViewState error
Note that the same happens for every event associated to pane2's controls. Is lb4 is pressed, no problems.
The problem is that the beginning hierarchy is represented by controls in pane 1 and 3. When events are raised by controls not part if the beginning hierarchy, ViewState is found inconsistent (because I act on HtmlControls, usually ServerControls are more intelligent and can manage better ViewState when controls are added inside them).
Feasible solutoions
Note that I could simply do the following to hide and show panels:
this.mypane2.Attributes.Add("display", "none");
This is not something I would like to do for two reasons:
I want panes not to be rendered as Html.
I would like to use server controls.
Request
I need to use web controls to manage my panel management, I cannot use HtmlControls because Control Hierarchy is not correctly loaded.
I tried MultiView and View controls but they enable me to use only one active view. How can I do?
Note: Please do not focus too much on the ViewState problem, it is just a good desc to let you know what happens, my only interest is to find a way to hide and show panes freely using server controls.
Thankyou
I'm assuming that setting the visiblity to false for the panels causes the children not to be added to ViewState or interfers with it in some way. Is that correct?
Given that, if you want to have the controls there as far as the .Net rendering engine is concerned but hidden from the end user you could try to show and hide them using css i.e.
show
pnlDemo.Attributes.Add("style", "display:block");
hide
pnlDemo.Attributes.Add("style", "display:none");
I had a situation where I needed ASP.Net controls there for ViewState purpose but not shown. At the appropriate point I would show them using JQuery and this method work for that scenario so it may work for yours.
Have you tried using the ViewStateModeByIdAttribute?
The ViewStateModeByIdAttribute class is used to specify a control that requires view-state loading by ID. The default view-state loading behavior is for ASP.NET to load the view-state information for a control by its index in the control tree of the page. There is a performance cost for loading view-state information by ID because the page control tree must be searched for the control specifically before loading its view-state information.
Have you tried with page.RegisterStartupScript .
script will load at the end of page load so control will have their viewstate .
Write JavaScript code that get the id of panel to hide & change the CSS to visibility hidden not display none.
another asp button on which you want to display the panel.
you can write JavaScript code onClientClick event of button to change the CSS of panel to change its visibility.

How to bypass onSubmit Form validation in ASPX page

i have a form on a particular ASPX page that has custom js validation. Also on this form is a navigation menu in the header.
The navigation menu items are built programatically and are initiated by __doPostBack calls which obviously submits the form.
The problem i am having is that the form itself has code something like the following
onsubmit='return validateForm()'
and if the form has not been filled out then the form cant submit. This in itself is not a problem unless a user goes to the form but decides to navigate away.
When this happens the validateForm function fails.
Does anyone have a workaround for this issue?
NB: On my nav links i have already set CausesValidation="False"
This is the markup:
<div id="divNavigate" class="absolute_topleft">
<asp:LinkButton ID="linkGoHome" runat="server" OnClick="linkGoHome_Click" CausesValidation="false" CssClass="xxx">text.</asp:LinkButton>
</div>
This is the handler:
protected void linkGoHome_Click(object sender, EventArgs e)
{
Response.Redirect("xxxxx");
}
This is the validation function:
function validateTextField(field) {
var fieldElement = document.getElementById(field);
var validated = false;
if (fieldElement.value.length > 0) {
validated = true;
}
return validated;
}
And this is how its called:
<form id="formLogin" runat="server" onsubmit="return validateTextField(field1)">
Are your navigation links proper asp.net server controls? If they are setting CausesValidation="False" should prevent them from causing validation. Can you post the code where you are dynamically adding them to the page, the most liekly explanation is the the CausesValidation property is not being set corectly.

Resources