How to use POST method with Asp.Net Master page? - asp.net

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>
...

Related

Mailchimp embed code not working in wordpress

I was trying to embed a sign up form in my wordpress website. what i did is like this: i went to the wordpress editor for that page and choose the option to add raw html code. Then pasted the below code:
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://luisaspagnolistanford.us3.list-manage.com/subscribe/post?u=3b43aec3c5c107948b570c43d&id=b67bd69928" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Get notified about events and sales</label>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3b43aec3c5c107948b570c43d_b67bd69928" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
Then the design is coming fine and i can see all the code is there from inspect element option of chrome but when clicked the submit button it doesnt do anything and also there is no error. I am just wondering whats wrong here.
target="_blank" this means that form response opens up in a new tab. Look for the tab.
You have a script in your core-scripts.js file that's preventing default behavior. Remove it.
$( "#mc-embedded-subscribe-form" ).submit(function( e ){
var $this = $(this);
e.preventDefault();

using dropzone.js in webform with master page

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.

jQuery Mobile layout customization

I'm taking my first steps in jQuery Mobile and I'm getting a bit disappointed with the lack of customization it provides...
As an example, I have a simple form and I'd like to customize the layout of the form components.
This is my code:
<form id="loginForm" action="#" method="post">
<input id="rememberMe" name="rememberMe" type="checkbox"/>
<label for="rememberMe">Remember me in this computer</label>
<a id="info" href="#" data-role="button" data-icon="info" data-iconpos="notext">Info</a>
<input id="submit" type="submit" value="log in" data-inline="true"/>
</form>
See the fiddle.
Concretely I'd like:
The rememberMe checkbox to be as wide as the text inside, and the info button to be inline with the checkbox.
The "group" containing the previous checkbox and button to be aligned to the right.
The submit button to be to the right as well.
Please provide an example of how such things can be achieved...
EDIT: I'd like something like this:
Customization you require will not come from jQM but from custom css.
Usually this could be easily done with jQuery Mobile grids but they are not that flexible. So you need a custom solution.
A div around every element is needed because jQM recreates every element with new style and unless we have a parent div everything will go to hell.
Working example: http://jsfiddle.net/Gajotres/8NB22/
HTML :
<form id="loginForm" action="..." method="post">
<div class="row">
<div class="inline-mid">
<a id="info" href="..." data-role="button" data-icon="info" data-iconpos="notext" class="middle-button">Info</a>
</div>
<div class="inline-left">
<input id="rememberMe" name="rememberMe" type="checkbox"/>
<label for="rememberMe">Remember me in this computer</label>
</div>
</div>
<div class="row">
<div class="inline-left">
<input id="submit" type="submit" value="log in" data-inline="true"/>
</div>
</div>
</form>
CSS :
.row {
min-width: 400px;
width: 400px;
}
.inline-left, .inline-mid , .row {
position: relative;
float: right;
}
.inline-mid {
margin-left: 10px;
padding-top: 5px;
}
This can be achieved using ui-grid classes.
Working Demo
Markup
<form id="loginForm" action="..." method="post">
<div class=ui-grid-a>
<div class=ui-block-a>
<input id="rememberMe" name="rememberMe" type="checkbox"/>
<label for="rememberMe" data-inline="true">Remember me in this computer</label>
</div>
<div class=ui-block-b>
<a id="info" href="..." data-role="button" data-icon="info" data-iconpos="notext">Info</a>
</div>
</div>
<div class=ui-grid-solo>
<input id="submit" type="submit" value="log in" data-inline="true"/>
</div>
</form>
Override CSS
.ui-block-a { width: 95% !important; text-align: right !important; }
.ui-block-b { width: 5% !important; padding-top: 5px !important; }
.ui-grid-solo { text-align: right !important; }
Layout should never be primarily the responsibility of Javascript code, as such you shouldn't blame jQuery Mobile for this.
Customization for different screen sizes should be done with CSS Media Queries instead, click the link for more examples than you'll ever need.

Prevent iframe redirecting externally on form submit

My login form is in an iframe on my website and automatically sends people to the desired welcome page on correct submission.
If, however, the password is entered incorrectly, the iframe goes to an external url saying incorrect password, try again - or words of that effect.
What I need is on incorrect submission, some way of preventing the iframe from loading the external url and forcing it to load my own page in the iframe.
I'm wondering about various possible ways of doing this but have little to no coding knowledge.
1 option may be that on submission (or fractionally after), it activates some code on the main page telling it to load my own page in the iframe. The theory is that on correct submission, the welcome page has loaded before the iframe has had a chance to reload.
another option could be that on submission, some code linked to the submit button (onclick or similar) reloads to page in the frame or a page of my choice before it's had a chance to load externally - again on correct submission going to the welcome page before having a chance to reload.
Does this sound at all possible??
current code is...
<form action="http://www.othersite.com/action=login&base=" method="post" style="margin: 0">
<div class="border" style="padding: 12px; width: 80%; margin: 0">
<h3 class="font">Login</h3>
<label class="font2" style="display: block" for="username">Email</label>
<input class="font2" name="username" tabindex="1" id="username" style="width: 100%; color: black">
<label class="font2" style="display: block" for="password">Password</label>
<input class="font2" type="password" name="password" tabindex="2" id="password" style="width: 100%">
<div style="padding-top: 0px">
<br>
<input type="submit" value="Sign in" class="font3 button" tabindex="3">
</div>
</div>
</form>
Thanks,
Tom

Dragging a popup modal extender inside an usercontrol

I'm trying to use a modal popup extender.
But I have a problem when using it inside an userControl.
I put the drag property true, and PopupDragHandleControlID but I can't drag the popup.
It seams that this problem happens only when I use the popup modal extender inside the userControl.
If I use it inside an aspx page, then it is OK.
Please can you help me how to deal with this problem?
Here is the code that I use in my user control:
<asp:LinkButton ID="lnk" runat="server" Text="Rezervo"></asp:LinkButton>
<ajax:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="ModalPopupBG"
runat="server" CancelControlID="btnCancel" OkControlID="btnOkay" TargetControlID="lnk"
PopupControlID="pnlBooking" Drag="true" PopupDragHandleControlID="PopupHeader">
</ajax:ModalPopupExtender>
<div id="pnlBooking" style="display: none;" class="popupConfirmation">
<div class="popup_Container">
<div class="popup_Titlebar" id="PopupHeader">
<div class="TitlebarLeft">
Rezervo</div>
<div class="TitlebarRight">
</div>
</div>
<div class="popup_Body">
</div>
<div class="popup_Buttons">
<input id="btnOkay" value="Done" type="button" />
<input id="btnCancel" value="Cancel" type="button" />
</div>
</div>
</div>

Resources