Description:
In this example
we explain that how to call jQuery function on Html.ActionLink click in Asp.Net
MVC.or how to call jQuery function on click of the Html.ActionLink link button
in Asp.Net MVC.or how to call client side function on click on Html.ActionLink
in MVC.or how to implement the Html.ActionLink in Razor view to call the jQuery
function in MVC.
public ActionResult Index()
{
NorthwindEntities entities = new NorthwindEntities();
return
View(entities.Employees.ToList());
}
View:
@model
IEnumerable<Employee>
@{
Layout = null;
WebGrid webGrid = new WebGrid(source:
Model, canSort: false);
}
<!DOCTYPE html>
<html>
<head>
<title>Call
jQuery function on Html.ActionLink click in ASP.Net MVC</title>
</head>
<body>
@webGrid.GetHtml(
htmlAttributes: new { @id = "WebGrid",
@class = "Grid" },
columns: webGrid.Columns(
webGrid.Column("EmployeeID", "Employee Id"),
webGrid.Column("EmployeeName", "Employee Name"),
webGrid.Column("City", "City"),
webGrid.Column("Country",
"Country"),
webGrid.Column(null, null,
format: @<text>@Html.ActionLink("Select", null, null,
new { @class = "select" })</text>)
))
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("body").on("click", ".select",
function () {
var
row = $(this).closest("tr");
var
message = "Selected Row:";
message += "\n\nEmployee
Id: " + row.find("td").eq(0).html();
message += "\nEmployee
Name: " + row.find("td").eq(1).html();
message += "\nCity:
" + row.find("td").eq(2).html();
message += "\nCountry:
" + row.find("td").eq(3).html();
alert(message);
return
false;
});
</script>
</body>
</html>
0 comments:
Post a Comment