Using the code below I can invoke the Controller fine when clicking on "Get total" text.
<div id="badge-total">
Get total
</div>
<script>
$("#badge-total").click(function () {
$.ajax({
url: '@Url.Action("ShowTotalGrid")',
dataType: "json",
type: "POST",
contentType: 'application/json; charset=utf-8',
cache: false,
data: {},
success: function (data) {
if (data.success) {
alert(data.message);
}
},
error: function (xhr) {
alert('error');
}
});
});
</script>
But, when trying to invoke by means of clicking the Badge nothing happens. Please advise on how to execute the ajax call using clicking on the badge.
<div class="badge-section">
@(Html.Kendo().ToolBar()
.Name("toolbar")
.Items(items =>
{
items.Add().Template(@"
<a class='k-button'>Total" +
Html.Kendo().Badge()
.Name("badge-total")
.Text(ViewBag.Total)
.ThemeColor(BadgeColor.Primary)
.Shape(BadgeShape.Rounded)
.Size(BadgeSize.Large)
.ToHtmlString() +
"</a>"
);
})
)
</div>