I have a cancel button in a form:
#using (Html.BeginForm("ConfirmBid","Auction"))
{
some stuff ...
<input type="image" src="../../Content/css/img/btn-submit.png" class="btn-form" />
<input type="image" src="../../Content/css/img/btn-cancel.png" class="btn-form" />
}
The issue is I want this button to go to a particular view when I click on it. How do I do this?
Either you can convert the Cancel button as an anchor tag with #Html.ActionLink helper method and apply a css class which makes the link to looks like a button and then in the controller action for that link, you can return the specific view.
#Html.ActionLink("Cancel","Index","Products",null, new { #class="clsButtonFake"})
or
Use 2 submit buttons in the form. One for real submit and one for the cancel. and in your controller action, check which button called the action method.
You can read more about it here in this answer.
Lot of the answers worked in either of the browsers, chrome or ie but not all.
This worked in all -
<input type="button" value="Cancel" onclick="location.href='#Url.Action("Index","Home")';"/>
This is my button HTML:
<button type="button"
class="btn btn-inverse"
id="cancel"
onclick="window.history.back()">
<i class="icon-remove icon-large"></i>
<br />#Localization.Cancel
</button>
Then to customize the onclick attribute in some views I do this:
<script>
$(document).ready(function ()
{
$("#cancel").
attr("onClick",
"document.location.href='#Html.Raw(Url.Action("Index", "Standard",
new { ManualId = Model.ManualId, ChapterId = Model.ChapterId }))'");
});
</script>
Or a styled submit button:
<input type="submit" value="Save Form" name="Save" class="submit-button btn-form" />
Then Javascript for cancel button:
<input type="button" onclick="document.location.href('Home/Index')" value="Cancel" class="cancel-button btn-form" />
// Note: This avoids any of the validation that may happen in the model that
// normally gets triggered with a submit
So with Shyju's appraoch, you use the built in MVC ActionLink helper. Doing this, you'll need to have any images or icons done through css. However, this is much more cachable, especially if you use base64 strings for your images in css.
I like Adauto's approach because it gives you much more control of the markup. MVC Html Helpers are nice, but they still seem to have their heads in the WebForms mindset of "don't worry about it, we'll take care of it for you".
The one thing I would add is Url.Content.
<img src="#Url.Content("~/Content/css/img/btn-submit.png" class="btn-form" />
It's never really a good idea to make your views have to know the location of content relative to it's location.
<a href="/Auction/[ActionName]">
<input type="image" src="#Url.Content("~/Content/css/img/btn-cancel.png")" class="btn-form" />
</a>
if you want to preserve its look as a button, you could do something like this:
<a href="/Auction/[ActionName]">
<input type="button" value="Cancel">
</a>
where [ActionName] is the name of the action that will return your desired view.
<img src="../../Content/css/img/btn-submit.png" class="btn-form" />
I ended up making a helper so I could reuse the cancel button. I added a js confirm in case people click the cancel button by accident after filling in the form.
#helper FormCancelButton(string cancelUrl)
{
<button type="button" class="btn" onclick="if (confirm('Cancel changes?')) location.href = '#cancelUrl';">Cancel</button>
}
I then call it like so:
#FormCancelButton(Url.Action("Index", "User" ))
If you are really keen you could try and detect the dirty state of the form too and only show the confirm dialog if the form had been changed.
<asp:Button runat="server" class="btn btn-danger"
CausesValidation="false" onclick="Cancel_Click" Text="Cancel"/>
protected void Cancel_Click(object sender, EventArgs e)
{
Response.Redirect("Test.aspx");
}
Related
so I am still new to C# and I currently testing out my project regarding a search function when user key in what they want to find out in a the textbox and press enter and it will redirect them to my search page. However everytime i tried to type things in the search button and press enter what came out is
http://localhost:51182/Default.aspx
to
http://localhost:51182/Default.aspx?ctl00%24search=(whatever I keyed).
As the search function is in the masterpage.aspx i cannot use asp:buttons or what.
This is my code in the masterpage.
<form class="navbar-form navbar-right">
<input type="text" id="search" class="form-control" placeholder="Search..." runat="server">
<button class="btn btn-default" type="submit" id="Button1" onserverclick="Button1_OnClick"><i class="glyphicon glyphicon-search"></i></button>
</form>
This is my c# code for masterpage.
protected void Button1_OnClick(object sender, EventArgs e)
{
//The code was commented out since the search name was not able to be recognized in my webform input id so i tried to deal with the response first.
//String searchtext = search;
//String Search = Server.MapPath("Website\\HTML\\SearchEngine.aspx");
Response.Redirect("~/Website/HTML/SearchEngine.aspx?search=");
}
I mainly put the codes that I think that matters and if required the other part just say so. In addition to it if this is a duplicate to other question, I am sorry as I been trying it out on some other question answer for their fixes to this but i wasn't able to get my working then I submit this question.
Hope you guys can help me out.
<form class="navbar-form navbar-right">... </form>
In ASP.NET WebForm, you cannot use another form tag, since there is a main form tag with runat="server" already.
The easiest way to achieve is to use Panel. When user types inside textbox and press Enter key, it will call Button1_OnClick event.
For example,
<asp:Panel ID="SearchPanel" runat="server" DefaultButton="SearchLinkButton">
<asp:TextBox runat="server" ID="SearchTextBox" CssClass="form-control"
placeholder="Search..." />
<asp:LinkButton runat="server" ID="SearchLinkButton" CssClass="btn btn-primary"
OnClick="SearchLinkButton_Click">
<i class="glyphicon glyphicon-search"></i>
</asp:LinkButton>
</asp:Panel>
So you can't have nested forms, but that's not to say that you can't have multiple forms on the same page, they just can't overlap, and only one can be an ASP.NET Form[runat=server]. Just make sure the search form, which can be a vanilla HTML form, is placed in the master page outside of any Form[runat=server] and format the search form like so:
<form class="navbar-form navbar-right" action="/Website/HTML/SearchEngine.aspx">
<input type="text" name="search" class="form-control" placeholder="Search..." />
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</form>
I want to move to another page from current
My View
<p class="btn btn-primary btn-lg">#Html.ActionLink("More information", "GoToApps") More information! »</p>
However my button have link from method ActionLink and string "More information". How is method without linkText ?
My method in controller:
public ActionResult GoToApps()
{
return RedirectToAction("IndexApps", "Apps");
}
This way is run, but I want better display.
Cheers,
If you need only Link you should use #Url.Action("GoToApps")
<form action="#Html.ActionLink("More information", "GoToApps")">
<button type="button" class="btn btn-primary btn-lg"> More information! »</button>
</form>
I am trying to create a "next" button and a "back" button in my form. I want the "next" button to validate and submit the form. And I want the "back" button to simply go back to the "cart" page. But the "back" button keeps validating and trying to submit the form.
Here is my code:
<div class="buttons">
<button class = "button" id = "back">Back</button>
<input type="submit" value="Next" class="button" />
</div>
The reason I need the back link to be a button is so that it will look the same as the "next" button. Any ideas how I can get this working correctly?
A <button> element always submits the form. The same goes for a <input type="submit" /> element.
But a <input type="button" /> will not submit the form. That's what you want.
<div class="buttons">
<input type="button" class="button" id="back" onclick="window.location = '#Url.Action("Index", "Cart")';">Back</a>
<input type="submit" value="Next" class="button" />
</div>
Edit I'm not sure if you can put that inside an <a> element though. I reworked my example to use click events rather than a link. If it is valid to put inside a <a> element (can anyone confirm?), you can do it like that as well.
I have a loop that creates some buttons and (is meant to) make a function call when that button is pressed.
foreach (Answer a in qanswers)
{
//Guid answerid = new Guid();
<form method="post" action="">
<div class="float-left">
<input type="submit" value="#a.Answer1" class="submit" style="width:600px" onmousedown="#{saveTest(a, module, user, quest, healthsafety);}">
<br /><br />
</div>
</form>
}
However, it calls the "saveTest" procedure at page load for each button produced, rather than onmousedown/onmouseclick.
Is it possible to change this?
I assume from this that saveTest is a server side function that you are trying to call.
onmousedown is a client side event and can only directly run client side script.
If you wish to call a server side function then you will need to specify an action in the form that the page will post pack to.
Have a look here for more on this
http://msdn.microsoft.com/en-us/library/system.web.mvc.html.formextensions.beginform(v=vs.108).aspx
A quickly modified version of your code would be:
foreach (Answer a in qanswers)
{
using (Html.BeginForm("saveTest", "ControllerName"))
{
<div class="float-left">
<input type="submit" value="#a.Answer1" class="submit" style="width:600px")>
<br /><br />
</div>
}
}
The button will submit to the controller and action that has specified in the form. So please check carefully which controller and action you have specified.
using (Html.BeginForm("saveTest", "Controller"))
{
}
This is the way you have to specify your form.
Regards,
Pavan.G
I have a view with a button. When the user clicks the button I want them redirected to a data entry view. How do I accomplish this? I should mention the views are created, tested, and functioning. I can get to them by typing the url.
I looked for steps explaining how to wire up the onclick event of the button but I'm new to MVC and kinda lost at this point.
Thanks!
It depends on what you mean by button. If it is a link:
<%= Html.ActionLink("some text", "actionName", "controllerName") %>
For posting you could use a form:
<% using(Html.BeginForm("actionName", "controllerName")) { %>
<input type="submit" value="Some text" />
<% } %>
And finally if you have a button:
<input type="button" value="Some text" onclick="window.location.href='<%= Url.Action("actionName", "controllerName") %>';" />
Just as an addition to the other answers, here is the razor engine syntax:
<input type="button" value="Some text" onclick="#("window.location.href='" + #Url.Action("actionName", "controllerName") + "'");" />
or
window.location.href = '#Url.Action("actionName", "controllerName")';
If, like me, you don't like to rely on JavaScript for links on buttons. You can also use a anchor and style it like your buttons using CSS.
Text
if using JQuery, you can do this :
<script type="text/javascript">
$('#buttonid').click(function () {
document.location = '#Url.Action("ActionName","ControllerName")';
});
</script>
It has been my experience that ASP MVC really does not like traditional use of button so much. Instead I use:
<input type="button" class="addYourCSSClassHere" value="WordsOnButton" onclick="window.location= '#Url.Action( "ActionInControllerHere", "ControllerNameHere")'" />
Or, if none of the above works then you can use following approach as it worked for me.
Imagine this is your button
<button class="btn" onclick="NavigateToPdf(${Id});"></button>
I got the value for ${Id} filled using jquery templates. You can use whatever suits your requirement. In the following function, I am setting window.location.href equal to controller name then action name and then finally parameter. I am able to successfully navigate.
function NavigateToPdf(id) {
window.location.href = "Link/Pdf/" + id;
}
I hope it helps.
You can easily wrap your button tag with tag.Using Url.Action() HTML Helper this will get to navigate to one page to another.
<a href='#Url.Action("YourAction", "YourController")'>
<input type='button' value='Dummy Button' />
</a>
If you want to navigate with javascript onclick() function then use
<input type='button' value='Dummy Button' onclick='window.location = "#Url.Action("YourAction", "YourController")";' />
$("#yourbuttonid").click(function(){ document.location = "<%= Url.Action("Youraction") %>";})
RIGHT ANSWER HERE: Answers above are correct (for some of them) but let's make this simple -- with one tag.
I prefer to use input tags, but you can use a button tag
Here's what your solution should look like using HTML:
< input type="button" class="btn btn-info" onclick='window.location.href = "#Url.Action("Index", "ReviewPendingApprovals", routeValues: null)"'/> // can omit or modify routeValues to your liking
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/UsersPage">Users</a>
</li>
Try this