On my mvc application the user can do search, I then store the result in a session then is displayed on a webgrid where my pagination works fine.
The issue is my advance search, which I implemented through a modal, the pagination does not work. Whenever I try to go to a different page it doesn't display anything.
This is what I have right now.
Controller
ActionResult Index(filter)
{
//Retrieve data from regular search
//Store in a session
//return session
}
ActionResult GetRegularGrid()
{
//retrieve regular search session
//return same session
}
ActionResult AdvanceSearch(filter)
{
//Retrieve data from advance search
//store in a session
//return advance search session to partial view
}
Index View
<script>
$(function () {
GetRegularGrid();
});
function GetRegularGrid() {
console.log();
$.ajax({
type: 'POST',
url: 'SearchController/GetRegularGrid',
success: function (response) {
$("#DataList").show();
$("#DataList").html(response);
$('#ASGrid').hide();
},
cache: false,
error: function (error) {
console.log(error);
}
});
<a href="#" style="font-weight: bold" class="btn" data-toggle="modal" data-target="#AdvSearch">Advance Search</a>
<br />
<div class="modal fade" id="AdvSearch">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">×</a>
<p style="font-weight: bold" class="modal-title">Advance Search</p>
</div>
<div class="modal-body">
<form id="AdvanceSearchForm">
@Html.Partial("AdvSearchForm")
</form>
</div>
<div class="modal-footer">
<table>
<tr>
<td><p align="left">% accepts wildcard</p></td>
<td width="320px"></td>
<td><input type="button" value="Search" class="btn btn-primary" id="ASearchbtn" /></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="ASGrid">
</div>
<script>
$(document).ready(function () {
$("#ASearchbtn").click(function () {
var form = $('#AdvanceSearchForm');
var ASData = $('#AdvanceSearchForm').serialize();
$.validator.unobtrusive.parse(form);
form.validate();
if (form.valid()) {
$("#ErrMsg").text("");
$.ajax({
type: "POST",
url: "/SearchController/AdvanceSearch",
data: ASData,
datatype: "html",
cache: false,
success: function (response) {
$("#AdvSearch").modal("hide");
$('#ASGrid').html('');
$('#ASGrid').html(response);
$('#ASGrid').show();
$("#DataList").hide();
$('.modal-backdrop').remove();
$('#noresult').hide();
},
error: function (error) {
$("#ErrMsg").text("Invalid search - Atleast one field is required.");
console.log(error);
}
});
}
$(document).ajaxComplete(function () {
$('tbody tr').hover(function () {
$(this).toggleClass('clickable');
}).on('dblclick', function () {
var sid = $(this).find('td:eq(0)').text();
$("#subId").val(sid);
})
return false;
});
return false;
});
});
</script>
I change POST to GET to fix this issue and it works now
<script>
$(document).ready(function () {
$("#ASearchbtn").click(function () {
var form = $('#AdvanceSearchForm');
var ASData = $('#AdvanceSearchForm').serialize();
$.validator.unobtrusive.parse(form);
form.validate();
if (form.valid()) {
$("#ErrMsg").text("");
$.ajax({
type: "GET",
url: "/SearchController/AdvanceSearch",
data: ASData,
datatype: "html",
cache: false,
success: function (response) {
$("#AdvSearch").modal("hide");
$('#ASGrid').html('');
$('#ASGrid').html(response);
$('#ASGrid').show();
$("#DataList").hide();
$('.modal-backdrop').remove();
$('#noresult').hide();
},
error: function (error) {
$("#ErrMsg").text("Invalid search - Atleast one field is required.");
console.log(error);
}
});
}
$(document).ajaxComplete(function () {
$('tbody tr').hover(function () {
$(this).toggleClass('clickable');
}).on('dblclick', function () {
var sid = $(this).find('td:eq(0)').text();
$("#subId").val(sid);
})
return false;
});
return false;
});
});
</script>