Main view get called again after a partial view has been returned through ajax call

Question

I have a view which job is to display a list of orders currently stored in the BD. It works like this:

/// 
/// Displays the list of all the suppliers orders filled by now.
/// 
/// 
public ActionResult CheckoutSupplierOrders()
{
    int totalCount;

    List listOrders = mOrderManager.ListSupplierOrders(out totalCount);

    Session[CHECKOUT_PAGE_INDEX] = General.CreatePageIndex(totalCount);

    Session[CHECKOUT_PAGE_NUMBER] = 1;

    return View(listOrders);
}

Here's how the view is rendered:

@model List

@{
    ViewBag.Title = "Supplier Orders";
}




    List supplier orders





@{
    Html.RenderAction("FilterSupplierOrders", "PartialViews");
}

@{
    int pageNumber = (int)Session["checkoutOrderPageNumber"];

    @Html.Hidden("pageNum", pageNumber, new { @id = "pageNum" })
}


    @{
        Html.RenderPartial("CheckoutResultTable", Model);
    }

The script is there to catch the filters rendered by the @{ Html.RenderAction("FilterSupplierOrders", "PartialViews"); } line. To avoid a missing bug, here's how the filters work:

public ActionResult FilterSupplierOrders()
{
    return PartialView("Filters/FilterSuppliersOrders", new SupplierOrdersFilter());
}

And the partial view:

@model MagicAdmin2.Utility.PageFilters.SupplierOrdersFilter

@using (Html.BeginForm())
{
    
        Filters
        Filter by Order Type: @Html.DropDownListFor(_item => _item.OrderType, Model.ListOrderTypes, "All", new { @id = "orderType"})
        Description: @Html.TextBoxFor(_item => _item.Description, new { @id = "orderDesc"})
        Date Created: @Html.DropDownListFor(_item => _item.DateCreatedSymbol, Model.SymbolList, String.Empty, new { @id = "orderCreatedSymbol"}) @Html.TextBoxFor(_item => _item.DateCreated, new { @class = "datePicker", @title = "Choose a date", @id = "orderCreated"})
        Date Modified: @Html.DropDownListFor(_item => _item.DateModifiedSymbol, Model.SymbolList, String.Empty, new { @id = "orderModifiedSymbol"}) @Html.TextBoxFor(_item => _item.DateModified, new { @class = "datePicker", @title = "Choose a date", @id = "orderModified"})
        
    
}

So the reason being that the rest of the view is rendered in the CheckoutResultTable partial view:

@using MagicAdmin2.Utility.Data
@model List

