I am running into this error while using Url.Action is ASP.net MVC 5
Server Error in '/' Application.
The resource cannot be found.
Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.
Requested URL: /Home/AddPhoto
Here is the relevant portion of the view. The following url.action call is the one that fails : #Url.Action("AddPhoto", "Home")
</div>
#using (Html.BeginForm("Index", "Home", FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
<div class="col-md-8">
<textarea class="search-query span2 text-center" rows="13" style="width: 2200px; height: 50px;" id="searchText" name="searchText" placeholder="What is on your mind?" type="text" value="What is on your mind? "></textarea>
<br />
<a href="#" id="addphoto" onclick="window.location.href='#Url.Action("AddPhoto", "Home")'">
<span rel="tooltip" title="Add photo"><i class="fa fa-camera"></i></span>
</a>
<br />
<input type="reset" value="Cancel" name="Command" style="text-align:right" /> <input type="submit" name="Command" value="Post" style="text-align:right" />
<br />
<br />
In my HomeController.cs file, I do have this method:
public ActionResult AddPhoto()
{
return View();
}
And the actual view file , does exist under Views/Home
Screen grab of views/home directory
I am hence not understanding the reason why I am hitting the 404 not found error. Can someone please help me out over here?
AddPhoto action in your case must be [HttpPost]. It should be [HttpGet]. Remove [HttpPost]. Only GET works from browser location bar.
Here we go:
Try this:
<a href="#" id="addphoto" onclick="window.location.href='../Home/AddPhoto'">
or
<a href="~/Home/AddPhoto" id="addphoto">`
Hope it helps;)
Related
Hi I am working with spring MVC and thymeleaf and I am not able to update data from my controller as I have following code.The main problem I am facing is that my put method is not getting called.
#GetMapping("/{id}/edit")
public String editUser(#PathVariable("id") int id, Model model) {
logger.info("++++++++++++[edit User]\n\n" + userService.findById(id));
model.addAttribute("user", userService.findById(id));
return "user/edit";
}
#PutMapping("/{id}/edit")
public String updateUser(#PathVariable("id") int id, #ModelAttribute("user") User user, Model model) {
logger.info("\n\n+++++++++++++++++inside Update");
User toUpdate = userService.findById(user.getId());
user.setUserName(user.getUserName() != null ? user.getUserName() : toUpdate.getUserName());
user.setName(user.getName() != null ? user.getName() : toUpdate.getName());
logger.info(user.toString());
userService.updateUser(user);
model.addAttribute("user", userService.findById(user.getId()));
return "redirect:/user/" + id;
}
and my html page
<form action="#" th:action="#{/user/__${user.id}__}" method="put"
th:object="${user}">
<div class="form-group">
<label for="txtUserName">User-name</label> <input
class="form-control" id="txtUserName" placeholder="User Name"
th:feild="${user.userName}" />
</div>
<div class="form-group">
<label for="txtName">First Name</label> <input
class="form-control" id="txtName" placeholder="Full Name"
th:feild="${user.name}" />
</div>
<div class="form-group">
<label for="calDob">Date of Birth</label> <input
class="form-control" id="calDob" placeholder="dd/MM/yyyy" />
</div>
<button type="submit" th:method="put" class="btn btn-success">Update</button>
<a href="#" th:href="#{/user/__${user.id}__}"
class="btn btn-primary">Cancel</a> <a th:method="delete"
href="javascript:deleteUser('${user.id}');" class="btn btn-danger">Delete</a>
</form>
any help will be usefull thanks
PUT is not a valid argument for method attibute of the form tag. See HTML specification.
Valid methods are GET and POST. And as it's not a REST API, you can use POST method to update.
So just update your mapping from:
#PutMapping("/{id}/edit")
to
#PostMapping("/{id}/edit")
And form tag to:
<form action="#" th:action="#{/user/__${user.id}__}/edit" method="post" th:object="${user}">
I am trying to follow the advice from this question, on how to make an input field act like a link.
I have setup the form, and setup the URL.
Yet, when I click the input fields, nothing happens. It does not redirect me, and there is no console errors.
Any ideas on how to make this work?
Rendered source:
<form action="/ads/edit" style="display:inline;" method="get">
<input onclick="_gaq.push(['_trackEvent', 'Frontpage_Top_SaleBtn', 'click'])" type="button" class="button_green_big" value="Sælg virksomhed" />
</form>
<form action="/ads/editbuy" style="display:inline;" method="get">
<input onclick="_gaq.push(['_trackEvent', 'Frontpage_Top_BuyBtn', 'click'])" type="button" class="button_green_big" value="Køb virksomhed" style="margin-left: 10px;" />
</form>
My ASP.NET MVC code that renders this:
<form action="#Url.Action("Edit","Ads")" style="display:inline;" method="get">
<input onclick="_gaq.push(['_trackEvent', 'Frontpage_Top_SaleBtn', 'click'])" type="button" class="button_green_big" value="Sælg virksomhed" />
</form>
<form action="#Url.Action("EditBuy","Ads")" style="display:inline;" method="get">
<input onclick="_gaq.push(['_trackEvent', 'Frontpage_Top_BuyBtn', 'click'])" type="button" class="button_green_big" value="Køb virksomhed" style="margin-left: 10px;" />
</form>
as noted in one of the answers to the question on which you are referring
<form action="http://google.com">
<input type="submit" value="Go to Google">
</form>
Set your inputs type to 'submit' instead of 'button'
Is there a way to style the "popup" when a field is invalid in AngularJS?
I have no idea WHERE this thing is styled? We also have Bootstrap loaded, not sure if it's there. Can't right-click to "find element" either.
That's the browser validation kicking in. Disable it as follows:
<form novalidate></form>
Edit: Example of a form using novalidate with AngularJS's validation:
<form name="form" class="css-form" novalidate>
Name:
<input type="text" ng-model="user.name" name="uName" required /><br />
E-mail:
<input type="email" ng-model="user.email" name="uEmail" required/><br />
<div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
<span ng-show="form.uEmail.$error.required">Tell us your email.</span>
<span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
</div>
</form>
I believe it is no longer possible to style these popups:
Link
please see this html codes :
<!-- PAGE - 5 -->
<div class="section cc_content_5" id="page5" style="display: none;">
<div class="pad_content">
<div class="right grid_1">
<h1>
Contact Address
</h1>
<img src="Images/photo_5.jpg" alt=""><br />
<br />
<strong>The Companyname Inc</strong> 8901 Marmora Road,<br />
Glasgow, D04 89GR.<br />
Telephone: +1 800 123 1234<br />
Fax: +1 800 123 1234<br />
E-mail: www.copanyname.com<br />
</div>
<div class="left grid_2">
<h1>
Contact Form
</h1>
<div id="note">
</div>
<div id="fields">
<form id="ajax-contact-form" action="javascript:alert('success!');">
<label>
Name:</label><input class="textbox" name="name" value="" type="text">
<label>
E-Mail:</label><input class="textbox" name="email" value="" type="text">
<label>
Subject:</label><input class="textbox" name="subject" value="" type="text">
<label>
Comments:</label><textarea class="textbox" name="message" rows="5" cols="25"></textarea>
<label>
Captcha</label><img src="Images/captcha.php" style="margin: 3px 0px; width: 200px;
height: 32px;">
<div class=" clear">
</div>
<label>
</label><input class="textbox" name="capthca" value="" type="text">
<div class=" clear">
</div>
<label>
</label><input class="pin" name="submit" value="Submit" type="submit">
</form>
<div class="clear">
</div>
</div>
</div>
<div class="clear">
</div>
</div>
</div>
and their script :
<script type="text/javascript">
$(document).ready(function () {
$("#ajax-contact-form").submit(function () {
var str = $(this).serialize(); $.ajax({ type: "POST", url: "contact.php", data: str, success: function (msg) {
if (msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
{ result = '<div class="notification_ok">Your message has been sent. Thank you!<br /> send another mail</div>'; $("#fields").hide(); } else
{ result = msg; } $("#note").html(result);
}
}); return false;
});
});
function freset()
{ $("#note").html(''); document.getElementById('ajax-contact-form').reset(); $("#fields").show(); }
</script>
i really want to know how can i put page 5 in my asp.net web form?
as you we can not have a form inside default asp.net web page form.
so what can i do about page 5?
thanks in advance
You can not have two forms inside an asp.net page and both work on code behind.
The alternative that you have.
Place the second form before or after the asp.net form
Do not set second form, just read the input data that you interesting on code behind.
Dynamically create the form at the end of the page using the javascript and post it.
Because here I see that you post to php and I think that you like to keep the old code with asp.net, add them after the closing form of the asp.net form.
<form id="AspForm" runat="server">
...
</form>
<form id="ajax-contact-form" method="post" action="contact.php" >
...
</form>
More Extreme
Because you all ready use javascript you can do this trick. Copy and paste all the content in a form at the end of the page and post it.
<form id="AspForm" runat="server">
...
<div id="ajax-contact-infos" >
<label>
Name:</label><input class="textbox" name="name" value="" type="text">
<label>
<input class="pin" name="submit" value="Submit"
type="button" onclick="SubmitThisForm();return false;" >
...
</div>
</form>
<form id="ajax-contact-form" method="post" action="contact.php" >
<div id="PlaceOnMe" ></div>
</form>
and on javascript copy it just before post it as
<script type="text/javascript">
function SubmitThisForm()
{
// here I copy (doublicate) the content of the data that I like to post
// in the form at the end of the page and outside the asp.net
jQuery("#PlaceOnMe").html(jQuery("#ajax-contact-infos"));
// Now we submit it as its your old code, with out change anything
jQuery("#ajax-contact-form").submit();
}
// here is the old code.
$(document).ready(function () {
$("#ajax-contact-form").submit(function () {
var str = $(this).serialize(); $.ajax({ type: "POST", url: "contact.php", data: str, success: function (msg) {
if (msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
{ result = '<div class="notification_ok">Your message has been sent. Thank you!<br /> send another mail</div>'; $("#fields").hide(); } else
{ result = msg; } $("#note").html(result);
}
}); return false;
});
});
function freset()
{ $("#note").html(''); document.getElementById('ajax-contact-form').reset(); $("#fields").show(); }
</script>
All this is with the minimum changes. You can how ever make optimization, but this is the general idea.
You have a number of options; nesting the forms is the worst as it's something that will/wont work depending on the browser.
You can as #Aristos has mentioned, have one form after the other. This is a good solution but is not necessarily the best in terms of your site design.
The second is that you could embed your contact form on a normal HTML page, then include it on your parent page in an iframe or similar. This would get around the issues of nested forms, but might not give you the behaviour you want in terms of user experience.
The third is that your contact form would be better suited to being a User Control
You would put all of your contact form fields into the ascx file, and handle the button click for the submit in this control. After processing this submit, you can replace the user control with a simple message thanking the user for their input.
You can also put all of the required form validation in this. Your ASCX might look something like:
<asp:Panel runat="server" id="ContactPanel">
<div class="left grid_2">
<h1>
Contact Form
</h1>
<div id="note">
</div>
<div id="fields">
<label for="<%=InputContactName.ClientID%>">Name:</label>
<asp:TextBox runat="server" id="InputContactName" value="" />
<!-- Rest of Form goes here -->
<div class=" clear">
</div>
<asp:Button runat="server" id="ContactFormSubmit" OnClick="ContactFormSubmit_Click" Text="Send Feedback" />
<label> </label><input class="pin" name="submit" value="Submit" type="submit">
<div class="clear"></div>
</div>
</div>
</div>
</asp:Panel>
<asp:Panel runat="server" id="ThanksPanel" Visible="false">
<p>Thank you for your feedback. We'll try not to ignore it. But it is Friday. So we might. At least until Monday.</p>
</asp:Panel>
In your ContactFormSubmit_Click button you can just grab the text from your contact form, hide the ContactPanel, and show the ThanksPanel.
Really simple, and encapsulated away in a user control.
Can any one pf you please tell me how to clear the File upload control value using javascript.
function ClearFileUpload()
{
var fil = document.getElementById("FileUpload1");
fil.select();
n=fil.createTextRange();
n.execCommand('delete');
fil.focus();
}
Due to security reasons there is no direct access to the value of a file upload control on the client using javascript.
What you could to is deleting the element out of the dom and recreating it. Have a look at this
link for an example
<div id="uploadFile_div">
<input type="file" id="uploadFile" onkeydown="return false;" size="40" name="uploadFile"/>
</div>
<a onclick="clearFileInputField('uploadFile_div')" href="javascript:noAction();">Clear</a>
<script>
function clearFileInputField(tagId)
{
document.getElementById(tagId).innerHTML = document.getElementById(tagId).innerHTML;
}
</script>
working code tested IE,Firefox
<% using (Html.BeginForm("SaveSignatory", "LabMaster", FormMethod.Post, new { enctype = "multipart/form-data", id = "Signatory" }))
{ %>
<div>
</div>
<div id="divUpload">
<input type="file" name="filUpload" accept="image/*" id="filUpload" onchange="showimagepreview(this)" />
</div>
<img id="imgprvw" alt="uploaded image preview" height="200" width="200" />
<input type="button" id="btnRemoveUpload" value="Remove Upload Image" onclick="clearFileInputField('divUpload')" />
<input type="button" onclick="saveData()" />
<%}%>
function clearFileInputField(tagId) {
document.getElementById(tagId).innerHTML =
document.getElementById(tagId).innerHTML;
}