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

Question

I'm using Asp.net mvc 4 and 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?

yes, and also checked web.config for ClientValidationEnabled & UnobtrusiveJavaScriptEnabled. Both are true! — Shihan Khan
– Shihan Khan, Commented Oct 25, 2015 at 5: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. — user3559349
– user3559349, Commented Oct 25, 2015 at 5: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
– Shihan Khan, Commented Oct 25, 2015 at 6:01

Hakan Fıstık · Accepted Answer · 2015-10-25 17:22:42Z

1

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);
}

edited Oct 25, 2015 at 17:22

answered Oct 25, 2015 at 6:15

Hakan Fıstık

19.9k16 gold badges124 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Shihan Khan Over a year ago

Thanks but this is not helping.

Hakan Fıstık Over a year ago

@can you please paste the PartialView and the OrgianlView that contains it. i think this is helpful in solving the problem

Shihan Khan Over a year ago

Please notice that I'm using the same view, I just want to update the table on the same page instead of page reloading.

Hakan Fıstık Over a year ago

@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 Over a year ago

@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

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related