MVC WebGrid paging action changing upon navigation - asp.net-mvc

Question

I'm working in an MVC app that is using a webgrid with paging. The grid itself is rendered in a partial view called _Results.cshtml and is rendered in a div on the index.cshtml page using
Html.RenderPartial("_Results", Model.Results);
The partial grid as well as a few other form controls on index.cshtml are wrapped in a form called ResultsAction using:
#using (Ajax.BeginForm("ResultsAction", "Results", new AjaxOptions.....
When intially navigating to the index.cshtml, the grid populates as expected and hovering over any of the paging links correctly display:
http://localhost/ResultsAction?page=<page#>
Each row in the grid has a link to a detail page. This works as expected and the detail page has a link to return to the result grid using:
#Html.ActionLink("Return To Results", "Index", "Results")
Now the problem. This redirects me back to the Index.cshtml just fine but now when I hover over any of the paging links in the grid, they incorrectly are using:
http://localhost/Index?page=<page#>
Which is the wrong controller action so paging no longer functions. My understanding was the paging links should issue a Get using the form name as the action, yet it's being overridden somehow when I navigate to detail then back again. Does anyone know what's causing this behavior or how I can specify the paging links to always use the same controller action?
EDIT: Posting code of partial view as requested:
#model IEnumerable<ispPR_GetInquiryRecords_Result>
#{
Layout = null;
}
<input id="searchListCnt" type="hidden" value="#Model.Count()" />
<div id="gridSearch">
#{
var grid = new WebGrid(selectionFieldName: "SelectedRow", canSort: false, canPage: true, rowsPerPage: 10, ajaxUpdateContainerId: "gridSearch");
var virtualCount = Model != null && Model.Count() > 0 ? Model.First().VirtualCount : 0;
grid.Bind(Model, rowCount: (int)virtualCount, autoSortAndPage: false);
}
<div id="gridContent">
#grid.GetHtml(
htmlAttributes: new { id = "inqgrid" },
tableStyle: "webGrid",
fillEmptyRows: false,
footerStyle: "gridFooter",
displayHeader: true,
alternatingRowStyle: "alt",
selectedRowStyle: "select",
mode: WebGridPagerModes.All,
columns: grid.Columns(
grid.Column("PriceStatus",header:"Price Status"),
grid.Column("CustomerName","Customer Name"),
grid.Column("EndUserName", "End User"),
grid.Column("ContractNumber","Contract"),
grid.Column("PriceLevel", "Level"),
grid.Column("ProductDescription", "Product Code"),
grid.Column(
header: "Break Qty",
format: #<text>#item.QuantityBreak.ToString() / #item.QuantityBreakUOM </text>
),
grid.Column("BeginDate", "Begin Date", format: item =>string.Format("{0:d}", item.BeginDate)),
grid.Column("EndDate","End Date",format: item =>string.Format("{0:d}", item.EndDate)),
grid.Column(
header: "Price in PricingUOM",
format: item =>
{
var res = Html.FormatToDecimals((decimal)item.PriceInPricingUOM, (int)item.Numdecimals);
switch ((bool)#item.HasDetail)
{
case true:
return Html.ActionLink(res + " / " + (string)item.PricingUOM, "InquiryDetails", new { #id = #item.PriceMasterID }, new { #class = "item-link2", #id = "lnk_" + #item.PriceMasterID });
case false:
return Html.ActionLink(res+ " / " + (string)item.PricingUOM, null, null, new { onclick = "return NoDetailsDialog('" + #item.NoDetailReason + "')" });
}
return null;
}
),
grid.Column(
header: "Price Alt UOM",
format: #<text>#Html.FormatToDecimals((decimal)item.PriceInOrderUOM, (int)item.Numdecimals) / #item.OrderUOM </text>
),
grid.Column("Rolling12", "Rolling 12 Sales", format: #<text>#String.Format("{0:c0}", #item.Rolling12) </text>),
grid.Column("CMPercent", "Net CM ", format: #<text>#String.Format("{0:0.00} %", #item.CMPercent * 100) </text>)
))
</div>
</div>
<script type="text/javascript">
function NoDetailsDialog(message) {
alert(message);
return false;
}
</script>

Answer 1

You can use datatables. Please let me know how you progress with datatables and I can be available to help you through it,
I can even assist with razor syntax:
nuget DataTabes.net jquery plugin
bundles.Add(new StyleBundle("~/Content/CssGrid").Include(
"~/Content/DataTables/css/jquery.dataTables.min.css"));
bundles.Add(new ScriptBundle("~/bundles/JSGrid").Include(
"~/Scripts/DataTables/jquery.dataTables.min.js"));
JavaScript:
//perform tasks like initialize fields, show popup, and post to server
function DeleteMe()
function EditMe()
function Add()
Page:
$(document).ready(function() {
$('#theDataTable').DataTable();
} );
</script>
//button to show popup for add/edit here
<table id="theDataTable" class="display table table-striped table-bordered">
<thead>
<tr>
<th>Field Name A
</th>
<th>Field Name B
</th>
<th>Field Name C
</th>
</th>
<th>Delete
</th>
<th>Edit
</th>
</thead>
<tbody>
<% int rowCount = 0;
foreach (AClass item in Model.AClassList)
{ %>
<tr id="<%:rowCount%>">
<td><%:item.FieldA%></td>
<td><%:item.FieldB%></td>
<td><%:item.FieldC%></td>
<td>
<a href="#" title="Delete" class="btn btn-default btn-xs btn-block"
onclick="return DeleteMe('<%:item.Id%>')">Delete</a>
</td>
<td>
<a href="#" title="Edit" class="btn btn-default btn-xs btn-block"
onclick="return EditMe('',
'<%:item.FieldA %>',
'<%: Html.Encode(item.FieldB) %>',
'<%: Html.Encode(item.FieldC) %>')">Edit</a>
</td>
<% rowCount++;
} %>
</tr>
</tbody>
</table>

Answer 2

I have come across the same problem before. In my case it ended up being something to do with the MVC view resolver being scoped to the wrong folder due to calling a different controller than the one that had been used to construct the view which I was making the call in.
I know that's not much help, and it does seem peculiar as you have explicitly stated the controller name in your BeginForm statement. I had my mentor resolve the issue for me in the end, he did so by trial and error just commenting out the various lines until the problem was isolated.