I want to use WebGrid to display data on a web page using an HTML table element
Please It also be demonstrate a custom formatting of columns, paging, sorting, and asynchronous updates via AJAX.
Thank you.
How to implement a WebGrid in ASP.NET MVC
Hi Everyone,
Hi Anupam,
You want to use WebGrid to display data on a web page using an HTML table element
Please It also be demonstrate a custom formatting of columns, paging, sorting, and asynchronous updates via AJAX.
Here, we have taken a "Student" model and i want to display all Student in WebGrid with a custom formatting of columns, paging, sorting, and asynchronous updates via AJAX.
Here, My Student Controller:
Now My StudentGrid View:
@{
ViewBag.Title ="StudentGrid";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />
<div id="dialog-alert" style="display: none">
<p>
Record Found
</p>
</div>
<div id="grid">
<table width="100%">
<tr>
<td>
<table>
<tr>
<td>Search By Name
</td>
<td>
<input type="text" id="txtName" />
</td>
<td>
<input type="button" id="bttnSearch" value="Search" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
@{
var grid = new WebGrid(Model, canPage: true, rowsPerPage: 4,
selectionFieldName:"selectedRow",
ajaxUpdateContainerId: "gridContent");
grid.Pager(WebGridPagerModes.All);}
@grid.GetHtml(tableStyle: "webGrid",
headerStyle:"header",
alternatingRowStyle:"alt",
selectedRowStyle:"select",
columns:
grid.Columns(grid.Column("FirstName", " FirstName"),grid.Column("LastName", "LastName")))
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#bttnSearch').click(function () {
var stuName = $('#txtName').attr('value');
$.ajax({
type:"post",
url:"/Student/StudentGrid",
data: { studentName: $('#txtName').attr('value') },
datatype:"json",
traditional:true,
success:function (data) {
// debugger
if (data == "No Record Found")
{
$("#dialog-alert").dialog('open');
}
else {
$('#gridContent').html(data);
$('#txtName').val(stuName);
}
}
});
});
});
$(document).ready(function () {
var url = "";
$("#dialog-alert").dialog({
autoOpen:true,
resizable:true,
height: 100,
width: 350,
show: { effect:'drop', direction: "up" },
modal:true,
draggable:true,
open:function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
},
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
});
});
</script>
Output:
For Searching Student Name: