I have a very simple issue in my asp.net core mvc project.
I have a button in one of my views, and when this button is clicked, I want to redirect to a specific controller, and a action in this controller.
Currently it looks like this:
<button class="dropbtn" class="glyphicon glyphicon-user"> something</button>
I've been looking around for methods of doing this, and one of the solutions I found, was the #Html.ActionLink("pik", "Index", "Home").
So I tried:
<button onclick="#Html.ActionLink("pik", "Index", "Home")" class="dropbtn" class="glyphicon glyphicon-user"> Log in </button>
However this is just displayed as raw html. Does'nt work.
Then, here I found this:
<button nclick="location.href='<%: Url.Action("Action", "Controller") %>'" class="dropbtn" class="glyphicon glyphicon-user"> Log in
However, my IDE just gives a bunch of unexpected token in this line. I don't undestand it either.
I then found this:
#using (Html.BeginForm("Index", "Home", FormMethod.Post)){
<button type="submit" class="btn btn-default" class="dropbtn" class="glyphicon glyphicon-user">Submit</button>
}
This works in terms of the button, but for some reason, when I wrap the button in a form, my styling gets messed up.
I would rather not use javascript for redirecting.
So how can I redirect to a controller action with a button?
#Html.ActionLink() creates an html link with an <a> tag. If you are using Bootstrap (highly recommended) you can use this.
Click Me
or if you want to use helpers, like this
#Html.ActionLink("pik", "Index", "Home", new { #class = "glyphicon glyphicon-user" })
This is the cleanest way I know of to create button with a link.
You can also check this out.
Related
Meteor 1.6.1.1 is the latest version of my project. I am using package ian:accounts-ui-bootstrap-3 instead of accounts-ui. I have added a custom field as <select> in the code.
What I get on Screen is as below.
When I saw the HTML code, it is not adding class="form-control" to select tag.
below is the code when I inspect element on UI using Chrome.
<li id="login-dropdown-list" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Sign in / Join <b class="caret"></b></a>
<div class="dropdown-menu">
<div class="select-dropdown">
<label>State</label><br>
<select id="login-state">
</select>
</div>
<button class="btn btn-primary col-xs-12 col-sm-12" id="login-buttons-password" type="button">
Create
</button>
<button id="back-to-login-link" class="btn btn-default col-xs-12 col-sm-12">Cancel</button>
</div>
</li>
All I want is to add class="form-control" to the select tag dynamically when component loads on screen and it must look like below;
I have tried below code, but it is not working;
Template.HomePage.onRendered(function () {
document.getElementById('login-state').classList.add('form-control');
});
Well, I tried one way to achieve this is by using Template event as below,
Template.HomePage.events({
'click #login-dropdown-list': function(event){
//document.getElementById('login-state').classList.add('form-control');
$('#login-state').addClass('form-control');
}
});
As you can see, the component gets loaded inside the li tag with id="login-dropdown-list". I simply loaded the class on click event. Even the commented code works fine.
Is this a good solution? please let me know if there much better answer to this? If it works I will definitely accept and upvote the answer.
I haven't found a solution for my problem.
I am using asp.net mvc. In my View I am trying to call a Method, on a Buttonclick.
This is how the button looks like at the moment
<button type="button" id="#openButtonID" data-loading-text=" öffnen..." class="btn btn-primary" autocomplete="off" onclick="location.href='#Url.Action("Open", "Home", new {index =i} )'" disabled="#notConnected">
So every time I am clicking the button the website reloads itself.
At the website there is a camera stream which disappears for some seconds during the refresh. Now I have the task to avoid this, so the stream can been seen during the whole time. I have tried to call the method via Razor like this:
<button type="button" id="#openButtonID" data-loading-text=" öffnen..." class="btn btn-primary" autocomplete="off" onclick="#{( (GateControl.Controllers.HomeController)this.ViewContext.Controller ).Open( i );}" disabled="#notConnected">
But this just calls the Method if the view is loaded. As I tried this I set the return of the method to void.
Also I tried it like it is described like in this. Either the website is reloaded or I wasn't able to get in the method. I also tried several code snippets from stack overflow, but it wasn't working.
This is how the Method looks like
[CustomAuthorize]
public void Open( int index )
{
//some code
}
Since you already tried something with jQuery I suppose you use the library.
What you can do is to bind a click event to your button and inside that to make a GET ajax call.
You can use a "data-" attribute in your button to have your url generated on server and available on client.
<button id="button-id" class="btn btn-primary" data-loading-text=" öffnen..." data-url="#Url.Action("Open", "Home", new {index =i} )" disabled="#notConnected" autocomplete="off">
This should do it:
$("#button-id").click(function(){
var url = $("#button-id").data("url");
$.get(url , function(result) {
//do something with the result if you ever need to
});
});
This way you won't get the page refresh. You could also give us a little more details about that server method and what it does, maybe it needs some changes also.
Here is the full code I am using
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<button type="button" id="#openButtonID" data-loading-text=" öffnen..." class="btn btn-primary" autocomplete="off" data-url="#Url.Action("Open", "Home" , new {index=i+1} )" disabled="#notConnected">
Öffnen
</button><br /><br />
<script type="text/jscript">
$("##openButtonID").click(function () {
var url = $("##openButtonID").data("url");
$.get(url, function (result) {
//do something with the result if you ever need to
});
});
</script>
I have the following setup:
<div data-ng-repeat="item in navigationBar.navObject.items" class="btn-group">
<button data-ng-class="{current: $last}" class="btn btn-default btn-xs" type="button" data-ng-click="navigationBar.goToState(item)"> {{item.name}}</button>
<button data-ng-hide="item.isTerminal" data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle" type="button">
<span class="fa fa-fw fa-caret-right"></span>
</button>
<ul class="dropdown-menu">
<li data-ng-repeat="subItem in item.subItems"><a data-ng-click="subItem.item.goToState()">{{subItem.name}}</a></li>
</ul>
</div>
And I would like the icon in the dropdown to change from fa-caret-right to fa-caret-down when the dropdown list is visible. Is there any way to do this strictly with CSS?
You won't be able to change the attributes of HTML elements using CSS, you'll probably want to use jQuery instead.
Bootstrap has some nifty JavaScript going on, where you can execute your own scripts when boostrap elements inside your website is used.
Initialize dropdown using this inside jQuery.
$('.dropdown-toggle').dropdown();
When it's called you can hook different actions to it using the handles specified on the bootstrap docs.
on('show.bs.dropdown', function(){}); is just a fancy word for saying "on dropdown"
$('.dropdown-toggle').on('show.bs.dropdown', function () {
// All actions to fire after the dropdown is shown go here.
$('.fa .fa-fw').addClass('fa-caret-right');
$('.fa .fa-fw').removeClass('fa-caret-down');
})
I know this is an old post, but I was looking for this solution and have one that works for me. You can target and change the pseudo element inside that span. When you click the button, doesn't the button add an open class? So, then the css would look like:
btn.open .fa-caret-right:before { content: "\e114"; }
Use the .open added to the button class.
The \e114 being the character of the down arrow.
I have a button at the moment, rendered in my MVC application as:
#Html.ActionLink("Delete", "DeleteTransfer", "Transaction", new { transferId = (Model.Id) }, new { #class = "btn btn-danger", #onclick = "return confirm('Are you sure you want to delete this Transfer?')" })
I want to use the Twitter Bootstrap classes to add an icon. However, for that the code would look like this:
<button class="btn btn-danger"><i class="icon-white icon-trash"></i> Delete</button>
How can I apply this in my ActionLink? It has an Image (i) embedded in the button.
Try:
<a class="btn btn-danger"
href="#Url.Action("DeleteTransfer", "Transaction", new { transferId = (Model.Id) })"
onclick = "return confirm('Are you sure you want to delete this Transfer?');"
>
<i class="icon-white icon-trash">Delete</i>
</a>
According your routes, it's possible you need:
#Url.Action("DeleteTransfer", "Transaction", new { transferId = (Model.Id) }, null)
According to the bootstrap documentation (http://getbootstrap.com/components/#glyphicons-examples) glyphicons might be the way to go. Here is an example of putting an icon on a button:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
Since ActionLink() is an htmlHelper extension that returns an "a" element, i.e., <a>...</a>, I believe the extension needs to be overridden.
I tried the following, but it resulted in the glyphicon being above the "a" element:
<span class="glyphicon glyphicon-star"></span>#Html.ActionLink("Delete", "DeleteTransfer")
I also tried putting the ActionLink() inside the <span></span> with the same results. I tried using css with text-wrap: none; and white-space: nowrap; but that didn't work either.
So I believe the answer is the extension needs to be overridden to accept another parameter for the glyphicon. Unless, someone can show a trick to make it stop wrapping.
I am trying to create a split button dropdown using Bootstrap and ASP.NET MVC 5, but I cannot seem to render the correct markup. This is what I have so far...
<div class="btn-group">
#Html.ActionLink("Details", "Details", new { id = item.ClientTypeID }, new { #class = "btn btn-sm btn-primary" })
<a class="btn btn-sm dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>#Html.ActionLink("Edit", "Edit", new { id = item.ClientTypeID })</li>
<li>#Html.ActionLink("Delete", "Delete", new { id = item.ClientTypeID })</li>
</ul>
</div>
I have no doubt that this is my own fault, but can anybody please point out what I should actually have in my template. Instead of the required drop down, I am seeing the initial "Details" button, and I am seeing the drop down caret, but clicking on the caret does not show the additional items.
In case it makes a difference, I am using the default templates from VS2013 along with the Cosmo theme from Bootswatch. This is also being rendered in a table cell.
Thanks.
Make sure you have registered jQuery before bootstrap.min.js.
Debug the error using Developer Tools available in all modern browsers.
Chrome use Ctrl+J, IE use F12, FireFox use Shift+F2
Happy Coding..