I'm trying to get the dropzonejs script to work in a asp.net site with master page and child webforms. I got a good idea how to from this question but that works on a simple webform..how do I get it to work on an aspx page that has a master page?
So my masterpage right now has this:
<body class="fixed-top">
<form id="form1" runat="server" autocomplete="off" class="dropzone">
<div id="container">
<div id="body">
<div class="container-fluid">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
</div>
</div>
</div>
</form>
</body>
and in my aspx page I have this:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<h3 class="page-title">Filemanager</h3>
<div class="box"> <!--INSIDE THIS IS WHERE I WOULD WANT DROPZONE TO LOAD-->
<div>
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</div>
</div>
</asp:Content>
the problem is that it loads but outside the containers..any ideas?
I was able to make it work in a Master/Child page scenario.
Since I am using a div element instead of the form element in the child page, I need to assign the url as an option. (see script block below)
Make sure give your form element the class="dropzone", it is missing in your code.
<script type="text/javascript">
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
url: "/user/tasks/photoupload.aspx?tid=<%=Request.QueryString["tid"]%>"
};
</script>
<div id="my-awesome-dropzone" class="dropzone">
<div class="fallback">
<input name="file" type="file" multiple="multiple" runat="server"/>
<input name="btnUpload" type="submit" /><br /><br />
<asp:Label id="lblFallbackMessage" runat="server" />
</div>
</div>
Good luck.
Related
Excuse me, my English is bad, I'm Brazilian!!!
I'm developing a application in Aspx and WebForms. I included Bootstrap in my application, but in Design failed the rendering.
See bellow the image:
enter image description here
<body>
<form id="form1" runat="server">
<div>
<header>
<label class="hamburger" for="nav-toggle"></label>
<input id="nav-toggle" type="checkbox" class="hidden" />
<nav>
<ul>
<li>Entidades</li>
<li>Usuários</li>
<li>Logoff</li>
</ul>
</nav>
</header>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
I have created a master page with a basic login page and applied css in it. But i get styles only for background and footer only, other divs does not get applied.
so i decided to create a web form and copied it without contentplaceholder it works
My css code:
http://pastebin.com/raw.php?i=0N6SzL5p
My css working Web form code:
http://pastebin.com/raw.php?i=QrvttGqN
Master page code:
http://pastebin.com/raw.php?i=C2LH0SrE
And its content login page:
http://pastebin.com/raw.php?i=GdQpWnVX
I'm a newbie in asp and i'm not trolling.
If it is a silly mistake please point it out and help me
Based on your stylesheet, the problem with the master page was that you should have a wrapper <div> that surrounds all of your nested elements.
A lot of your <div id="xx"> elements should be changed to <div class="xx"> as your stylesheet is CSS class definitions. e.g.
From:
<div id="top" runat="server">
and..
<div id="mainpage" runat="server">
and..
To:
<div class="top">
and..
<div class="mainpage">
and..
<div class="footer">
Complete Master Page Changes
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Demo.master.cs" Inherits="UI.Master.Demo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<link href="../CSS/Site.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<title>Demo</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="top">
<div class="topmiddle">
<div class="logreg" id="login_reg" runat="server">
Login
Register
</div>
<div class="userlog" id="user_logout" runat="server" visible="false">
Welcome<asp:Label ID="username" runat="server">!</asp:Label>
<a id="A3" href="Logout.aspx" class="atypesty" runat="server">LogOUT</a>
</div>
</div>
</div>
<div class="mainpage">
<table class="maintable">
<tr>
<td>
<img src="../Images/logo.jpg" class="logo" />
</td>
<td class="menucenter">
<ul id="Nav">
<li>
Home
</li>
<li id="Navprofile" runat="server">
<asp:LinkButton ID="lnbtn_Profile" runat="server"></asp:LinkButton>
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul>
</td>
</tr>
</table>
<asp:ContentPlaceHolder ID="demo" runat="server"></asp:ContentPlaceHolder>
</div>
<div class="footer">
<p>All words, images and code copyright ©2014 demo.com. All rights reserved.</p>
</div>
</div>
</form>
</body>
</html>
i have a website with master pages and content pages. the code for master page is:
<%# Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="ProjectX1.Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
</head>
<body style="height: 800px">
<form id="form1" runat="server">
<div id="TopNav">
<ul>
<li>Top Deals</li>
<li>All Deals</li>
<li>Account</li>
<li>
<asp:TextBox ID="SearchBox" runat="server"></asp:TextBox>
<asp:Button ID="Search" runat="server" Text="Search" />
</li>
</ul>
</div>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<!--Adding jQuery-->
<script src="scripts/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<!--JavaScript and jQuery functions-->
<script type="text/javascript">
$(document).ready(function () {
$("#TopNav").tabs();
});
</script>
</body>
</html>
And my content pages are like:
<%# Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="TopDeals.aspx.vb" Inherits="ProjectX1.TopDeals" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
Top deals page.
</asp:Content>
Now, the tabs renders perfectly but the text used inside tabs or section is displayed back again in each tab content.
Screenshot of how it is rendering:
And here is the rendered HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<link href="css/style.css" rel="stylesheet" type="text/css" /><link href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" /></head>
<body style="height: 800px">
<form method="post" action="TopDeals.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkc9+hm0xMYZPW5kzqPGh5scwv9zQtVHHjF3TK0OClx8M=" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLG75v1DwKuh5WeCAKF1vrqBsex0rMLZ1SKDXK1SSR/NgIGfr4ldbcVrFvXw7cqxVna" />
</div>
<div id="TopNav">
<ul>
<li>Top Deals</li>
<li>All Deals</li>
<li>Account</li>
<li>
<input name="ctl00$SearchBox" type="text" id="SearchBox" />
<input type="submit" name="ctl00$Search" value="Search" id="Search" />
</li>
</ul>
</div>
<div>
Top deals page.
</div>
</form>
<!--Adding jQuery-->
<script src="scripts/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<!--JavaScript and jQuery functions-->
<script type="text/javascript">
$(document).ready(function () {
$("#TopNav").tabs();
});
</script>
</body>
</html>
Anyone can tell what I am doing wrong here?
The behavior that you are seeing is as per jQuery tabs - you are not using it correctly.
One of the typical use case scenario will have markup such as:
<div id="tabs">
<ul>
<li>First Tab</li>
<li>Second Tab</li>
</ul>
<div id="tabs-1">
Tab 1 Content
</div>
<div id="tabs-2">
Tab 2 Content
</div>
</div>
Note local referencing href on li and corresponding tab content div (with same id).
In case, URLs are used then jquery tabs will create the content div automatically and load them using AJAX (see content via AJAX exaple - http://jqueryui.com/demos/tabs/#ajax).
This is the case with your code, you are using urls - jquery is loading the url content in a tab. So, for first tab, you can see the content of TopDeals.aspx page - and this page use the same master and hence the tab markup appears in the content div.
EDIT: work-around
Firstly, opening a new page via tab is frowned upon by usability experts - check http://www.useit.com/alertbox/tabs.html! However, to achieve what you want, you need to set the href of active tab to a local link.
For example, in master page
<div id="TopNav">
<ul>
<li><a href="TopDeals.aspx" runat="server" id="Tab1" >Top Deals</a></li>
<li><a href="AllDeals.aspx" runat="server" id="Tab2" >All Deals</a></li>
<li><a href="Account.aspx" runat="server" id="Tab3" >Account</a></li>
<li>
<asp:TextBox ID="SearchBox" runat="server"></asp:TextBox>
<asp:Button ID="Search" runat="server" Text="Search" />
</li>
</ul>
<div id="TabContent">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
Notice the placement of content placeholder. Now, in each page, you have to adjust the active's tab href accordingly. For example, in TopDeals.aspx, you have to add following line in say page_load or page_prerender:
Tab1.HRef = "#TabContent";
Instead of using hard-coded tab ids etc, I would suggest to use a Repeater in master page and populating it from code-behind. That way, you can expose ActiveTab property in master page (set by content pages) that will adjust href of the correct tab.
Finally last part is tab navigation: see this FAQ from jquery tabs so that when other tab is clicked, browser will open that page (instead of content getting loaded via AJAX).
EDIT: It appears that above FAQ has been removed by jquery team. To follow the tab URL, one needs handle select event - e.g.
$('.tabs').tabs({
select: function(event, ui) {
var url = $.data(ui.tab, 'load.tabs');
location.href = url; // follow url
return false; // to disable default handling
}
});
I have a master page and on the other asp.net form I need to call a method to .ashx file something as shown below:
As I am having problem with the buttons as whatever the button I click its Posting back the content which I don't want to.
<form id="Form1" action="Upload.ashx" method="POST" enctype="multipart/form-data"
runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="fileupload" style="border: thin solid #666666; width: 600px; height: 520px;
z-index: 1; left: 18px; top: 22px; position: absolute; overflow: auto;">
<div class="fileupload-buttonbar">
<label class="fileinput-button">
<span>Add files...</span>
<input type="file" name="files[]" multiple="multiple" />
</label>
<button type="submit" class="start">
Start upload</button>
<button type="reset" class="cancel">
Cancel upload</button>
<button type="button" class="delete">
Delete all files</button>
<div class="fileupload-progressbar">
</div>
</div>
<div class="fileupload-content" style="border-style: none">
<table class="files">
</table>
</div>
</div>
</form>
which is not possible as I have a content page.
So how do I do that within the content of the asp.net form which is based on the masterpage.
You cannot have server side form tag posting to a different page. Server side form control is designed to post-back to self (it ignores the action attribute) - that's why you see your page getting posted to (content) page. Master page is not really a page but rather a template/layout - content page denotes the actual page (master page is really a control whose control tree get merged into the content page tree).
You can also have cross-page posting in ASP.NET using server side button controls.
However, I believe for whatever you are trying to achieve, you need creating a separate html form tag. For example,
...
<!-- server side form - do not touch -->
<form id="Form1" runat="server">
...
</form>
...
<!-- you can have multiple html form tags but you cannot use server controls -->
<form action="Upload.ashx" method="POST" enctype="multipart/form-data">
...
</form>
...
i am having a html form in which i had given a theme. now i want to show that theme in div tag in asp page..
my html page is :
<html>
<head runat="server">
<title>Untitled Page</title>
</head>
<body background="file:/C:/Documents and Settings/Desktop/themes/images8.jpg">
<form id="form1" runat="server">
<div>
<h1>
header_picture
</h1>
<img src="file:/C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Water lilies.jpg" style="width:480px; height:150px; background-position:centre;"/>
</div>
<div>
<h1>
here comes the content
</h1>
</div>
<div>
<h2>
footer_picture
</h2>
<img src="file:/C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Blue hills.jpg" style="width:480px; height:150px; background-position:centre;" />
</div>
</form>
</body>
</html>
and i use the code to display the theme as :
<asp:Image ID="img1" runat="server" Width="80px" Height="80px" ImageUrl="~/themes/form.html"/>
but this is not showing any theme.
please help me out..
You are assigning an html page to ImageUrl attribute so it won't work.
Please map it to the required Image file if you want that image to be displayed in the webpage.