asp.netajaxasp.net-mvc

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


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?


Solution

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