@if (Model.Count > 0)
{
    @Html.Hidden("sortOrder", Session["checkoutOrderSort"], new { @id = "sortOrder"})

    if (Session["checkoutOrderPagesIndex"] != null)
    {
        
            Pages:
            @{
                List pages = (List)Session["checkoutOrderPagesIndex"];

                int inventoryPageNumber = (int)Session["checkoutOrderPageNumber"];

                if (pages.Count <= 10)
                {
                    foreach (int page in pages)
                    {
                        if (page == inventoryPageNumber)
                        {
                            @page
                        }
                        else
                        {
                            @page    
                        }
                    }
                }
                else
                {
                    for (int i = 0; i < pages.Count; i++)
                    {
                        int pageToShow = pages[i];

                        if (pageToShow == pages[0] || pageToShow == pages[pages.Count - 1])
                        {
                            if (pageToShow == inventoryPageNumber)
                            {
                                @pageToShow
                            }
                            else
                            {
                                @pageToShow    
                            }
                        }
                        else
                        {
                            if (pageToShow == inventoryPageNumber)
                            {
                                @pageToShow
                            }
                            else if (pages[i] > inventoryPageNumber - 4 && pages[i] < inventoryPageNumber + 5)
                            {
                                @pageToShow    
                            }
                            else if ((pages[i] == 2 && inventoryPageNumber > 4) || (pages[i] == pages.Count - 1 && inventoryPageNumber < pages.Count - 2))
                            {
                                ...
                            }
                        }
                    }
                }
            }
             
    }
    
        @for (int i = 0; i < Model.Count; i++)
        {
            var className = i % 2 == 0 ? "even" : "odd";

            
        }
    
        
            
                ID
            
            
                Date Created
            
            Description
            Date Modified
            
                Type
            
            
                State
            
            Shipping
            Billing
            
                # Items
            
            Prices and charges
            Actions
        

                @Html.DisplayFor(_item => _item[i].mOrderID)
                @Html.DisplayFor(_item => _item[i].mOrderDateCreated)
                @Html.DisplayFor(_item => _item[i].mOrderDescription)
                @(Model[i].mOrderDateModified != null ? Html.DisplayFor(_item => _item[i].mOrderDateModified)
                          : Html.Label(ValueDomain.FIELD_UNAVAILABLE))
                @Html.DisplayFor(_item => _item[i].mOrderType)
                @Html.DisplayFor(_item => _item[i].mOrderState)
                
                    Name:        @Model[i].mShippingFirstName

                    Address:     @Model[i].mShippingAddress

                    City:        @Model[i].mShippingCity

                    Country:     @Model[i].mShippingCountry

                    Region:      @Model[i].mShippingRegion

                    Postal Code: @Model[i].mShippingPostalCode

                
                
                    Name:        @Model[i].mBillingLastName

                    Address:     @Model[i].mBillingAddress

                    City:        @Model[i].mBillingCity

                    Country:     @Model[i].mBillingCountry

                    Region:      @Model[i].mBillingRegion

                    Postal Code: @Model[i].mBillingPostalCode

                
                @Model[i].mOrderItemCount
                
                    Detail Amount: @Html.DisplayFor(_item => _item[i].mOrderDetailAmount) $

                    Taxes:         @Html.DisplayFor(_item => _item[i].mOrderTaxes) $

                    Shipping Cost: @Html.DisplayFor(_item => _item[i].mOrderShippingCost) $

                    Handling Cost: @Html.DisplayFor(_item => _item[i].mOrderHandlingCost) $

                    @Html.ActionLink("Item Total", "DisplaySupplierOrdersToCheckout", new { @_sortOrder = ViewBag.TotalSortParm } ):    @Html.DisplayFor(_item => _item[i].mOrderTotal) $

                
                @Html.ActionLink("Confirm reception", "SelectOrder", new { _orderID = Model[i].mOrderID })
            
    if (Session["checkoutOrderPagesIndex"] != null)
    {
        
            Pages:
            @{
                List pages = (List)Session["checkoutOrderPagesIndex"];

                int inventoryPageNumber = (int)Session["checkoutOrderPageNumber"];

                if (pages.Count <= 10)
                {
                    foreach (int page in pages)
                    {
                        if (page == inventoryPageNumber)
                        {
                            @page
                        }
                        else
                        {
                            @page    
                        }
                    }
                }
                else
                {
                    for (int i = 0; i < pages.Count; i++)
                    {
                        int pageToShow = pages[i];

                        if (pageToShow == pages[0] || pageToShow == pages[pages.Count - 1])
                        {
                            if (pageToShow == inventoryPageNumber)
                            {
                                @pageToShow
                            }
                            else
                            {
                                @pageToShow    
                            }
                        }
                        else
                        {
                            if (pageToShow == inventoryPageNumber)
                            {
                                @pageToShow
                            }
                            else if (pages[i] > inventoryPageNumber - 4 && pages[i] < inventoryPageNumber + 5)
                            {
                                @pageToShow    
                            }
                            else if ((pages[i] == 2 && inventoryPageNumber > 4) || (pages[i] == pages.Count - 1 && inventoryPageNumber < pages.Count - 2))
                            {
                                ...
                            }
                        }
                    }
                }
            }
             
    }
}
else
{
    There are no orders to checkout.
}

is because if the use at that moment choose to filter the obtained data, say, by name, he may, using a jquery method that calls the controller method:

public PartialViewResult GetSuppliersNextPage(int _pageNumber, string _orderType, string _orderDesc, string _dateCreated, string _dateCreatedSymbol,
                                            string _dateModified, string _dateModifiedSymbol, string _sortOrder)
{
    int totalCount;

    string sortOrder;

    if (Session[CHECKOUT_SORT_ORDER] == null)
    {
        sortOrder = _sortOrder;

        Session[CHECKOUT_SORT_ORDER] = _sortOrder;
    }
    else
    {
        sortOrder = (string)Session[CHECKOUT_SORT_ORDER];

        switch (_sortOrder)
        {
            default:
                sortOrder = _sortOrder;
                break;
        }
    }

    ISupplierOrderParams filterParams = new SupplierOrderParams(_pageNumber, _orderType, _orderDesc, _dateCreated, _dateCreatedSymbol, _dateModified, _dateModifiedSymbol, sortOrder);

    List listItems = mOrderManager.ListSupplierOrdersNextPage(filterParams, out totalCount);

    Session[CHECKOUT_PAGE_INDEX] = General.CreatePageIndex(totalCount);

    Session[CHECKOUT_PAGE_NUMBER] = _pageNumber;

    return PartialView("CheckoutResultTable", listItems);
}

My main trouble is that the method is called appropriately and does it rendering. However right after the rendering of the partial view is done, the CheckoutSupplierOrders() controller method is called (WHY?!?), thus destroying the purpose of the ajax call. And I don't know why this occurs.

Andrei · Accepted Answer

Looks like the problem is that the button, when clicked, not only triggers the load of the partial view, but also submits the form. After the form is submitted and the response from server is received (response being the same page), browser renders this response and you see exactly the same page you are on.

To avoid such behavior, prevent it in the click handler:

$('#fetchButton').click(function (e) {
    e.preventDefault();

Main view get called again after a partial view has been returned through ajax call

Answers (1)

Related Questions