I have responsive website, while pressing on one of the buttons :
<div class="button">
<input src="Images/TransparenImgButt.PNG"
onclick="if (typeof(Page_ClientValidate) == 'function')
Page_ClientValidate('');"
name="ctl00$ContentPlaceHolder2$OrderNewCard" type="image"
id="OrderNewCard" runat="server" class=" NewCardPic"
/>
</div>
I don't get the page I need (which I get from the web) what I need to change here?
Thank you for any help
So I have a big form, which is divided in sections.
For simplyfying the thing, each section has input file tag for uploading a file, and an image of the previous file attached to that section (image in .png format).
<table>
<tr>
<td>
Upload Section Preview Image:
</td>
<td>
<div id="at-at-holder-N-TemplatePreview">
<input type="file" id="TemplateSectionPreview" name=#sectionScreenshotName title="Attach" />
</div>
</td>
</tr>
<tr>
<td>
<div class="section-panel">
<img class="thumbnail" src="/Content/screenshots/#sectionScreenshotName" />
<div id="section-image-preview-#sectionId" class="modal hide section-image-window">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<img src="/Content/screenshots/#sectionScreenshotName" style="max-height: 500px; padding: 4px;" />
</div>
</div>
</td>
</tr>
</table>
When I submit my form to save changes, in my controller I take a look at the Request.Files, and I find as many files as sections.
Digging more, I find out that MVC sends in every input I declare, the image I show next to it. Even if I attach a file with the input, nothing changes.
How can I just make my controller to read just the file/s attached with the input?
my controller heading:
[HttpPost]
public ActionResult QuestionEditor(FormCollection collection)
{
...
It has been a while since I last made a website with JQUERY-UI. I am have a aspx page, and I am trying to add a popup modal on click of
but it triggers a "submit" when I click the button, how do I prevent the submit? It displays the popup for 2 seconds and then "submit" occurs.
here is the html code
<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all">
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all">
</fieldset>
</form>
</div>
<div id="users-contain" class="ui-widget">
<h1>Existing Users:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name</th>
<th>Email</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe#example.com</td>
<td>johndoe1</td>
</tr>
</tbody>
</table>
</div>
<button id="create-user">Create new user</button>
You can prevent submit action -
$('form').on('submit',function(e){
e.preventDefault();
});
In you Jquery code where you are setting the popup write
return false in the end... Thank you
Simplest way is to return false OnClientClick, <asp:Button OnClientClick="return false;"></button>.
Add the type attribute in the button, type="button". By default it is submit
I am adding to a list of elements through an ajax call. The ajax call sends information to controller, controller adds everything to database, then grabs all the items for the list from the database, adds the items to a view model, then returns a partial view with the model. I clear the div container for the list then add the returning HTML.
$('#container').empty().html(result);
My problem is, in the HTML, I have Kendo Datepickers. The page loads fine, and if I do a refresh everything is fine. But right after the Ajax call, the Kendo Datepickers are not there. I debugged and got the result HTML from the ajax call and the following is what is showing for the datepickers:
jQuery(function(){jQuery("#dueDate0").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
the 'dueDate0' is obviously the ID of the element, but it should not be zero it should be an actual ID number ( ex. 12 ). When I look at the HTML after the AJAX call, the datepickers are just input elements with a date type.
Any suggestions on what to do?
Thanks
EDIT: Here is the HTML that gets return in the AJAX call.
<div id="accordion">
<div class="ItemList">
<table class="tblPriorityElement">
<tr>
<td class="tdPrioritySelect">
<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>
</td>
<td class="tdPriorityName">fasdfasr4</td>
<td class="tblType" tabindex="0">
<span class="txtType">Project</span>
</td>
<td class="tdPriorityDate" tabindex="0">
<time>10/8/2013</time>
</td>
<td class="tdAllocation" tabindex="0">
<span class="txtAllocation">0 hrs</span>
</td>
<td class="tdDeletePriority">;
<img src="../../Images/redx.png"/>
</td>
</tr>
</table>
<div class="content">
<form class="editItem">
<input id="ItemID" name="ItemID" type="hidden" value="0" />
<label>Name:</label>
<input class="text-box single-line" id="Item_Name" name="Item.Name" type="text" value="fasdfasr4" />
<label>Type:</label>
<input class="text-box single-line" id="Item_Type" name="Item.Type" type="text" value="Project" />
<label>Due date:</label>
<input class="k-input" id="dueDate0" name="dueDate0" type="date" value="10/8/2013" />
jQuery(function(){jQuery("#dueDate0").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
<br/>
<label>End Date:</label>
<input class="k-input" id="endDate0" name="endDate0" type="date" />
jQuery(function(){jQuery("#endDate0").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
<label>Start Date:</label>
<input class="k-input" id="startDate0" name="startDate0" type="date" value="10/8/2013" />
jQuery(function(){jQuery("#startDate0").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
<br/>
<input type="submit" value="save"/>
</form>
</div>
</div>
</div>
When generating the partial view,just define some kind of random id for the datepicker - for example Guid.NewGuid() or something. are you using the MVC helpers to define the datepicker?
I am developing a C# ASP.Net project. And I would like to do something very similar to what is shown in the following website.
However, that is a solution for the HTML <a> tag, and I am looking for a solution for ASP.NET buttons.
What are my options?
<asp:LinkButton /> is a good choice. It is virtually identical to <asp:Button />, except it creates a form enacting hyperlink that you can put any image in it that you want to.
I stress using LinkButton instead of ImageButton because ImageButton uses different event handlers, which makes it difficult to switch back and forth between them. With Linkbuttons and Buttons, they use the same event handlers, so it's rather easy to switch between them.
They are the same, you can do something like this:
<asp:Button ID="SearchButton" runat="server" CssClass="addButtonStyle" OnClick="SearchButton_Click"
Text="Go " Width="60px" />
some style:
.addButtonStyle {
border: 1px solid #e1ecfc;
background-color: #B9D1F4;
color: #003399;
background-image: url(partgrad.gif);
background-repeat: repeat-x;
}
Try this example
or view it here My Example Link
<!DOCTYPE html>
<html>
<head>
<title>Hello World | Button Config</title>
</head>
<body>
<div>
<h1>Working with Buttons</h1>
<p>Small, large, or medium size buttons can have css properties that you can benefit from rather that using images. Please look at the examples below</p>
<textarea>
<asp:button runat="server" id="helloWorld" CssClass="button" text=" --- See examples --- " />
</textarea>
<ol>
<li>
<input type="submit" class="button" value="This is a Long Button"/>
</li>
<li>
<input type="submit" class="button" value="Search Now!"/>
</li>
<li>
<input type="submit" class="button" value="Short"/>
</li>
</ol>
<ol>
<li>
<input type="submit" class="button round" value="This is a Long Button"/>
</li>
<li>
<input type="submit" class="button round" value="Search Now!"/>
</li>
<li>
<input type="submit" class="button round" value="Short"/>
</li>
</ol>
<p>
In theory you always want the cleanest markup. So linkButtons on are NO GO! LinkButtons are Javascript based and can cause accessibility issues.
</p>
<h3>IE doesn't have my rounded corners?</h3>
<p>
Gotcha, lets do it without JS and lets use the images found from the link below. IE doesnt take advantage of some of the cooler CSS tricks we find in other browsers. - Shame on them! In the next example we simply wrap the asp:button with a span and then a b element.
</p>
<ol>
<li>
<span id="btn-wrap">
<b>
<input type="submit" class="rounded" value="This is a Long Button"/>
</b>
</span>
</li>
<li>
<span id="btn-wrap">
<b>
<input type="submit" class="rounded" value="Search Now!"/>
</b>
</span>
</li>
<li>
<span id="btn-wrap">
<b>
<input type="submit" class="rounded" value="Short"/>
</b>
</span>
</li>
</ol>
<textarea>
<span id="btn-wrap">
<b>
<asp:button runat="server" id="helloWorld" text=" --- See examples --- " />
</b>
</span>
</textarea>
<h3>Wrapping it up</h3>
<p>
In this demo, you've seen a single background image used as a repeating object to give us a gradient effect similar to the one found here http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
</p>
<style>
input[type="submit"], span, b {background:transparent none repeat scroll 0 0;border:0 none;display:inline-block;margin:0;padding:0;cursor:pointer;outline:none;} /* reset the button */
input.button {background:url(http://gfx2.hotmail.com/cal/11.00/updatebeta/ltr/grid_navigator_bg.png) repeat-x; text-shadow:0 1px 1px #FFFFFF /* Just for looks */; padding:4px 5px;}
input.button:active {background:#FED58F;}
.round {-moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px;}
/* http://gfx2.hotmail.com/cal/11.00/updatebeta/ltr/grid_navigator_bg.png thank you hotmail for the image */
span#btn-wrap {background:transparent url(http://www.oscaralexander.com/tutorials/img/bg_button_span.gif) repeat-x scroll 0 0;}
span#btn-wrap b {background:transparent url(http://www.oscaralexander.com/tutorials/img/bg_button_a.gif) no-repeat scroll right 0;height:18px;padding:3px 10px;}
span#btn-wrap:active {background-position: 0 -24px;}
span#btn-wrap:active b {background-position: right -24px;}
li {margin:5px 0;}
textarea {background:#323232; color:white; padding:10px; width:900px; height:80px; overflow:hidden;}
</style>
</div>
</body>
</html>
Like the page says, this is the cleanest java Script less way to do it. This is accessible and browser friendly.