I have html code which is posted below. I would like to apply that Delete and Edit Button class to HTML Action Link.
Here is my code.
#Html.ActionLink("Edit", "EditUser", new { UserName = item.UserName }) |
#if ((item.UserName.ToLower() != this.User.Identity.Name.ToLower()))
{
#Html.ActionLink("Delete", "DeleteUser", new { UserName = item.UserName },
new { onclick = "return confirm('Are you sure you wish to delete this user?');" })
}
This HTML Code for Delete and Edit:
<a href="#" class="btn btn-info btn-xs black">
<i class="fa fa-trash-o"></i> Delete
</a>
<a href="#" class="btn btn-success btn-xs purple">
<i class="fa fa-edit"></i> Edit
</a>
How can I make it work?
Help would be appreciated.
You have to use the # character, since class is a keyword in C#. Here's a link to the MSDN documentation: http://msdn.microsoft.com/en-us/library/dd492124(v=vs.108).aspx
#Html.ActionLink("<i class='fa fa-trash-o'></i> Delete", "DeleteUser",
new { UserName = item.UserName },
new { #class = "btn btn-info btn-xs black" })
Related
This is my function that takes the id from my button and changes the text:
var modal_button_update = document.getElementById("modal_button_text");
if (modal_button_update.innerHTML === "Add") { modal_button_update.innerHTML = "Update"; }
It's working fine with this button (Add becomes Update)
<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text">Add</button>
But for some reason it does not change anymore if I try to add a font awesome icon:
<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i>Add</button>
What could be the cause?
I ran your code. It seems the problem is that you are checking if your modal_button_update button's innerHTML is equal to Add. The original button:
<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text">Add</button>
works because the innerHTML of your modal_button_update is exactly 'Add', but your modified modal_button_update: <button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i>Add</button> does not work because the innerHTML is <i class="fas fa-save" aria-hidden="true"></i>>Add which is not equal (===) to 'Add'.
Here's three different ways I chose to solve this issue:
Remove the <i class="fas fa-save" aria-hidden="true"> element and place the font-awesome icon inside the button class like: <button type="button" class="btn btn-primary save_button add_group fas fa-save" id="modal_button_text">Add</button>
`
Alter your Javascript to look something like: var modal_button_update = document.getElementById("modal_button_text"); if (modal_button_update.innerHTML.includes("Add")) { modal_button_update.innerHTML = "Update"; }
Here the button checks to see if the innerHTML contains 'Add'.
Keeping the font-awesome icon:
In the two solutions above, your Javascript code will strip the button element of the font-awesome class when successfully changing the innerHTML to 'Update'. It is, imo, easier to use jQuery to alter the value of the button to solve this issue like:
---HTML---
<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i>Add</button>
---Javascript--
if ($('#modal_button_text').html().includes("Add")) {
$('#modal_button_text').html("Update");
}
If your intent is to keep the icon no matter the state of the text (i.e., Add or Update), I would personally enclose the word "Add" in a span as follows:
HTML:
<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i><span id="modal_button_span">Add</span></button>
Then it is just a matter of whether you use jQuery or not as to which of the following will work for you.
JavaScript:
Change value based on current text:
if(document.getElementById("modal_button_span").innerHTML === "Add") document.getElementById("modal_button_span").innerHTML = "Update";
Toggle value when the button is clicked based on current text:
document.getElementById("modal_button_span").innerHTML = document.getElementById("modal_button_span").innerHTML === "Add" ? "Update" : "Add";
jQuery:
Change value based on current text:
if($("#modal_button_span").html() === "Add") $("#modal_button_span").html("Update");
Toggle value when the button is clicked based on current text:
$("#modal_button_span").html($("#modal_button_span").html() === "Add" ? "Update" : "Add");
By enclosing the word Add in a span, you are free to do whatever you need to the text without disrupting the rest of the button or save icon.
I have an array of objects with delete button hidden when page loads. Now I want to show the delete button when new object is pushed to the array, the existing objects button should still remain hidden. How do I hide existing buttons and only show new object delete button.
html
<div>
<table >
<tr>//.....</tr>
<tr *ngFor="list of Array1">
<td><button type="button" class="btn btn-danger"
(click)=remove(i) [disabled]="disabled">
<i class="glyphicon glyphicon-remove"></i>
</button></td>
<td>{{list.type}}</td>
<td>{{list.year}}</td>
</tr>
</table>
</div>
<div>
<table >
<tr>//.....</tr>
<tr *ngFor="list of Array2">
<td><button type="button" class="btn btn-secondary"
(click)=addObj(i)>
<i class="glyphicon glyphicon-plus"></i>
</button></td>
<td>{{list.type}}</td>
<td>{{list.year}}</td>
</tr>
</table>
</div>
Here is the code used for adding new object from another array:
ts
//..
disabled = false;
....
addObj(index) {
// is there a way I can enable the delete button of just the index pushed?
this.Array1.push(this.List[index]);
this.List.splice(index, 1)
}
Define a variable to show/hide the button
isDisabled = true;
Then change the variable state in your code where you are pushing new items to the array. It could be any method or inside subscriber etc.
this.isDisabled = false; // or this.isDisabled = !this.isDisabled;
then in your button bind disabled attribute with this isDisabled variable.
[disabled]="isDisabled"
Complete Button Example
<button (click)="delete(item.id)" [disabled]="isDisabled">Delete</button>
try this
<button type="button" class="btn btn-danger"
(click)=remove(i) [disabled]="!show">
<i class="glyphicon glyphicon-remove"></i>button
</button>
//..
show = false;
....
addObj(index) {
// is there a way I can enable the delete button of just the index pushed?
this.Array1.push(this.List[index]);
this.show = true;
this.List.splice(index, 1)
}
Create a dummy array containing the index of newly added object. And then make condition on that array in *ngIf.
Html
<button type="button" class="btn btn-danger"
(click)=remove(i) *ngIf="deleteButtonShowIndex.indexOf(i) !== -1">
<i class="glyphicon glyphicon-remove"></i>
</button>
Component
deleteButtonShowIndex = [];
addObj(index) {
deleteButtonShowIndex.push(index);
this.Array1.push(this.List[index]);
this.List.splice(index, 1)
}
The better approach I will suggest is to maintain a flag in this.Array1 as shown below:
this.Array1 = [{
show: false,
data: {}
},
{
show: false,
data: {}
},
{
show: true,
data: {}
}
];
Declare a property showButton which will be used to decide whether button will be displayed or not. And when you insert a new record make this showButton property to true which will lead to show the button like shown in the demo. Then in your template you can easily use *ngIf to decide whether to show the button or not.
app.component.html
<button (click)="addButtonHandler()">
add record
</button>
<table >
<tr>
<th>Name</th>
<th>Action</th>
</tr>
<tr *ngFor = "let val of item">
<td>{{val.name}}</td>
<td *ngIf="val.showButton"><button>click me</button></td>
</tr>
</table>
app.component.ts
name = 'Angular';
item:Item[]=[]
constructor(){
this.item.push({
'name':'Monica',
'showButton':false
})
this.item.push({
'name':'Rachel',
'showButton':false
})
}
addButtonHandler(){
this.item.push({
'name':'phoebe',
'showButton':true
})
}
Working demo: link
I have got:
<p><a class="btn btn-default" href="~/Person">List of Cients »</a></p>
I would like to replace it with HTML Action Link but don't change visual style.
I want to get to Index Action of PersonController:
public class PersonController : Controller
{
private PersonContext db = new PersonContext();
// GET: Person
public ActionResult Index()
{
return View(db.Persons.ToList());
}
}
How the #Html.ActionLink(...) should look like.
EDIT:
I tried:
<p><a class="btn btn-default" href="~/Person">List of Cients »</a></p>
#Html.ActionLink("List of Clients »", "Index", "Person", new { #class = "btn btn-default" })
There is the problem with: » ActionLink does not renders preetty arrow.
EDIT2:
Tried this with no result: #Html.ActionLink("List of Clients " + HttpUtility.HtmlDecode("»"), "Index", "Person", new { #class = "btn btn-default" })
EDIT:
Both don't work.
<p> #Html.ActionLink("List of Clients »", "Index", "Person", new { #class = "btn btn-default" })</p>
<p> #(Html.ActionLink("List of Clients »", "PersonController/Index", new { #class = "btn btn-default" }));
First gives right style but when I click I get length=6 in the link.
Second does not have style and links to: http://localhost:17697/Home/PersonController/Index?class=btn%20btn-default
ANSWER: This one works:
<p> #Html.ActionLink("List of Clients »", "Index", "Person", null, new { #class = "btn btn-default" })</p>
#(Html.ActionLink("Title", "/PersonController/Index", new { #class = "myCssClass" }));
Here's a link for reference: http://msdn.microsoft.com/en-us/library/dd492124(v=vs.108).aspx
Please try this, it will work
<a href="#Url.Action("Index", "Person")">
<button class="btn btn-default">
List of Cients »
</button>
</a>
try this
#Html.ActionLink("ButtonText", "Action","Controller", new {#class="btn btn-default"})
it's what worked for me.
NB. the new {#class="btn btn-default"} goes after the 3rd comma.
<pre>
<p>I will display »</p>
<div>
#Ajax.ActionLink("Contact " + HttpUtility.HtmlDecode("»"),
"_PartialEmployeeIndex", "Employee",
new AjaxOptions() { UpdateTargetId = "divToUpdate" },
new { #class = "btn btn-primary" })
</div>
</pre>
I have the following code generated by default from asp.net mvc
#Html.ActionLink("Details", "Details", new { item.ORG_ID })
But I am using an open source web template where I can display a user friendly button such as:-
<a class="btn btn-success" href="#">
<i class="icon-zoom-in icon-white"></i>
View
</a>
So my question is ; how I can convert the html.actionlink to be <A> link
Regards
<a class="btn btn-success" href="#Url.Action("Details", new { item.ORG_ID })">
<i class="icon-zoom-in icon-white"></i>
View
</a>
how can i create a popup with MVC bootstrap?
I have this code, when I click on "generate password" calls to a function (it´s in my controller Admin) and it returns me a string. How can i display the string in a popup window??
<div class="editor-field" title="User Password">
<a class="btn btn-primary btn-small" href="#"
onclick="location.href='#Url.Action("GeneratePsw", "Admin", null)'; return false;">
<i class="icon-lock icon-white"></i> Generate password
</a>
</div>
Since event listeners are better than click events, I'd probably do something like this:
<div class="editor-field" title="User Password">
<a id="pwd_gen" class="btn btn-primary btn-small" href="#">
<i class="icon-lock icon-white"></i> Generate password
</a>
</div>
$(function() { // document.ready shorthand
$('#pwd_gen').click(function() {
var myPwd = $(this).location.href='#Url.Action("GeneratePsw", "Admin", null);
alert(myPwd); // or however you want to handle it with Bootstrap
});
});
$(document).on("click", ".open-ShowPwdDialogUser", function () {
var pwd="";
$.get("#Url.Action("GeneratePsw", "Admin")",function(data){
pwd=data;
$(".modal-body #pwdUser").val(pwd);
$('#1').modal('show');
});
})