Paging, sorting, searching on Ajax View in asp.net mvc

Question

I'm using asp.net mvc 4 & EF 6 to make a website where I want a populated table for paging, sorting & filtering/search on a PartialView by Ajax. So far paging, sorting & search functionalities are working fine but I can't get it to Ajax where the table will only update instead of page reloading. Here are my codes,

Controller

public PartialViewResult Flats(string sortOrder, string currentFilter, string strSearch, int? page)
{
    ViewBag.currentSort = sortOrder;
    if (strSearch != null)
    {
        page = 1;
    }
    else
    {
        strSearch = currentFilter;
    }
    ViewBag.CurrentFilter = strSearch;

    ViewBag.TitleSort = String.IsNullOrEmpty(sortOrder) ? "title_desc" : "";
    var FlatsOrder = from f in rentdb.FlatInfoes select f;
    if (!String.IsNullOrEmpty(strSearch))
    {
        FlatsOrder = FlatsOrder.Where(s => s.address_area.Contains(strSearch));
    }
    switch (sortOrder)
    {
        case "title_desc":
            FlatsOrder = FlatsOrder.OrderByDescending(a => a.title);
            break;
        default:
            FlatsOrder = FlatsOrder.OrderBy(a => a.title);
            break;
    }
    int pageSize = 5;
    int pageNumber = (page ?? 1);
    return PartialView(FlatsOrder.ToPagedList(pageNumber, pageSize));
}

View

<div id="divTable" class="span12" style="background-color: #fff;">
    <table class="table table-hover">
        <thead style="background-color: #cccccc;">
            <tr>
                <th class="text-center">
                    @Ajax.ActionLink("Title", "Flats", new { sortOrder = ViewBag.TitleSort, currentFilter = ViewBag.CurrentFilter }, new AjaxOptions() {
                                            HttpMethod = "GET",
                                            UpdateTargetId = "divTable",
                                            InsertionMode = InsertionMode.Replace
                                        })
                </th>
            </tr>
        </thead>
    </table>
</div>

Whenever I click the Title link for sorting, whole page reloads and then sort. How can I just update the table by ajax and partialview? Need this help badly. Thanks.

yes, and also checked `web.config` for `ClientValidationEnabled` & `UnobtrusiveJavaScriptEnabled`. Both are true! — Shihan Khan, Oct 25 '15 at 05:53
Not sure what your link is going to do. Its not passing values for `strSearch` or `page` so it just going to keep generating the same view. — , Oct 25 '15 at 05:56
I've just given the code for sorting in `View`, if anyone can find solution for that then I can do the rest. — Shihan Khan, Oct 25 '15 at 06:01

Hakan Fıstık · Accepted Answer · 2015-10-25T17:22:42.700

You have to make a normal View which contains a PartialView like the following

View

@model YourModelClass

@* some thing which will not effected when the Ajax request is done *@
@Html.Partial("_TablePartialView", Model)

Partial View which should named in this case as "_TablePartialView" and should exists in the "Shared" folder inside the "Views" folder.

@model YourModelClass

<div id="divTable" class="span12" style="background-color: #fff;">
  <table class="table table-hover">
    <thead style="background-color: #cccccc;">
        <tr>
            <th class="text-center">
                @Ajax.ActionLink("Title", "AjaxFlats", new { sortOrder = ViewBag.TitleSort, currentFilter = ViewBag.CurrentFilter }, new AjaxOptions() {
                                        HttpMethod = "GET",
                                        UpdateTargetId = "divTable",
                                        InsertionMode = InsertionMode.Replace
                                    })
            </th>
        </tr>
    </thead>
  </table>
</div>

Controller

private YourModelClass GetModel(string sortOrder, string currentFilter, string strSearch, int? page)
{
   ViewBag.currentSort = sortOrder;
   if (strSearch != null)
   {
      page = 1;
   }
   else
   {
      strSearch = currentFilter;
   }
   ViewBag.CurrentFilter = strSearch;

   ViewBag.TitleSort = String.IsNullOrEmpty(sortOrder) ? "title_desc" : "";
   var FlatsOrder = from f in rentdb.FlatInfoes select f;
   if (!String.IsNullOrEmpty(strSearch))
   {
       FlatsOrder = FlatsOrder.Where(s => s.address_area.Contains(strSearch));
   }
   switch (sortOrder)
   {
      case "title_desc":
         FlatsOrder = FlatsOrder.OrderByDescending(a => a.title);
         break;
       default:
         FlatsOrder = FlatsOrder.OrderBy(a => a.title);
         break;
   }
   int pageSize = 5;
   int pageNumber = (page ?? 1);
   return FlatsOrder.ToPagedList(pageNumber, pageSize);

}

public ActionResult Flats(string sortOrder, string currentFilter, string strSearch, int? page)
{
     return View(GetModel(sortOrder, currentFilter, strSearch, page);
}

public ActionResult AjaxFlats(string sortOrder, string currentFilter, string strSearch, int? page)
{
     return PartialView("_TablePartialView", GetModel(sortOrder, currentFilter, strSearch, page);
}

@can you please paste the PartialView and the OrgianlView that contains it. i think this is helpful in solving the problem — Hakan Fıstık, Oct 25 '15 at 06:42
Please notice that I'm using the same view, I just want to update the table on the same page instead of page reloading. — Shihan Khan, Oct 25 '15 at 06:50
@SinOscuras Now I understood your problem exactly. you have to redesign the View completely and Make one View which requested on normal (NOT ajax) request. and inside that view you have to make other PartialView which requested when the table must be refreshed. — Hakan Fıstık, Oct 25 '15 at 16:49
@SinOscuras I Updated the answer completely. please refer it this should work (as I hope) and if there is any question I am here to help — Hakan Fıstık, Oct 25 '15 at 17:23
I already found something way better but yours is almost similar to mine. I've given this as a correct answer as a token of appreciation! Thanks a lot for your help! :) — Shihan Khan, Oct 25 '15 at 18:17

Paging, sorting, searching on Ajax View in asp.net mvc

1 Answers1

Linked