How can I use the Bootstrap Badge class to show a number next to the button? In this case I am using the #ActionLink. I've seen on the bootstrap page that I'm supposed to use a HTML span for the Badge.
Code:
<div class="row">
<div class="col-md-2">
<div class="list-group">
#Html.ActionLink("Home", "Index", "Home", null, new { #class = "list-group-item" })
#Html.ActionLink("Auto's", "Lijst", "Auto", null, new { #class = "list-group-item" })
#Html.ActionLink("Medewerkers", "Lijst", "Medewerker", null, new { #class = "list-group-item" })
<!--This one!--> #Html.ActionLink("Dagprogramma", "Dagprogramma", "Medewerker", null, new { #class = "list-group-item"} )
#Html.ActionLink("Contact", "Contact", "Home", null, new { #class = "list-group-item" })
</div>
</div>
You cannot include custom html markup inside the link markup generated by ActionLink helper method. What you can do is, write an anchor tag and include the span inside that. Use the Url.Action method to generate the correct relative url to the action method which you will use as the link's href attribute value.
#Html.ActionLink("Medewerkers", "Lijst", "Medewerker", null,
new { #class = "list-group-item" })
<a href="#Url.Action("Dagprogramma","Medewerker")"
class="list-group-item"> Dagprogramma <span class="badge">99</span>
</a>
#Html.ActionLink("Contact", "Contact", "Home", null,
new { #class = "list-group-item" })
Related
suppose you show a form using beginform
<div class="col-md-6">
<div class="form-group">
#Html.LabelFor(m => m.IsLock, new { #Class = "col-md-12 control-label" })
<div class="col-md-12">
#using (Html.BeginForm("ChangeLockUser", "UserAdmin", new { area = "Admin", id = Model.UserId }, FormMethod.Post))
{
#Html.AntiForgeryToken()
#Html.Hidden("returnUrl", Url.Action("Details", "UserAdmin", new { Area = "Admin", id = Model.UserId }))
<div class="input-group mb-3">
#Html.TextBox("LockStatus", Model.IsLock ? "غیر فعال" : "فعال", new { #class = "col-md-12 form-control", #readonly = "readonly" })
<div class="input-group-append">
<button type="submit" class="btn btn-outline-secondary">#(Model.IsLock ? "فعال شود" : "غیرفعال شود")</button>
</div>
</div>
}
</div>
</div>
before submitting I can easily change the Id in the post address so the form will manipulate another record!!!
is there any method to solve this security problem?
thank you
Don't use UserId in front-end, you can get the current logged in user in the Controller inside ActionResult like
using Microsoft.AspNet.Identity;
string currentUserId = User.Identity.GetUserId();
Get the UserId after submitting then use it.
I use modal to include new terms in dropdownlist.
<div class="form-group">
#Html.LabelFor(model => model.NatureKindID, "Kind of nature", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div id="divDropNatureKinds">
#Html.Action("ReloadDropDownListNatureKinds", "Modals")
</div>
#Ajax.ActionLink(" ", "CreateModalNatureKinds", "Modals", null, new AjaxOptions { UpdateTargetId = "modaldropbody", OnComplete = "openModal" }, new { #class = "glyphicon glyphicon-plus" })
#Html.ValidationMessageFor(model => model.NatureKindID, "", new { #class = "text-danger" })
</div>
And Also in the main form has a div where modal is building:
<div class="modal fade" id="modaldrop" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div id="modaldropbody" class="modal-body">
</div>
</div>
</div>
And also an script:
#section scripts {
<script>
function openModal() {
$("#modaldrop").modal()
}
</script>
}
When user hit the Action Link the "CreateModalNatureKinds" modal is open. It is a simple form and works well.
New nature types are saved in the database and everything is fine at this point.
So from this form I'll just show the script triggered by the close button that closes the modal and triggers reloading of the dropdownlist div from the main screen
<script>
$("#btnClose").click(function () {
$("#divDropNatureKinds").load("/Modals/ReloadDropDownListNatureKinds");
$("#modal").close;
});
</script>
ReloadDropDownListNatureKinds have only:
#{
Layout = null;
}
#Html.DropDownList("NatureKindID", null, "Select one", htmlAttributes: new { #class = "form-control" })
And Controller ActionResult is:
public ActionResult ReloadDropDownListNatureKinds(int? idNatureKind)
{
if (idNatureKind == null)
ViewBag.NatureKindID = ListToDropDown();
else
{
ViewBag.NatureKindID = ListaToDropDown(idNatureKind);
}
return PartialView();
}
public SelectList ListToDropDown()
{
return ListToDropDown(null);
}
public SelectList ListaToDropDown(int? idNatureKind)
{
var list = db.NatureKinds
.Select(u => new
{
Text = u.NatureName,
Value = u.ID
}).ToList();
SelectList ret = new SelectList(list.OrderBy(x => x.Text), "Value", "Text", idNatureKind);
return ret;
}
And the structure was:
To be clear. ALL THIS WORKS PERFECTLY.
But, my project was getting very big. A mix of over 50 controllers and more than 250 views. So I decided to look for some way to organize and I found a post about Areas.
I created 5 areas and moved models, controllers and views for each of them.
And now the structure is:
I put in the main View the references of the area where the modal is:
<div class="form-group">
#Html.LabelFor(model => model.NatureKindID, "Kind of nature", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div id="divDropNatureKinds">
#Html.Action("ReloadDropDownListNatureKinds", "Modals", new { area = "Admin" })
</div>
#Ajax.ActionLink(" ", "CreateModalNatureKinds", "Modals", new { area = "Admin" }, new AjaxOptions { UpdateTargetId = "modaldropbody", OnComplete = "openModal" }, new { #class = "glyphicon glyphicon-plus" })
#Html.ValidationMessageFor(model => model.NatureKindID, "", new { #class = "text-danger" })
</div>
</div>
With this new structure, most features are working well. When I click ActionLink, the modal opens. In the modal, when registering a new type of nature, it is registered in the database.
When I click the modal close button, the ActionResult ReloadDropDownListNatureKinds is executed and the new list is loaded with the new Nature type that was created.
All of this has been tested.
But the list in the main View is not updated, it does not receive the new list.
It is as if the ViewBag.NatureKindID that receives the new list is not the same as that used in the Main View, it continues with the old list.
Any suggestion? Thanks in advance for any help.
Action link #class="info" not working for css
#Html.ActionLink("Click Here", "Details", "Product", new { id = item.ProductId, #class="info" },null)
Html page source
Click Here
Update:
on the other hand
if i set #Html.ActionLink("link here", "Details", "Product", new { id = item.ProductId}) then generate this link localhost:18715/Home/Details?Length=7 why? and it is not working
if i set #Html.ActionLink("link here", "Details", "Product", new { id = item.ProductId},null)
it is working perfectly generate this link http://localhost:18715/Product/Details/17
what i am missing for each link
You have to write hmtl attributes like this:
#Html.ActionLink("Click Here", "Details", "Product", new { id = item.ProductId }, new { #class = "info"})
#Html.ActionLink("Back", "Index", " ", new { #class = "col-sm-3 btn btn-outline-secondary btnfs btn-sm" })
Here more than one CSS calls is attached to the for ActionLink. This is For
Asp.net MVC
I have the following code which looks into the "ProductCatalog" and returns items if found.
I need to edit the code in order for me to be able to enter multiple values or even special characters like >, <, and, or.
Is this possible?
<div class="search">
#*#using (Html.BeginForm("Search", "ProductCatalog", FormMethod.Get, new { name = "quickSearchform" }))*#
#using (Html.BeginForm("Search", "ProductCatalog", FormMethod.Get, new { name = "searchform", id = "searchform", onsubmit = "return validateSearch();" }))
{
#Html.TextBox("criteria", "Search", new
{
#class = "searchbox",
onfocus = "if (this.value==this.defaultValue) {this.value = ''}",
onblur = "if (this.value=='') {this.value = this.defaultValue}"
})
<a class="btn btnStyleC btn-search quickSearch" href="javascript:searchSumbitOnClick();">Search</a> #*<a class="btn btnStyleC btn-search" href="javascript:searchSumbitOnClick();">Search</a>*# } </div>
I am very new to MVC and have Novice's knowledge about MVC.
I am creating an MVC application, where I have this page which displays Events taking place in a particular time.
Now when I select the event from the drop-down list, I get the specific event's details. Now along with that specific event's description, I need to get the feedback people has entered for that specific event.
Here is my View :
<div>Home >> Events</div>
<br />
<%:Html.LabelFor(m => m.Event)%>
<%:Html.DropDownListFor(m => m.Event.SelectedValue, Model.Event.GetSelectList(), new { id = "EventDropDown"})%>
<br /><br />
<div id="result" style="color: Green; border: 1px null transparent; ">
<%Html.RenderPartial("~/Views/PartialViews/EventsPartial.ascx"); %>
</div>
<%:Ajax.ActionLink("view", "viewFeedback", "Home", new AjaxOptions { UpdateTargetId = "comments" }, new {eventid=Model.Event.SelectedValue})%>
<div id="comments" style="color: Green; border: 1px null transparent;">
<%Html.RenderPartial("~/Views/PartialViews/FeedbackPartial.ascx"); %>
</div>
Can anyone please suggest how do I pass that event's ID in its ActionLink?
Thanks in advance
You can pass values with Html.ActionLink using routeValues in the parameter.
For example:
// VB
#Html.ActionLink("Link Text", "MyAction", New With {.eventId = 1})
// C#
#Html.ActionLink("Link Text", "MyAction", new {eventId = 1})
Might produce the link:
http://localhost/MyAction?eventId=1
u have to use ajax function for this:
$('youractionlinkid').click(function () {
var id = $('#yourdropdownid').val();
$.ajax({
url: this.href,
type: 'GET',
data: { id:id },
cache: false,
success: function (result) {
//do some action here
}
});
return false;
});
Razor will take AJAX this way also:
<div class="editorholder">
#Html.DropDownListFor(model => model.Display_ID, new SelectList(Model._listAllDisplayViewModel.ListAllDisplayInfo, "DisplayID", "DisplayName"), "Select.....", new { #class = "form-control", #id = "DisplayID", #onchange = "DisplayInfo();" })
</div>
<div class="editor-field">
<div id="DisplayView">
#Html.Partial("_DisplayView", Model._displayViewModel)
</div>
</div>
function DisplayInfo() {
$("#DisplayView").load('#(Url.Action("_DisplayView", "Display", null, Request.Url.Scheme))?id=' + $("#DisplayID").val());
};