I have implemented the "Contact Management ASP.NET MVC Application" with Razor view.
http://www.asp.net/mvc/tutorials/iteration-7-add-ajax-functionality-cs
Now I want to add Sorting and Searching functionality. And Paging too.
snapshot: -> http://www.freeimagehosting.net/daf63
I want to display the sorted and searched results inside the "green box", by click of a sort links and search button.
What changes do I need to perform?
My current Index Controller:
public ActionResult Index(int? id, string sortorder, string searchstring)
{
ViewBag.CurrentSort = sortorder;
ViewBag.disp = n2;
ViewBag.NameSortParm = String.IsNullOrEmpty(sortorder) ? "Namedesc" : " ";
ViewBag.NameSortParma = String.IsNullOrEmpty(sortorder) ? "Nameasc" : " ";
ViewBag.NameSortParmb = String.IsNullOrEmpty(sortorder) ? "Namedescx" : " ";
ViewBag.NameSortParmc = String.IsNullOrEmpty(sortorder) ? "Nameascx" : " ";
if (sortorder != null || searchstring != null)
{
var matches = cmu.Contacts.Where(a => a.GroupId == (int)id);
var contacts = from s in matches
select s;
if (!String.IsNullOrEmpty(searchstring))
{
contacts = contacts.Where(s => s.FirstName.ToUpper().Contains(searchstring.ToUpper()) || s.LastName.ToUpper().Contains(searchstring.ToUpper()));
}
switch (sortorder)
{
case "Namedesc":
contacts = contacts.OrderByDescending(s => s.FirstName);
break;
case "Nameasc":
contacts = contacts.OrderBy(s => s.FirstName);
break;
case "Namedescx":
contacts = contacts.OrderByDescending(s => s.LastName);
break;
case "Nameascx":
contacts = contacts.OrderBy(s => s.LastName);
break;
}
return PartialView("SearchSort", contacts.ToList());
}
// Get selected group
var selectedGroup = _service.GetGroup(id);
if (selectedGroup == null)
return RedirectToAction("Index", "Group");
// Normal Request
if (!Request.IsAjaxRequest())
{
var model = new IndexModel
{
Groups = _service.ListGroups(),
SelectedGroup = selectedGroup
};
return View("Index", model);
}
return PartialView("ContactList", selectedGroup);
}
My Index View:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@model New_Contact_Manager_with_Razor_View.Models.Validation.IndexModel
@using New_Contact_Manager_with_Razor_View.Helpers
<style type = "text/css">
#gallery {
border: 0.5px solid #1D0C16;
height: 150;
width: 150px;
display:inline-table;
border-spacing : 5px;
margin-bottom:5px;
border-style:outset;
}
</style>
<style type="text/css">
h1, h2, h3, h4, h5, h6, h7 {color:black}
</style>`
<script type="text/javascript">
function Showtdata(item) {
var elements = document.getElementsByClassName(item);
for (var i = 0, length = elements.length; i < length; i++) {
elements[i].style.visibility = "visible";
elements[i].style.display = "block";
}
}
function Cleartdata(item) {
var elements = document.getElementsByClassName(item);
for (var i = 0, length = elements.length; i < length; i++) {
elements[i].style.visibility = "hidden";
elements[i].style.display = "none";
}
}
</script>
<script type="text/javascript">
var _currentGroupId = -1;
Sys.Application.add_init(pageInit);
function pageInit() {
// Enable history
Sys.Application.set_enableHistory(true);
// Add Handler for history
Sys.Application.add_navigate(navigate);
}
function navigate(sender, e) {
// Get groupId from address bar
var groupId = e.get_state().groupId;
// If groupId != currentGroupId then navigate
if (groupId != _currentGroupId) {
_currentGroupId = groupId;
$("#divContactList").load("/Contact/Index/" + groupId);
selectGroup(groupId);
}
}
function selectGroup(groupId) {
$('#leftColumn li').removeClass('selected');
if (groupId)
$('a[groupid=' + groupId + ']').parent().addClass('selected');
else
$('#leftColumn li:first').addClass('selected');
}
function beginContactList(args) {
// Highlight selected group
_currentGroupId = this.getAttribute("groupid");
selectGroup(_currentGroupId);
// Add history point
Sys.Application.addHistoryPoint({ "groupId": _currentGroupId });
// Animate
$('#divContactList').fadeOut('normal');
}
function successContactList() {
// Animate
$('#divContactList').fadeIn('normal');
}
function failureContactList() {
alert("Could not retrieve contacts.");
}
</script>
@using New_Contact_Manager_with_Razor_View.Helpers
@{
ViewBag.Title = "Contacts";
}
<table>
<tr>
<td>
<h3>
<form>
<table>
<tr>
<td>
Display->      
<input type = "radio" value = "Display " name = "display" onclick= Showtdata("HD") />
</td>
</tr>
<tr>
<td>
Not Display->
<input type = "radio" value = "Not Display " name= "display" onclick= Cleartdata("HD") />
</td>
</tr>
</table>
</form>
</h3>
</td>
<td>
       
</td>
<td>
<b><strong>Sort :~> </strong></b>
<table>
<tr>
<td>
@Html.ActionLink("First Name Desc", "Index", new { sortorder = ViewBag.NameSortParm })
</td>
</tr>
<tr>
<td>
@Html.ActionLink("First Name", "Index", new { sortorder = ViewBag.NameSortParma })
</td>
</tr>
<tr>
<td>
@Html.ActionLink("Last Name desc", "Index", new { sortorder = ViewBag.NameSortParmb })
</td>
</tr>
<tr>
<td>
@Html.ActionLink("Last Name", "Index", new { sortorder = ViewBag.NameSortParmc })
</td>
</tr>
</table>
</td>
<td>
     
</td>
<td>
@using (Html.BeginForm())
{
<p>
<b>Find by name:</b> @Html.TextBox("searchstring")
<input type="submit" value = "search" />
</p>
}
</td>
</tr>
</table>
<ul id="leftColumn">
@foreach (var item in Model.Groups)
{
<li @Html.Selected(item.Id, Model.SelectedGroup.Id) >
@Ajax.ActionLink(item.Name, "Index", new { id = item.Id }, new AjaxOptions { UpdateTargetId = "divContactList", OnBegin = "beginContactList", OnSuccess = "successContactList", OnFailure = "failureContactList" }, new { groupid = item.Id })
</li>
}
</ul>
<div id="divContactList" >
@Html.Partial("ContactList", Model.SelectedGroup)
</div>
<div class="divContactList-bottom"> </div>
Is it possible to add sorting and searching functionality by AJAX or JavaScript?
Any help would be heartily appreciated. Thank You.
