Обратите внимание, что я попробовал почти все решения, которые я мог найти, по различным вопросам, уже доступным в Stack Overflow, но ни одно решение не помогло мне.
Поэтому, пожалуйста, не отмечайте это как дубликаты или голосование против. Пожалуйста, помогите с ситуацией, указанной ниже:
У меня есть JQGrid, который изначально загружает все данные из некоторой таблицы (SQL Db). Существует возможность отфильтровать данные, выбрав значения из выпадающего списка. Изменение выпадающего списка запускает Ajax-вызов на сервер, который возвращает отфильтрованные данные с сервера (MVC Controller). Тем не менее, когда данные возвращаются из контроллера, данные верны, но они не отражаются в JQGrid. Я пробовал все разные методы для запуска перезагрузки JQGrid, но ничего не работает.
Razor View / JQuery код:
@model IEnumerable<OSMPortalV2.Models.NetworkCertsATC_SP>
<!-- widget content -->
<div class="widget-body fuelux">
<form name="networkCertficates">
<!-- widget div-->
@{
List<SelectListItem> ddlistItems = new List<SelectListItem>();
ddlistItems.Add(new SelectListItem { Text = "All Certificates", Value = "All", Selected = true });
ddlistItems.Add(new SelectListItem { Text = "1 Day", Value = "1Day" });
ddlistItems.Add(new SelectListItem { Text = "5 Days", Value = "5Days" });
ddlistItems.Add(new SelectListItem { Text = "15 Days", Value = "15Days" });
ddlistItems.Add(new SelectListItem { Text = "30 Days", Value = "30Days" });
}
<div style="padding-bottom: 10px;">
Show certificates expiring in: @Html.DropDownList("ddlTimeFrame", new SelectList(ddlistItems, "Value", "Text"))
@*<button type="submit" class="btn btn-sm btn-primary btn-prev" id="btnPrev">
<i class="fa fa-refresh"></i> Reload Grid
</button>*@
</div>
</form>
<div style="width: 100%; overflow: auto;">
<table id="jqgrid"></table>
<div id="pjqgrid"></div>
</div>
<br>
</div>
<!-- end widget content -->
<!-- Style for Grid data load -->
<style type="text/css">
.ui-jqgrid .loading {
background-image: url("../../Content/img/ajax-loader.gif");
border: 2px solid #706457;
background-repeat: no-repeat;
background-color: ghostwhite;
border-radius: 10px;
top: 20%;
min-height: 102px;
min-width: 102px;
}
</style>
<script src="~/Scripts/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
// DO NOT REMOVE : GLOBAL FUNCTIONS!
/* Function to Get Profile Count */
$(document).ready(function () {
// Fronend UI Script
pageSetUp();
/* Function to Get Environment Details */
function GetEnvironment(ipAddress) {
}
var timeRange;
// Trigger reload Dropdown selection change event
$("#ddlTimeFrame").change(function () {
timeRange = $("#ddlTimeFrame option:selected").val();
// Callback operation to load filtered data
$.ajax({
type: 'GET',
contentType: "application/json",
url: '/Network/GetCertDetails',
data: {timeframe: timeRange},
success: function (returnedData) {
// This returns correct data but JQ Grid is not updated.
jQuery("#jqGrid").setGridParam({ datatype: 'json', data: returnedData }).trigger('reloadGrid');
var gridData = jQuery("#jqgrid").jqGrid('getRowData');
alert(gridData);
}
});
});
Date.prototype.addDays = function (days) {
this.setDate(this.getDate() + parseInt(days));
return this;
};
$.jgrid.defaults.loadtext = '';
jQuery("#jqgrid").jqGrid({
url: '/Network/GetCertDetails',
postData: {
timeframe: function () { return $("#ddlTimeFrame option:selected").val(); }
},
mtype: 'GET',
datatype: 'json',
height: 'auto',
colNames: ['Common Name', 'Certificate', 'Device', 'Expiry Date',
'Profile', 'Virtual', 'Partition', 'Pool',
'VIP', 'Virtual Port', 'Member Name', 'Member IP Address',
'Member Port', 'Environment', 'ATC Name', 'ATC Email ID'],
colModel: [
{ name: 'Common_Name', index: 'Common_Name', sortable: true, width: 200 },
{ name: 'Certificate', index: 'Certificate', sortable: true, width: 250 },
{ name: 'Device', index: 'Device', sortable: true },
{ name: 'Expiry_Date', index: 'Expiry_Date', formatter: 'date', formatoptions: { srcformat: 'd/m/Y', newformat: 'd/m/Y' }, sortable: true, align: "center"},
{ name: 'Profile', index: 'Profile', align: "left" },
{ name: 'Virtual', index: 'Virtual', align: "left" },
{ name: 'Partition', index: 'Partition', align: "left" },
{ name: 'Pool', index: 'Pool', align: "left" },
{ name: 'VIP', index: 'VIP', align: "left" },
{ name: 'Virtual_Port', index: 'Virtual_Port', align: "center", width: 90 },
{ name: 'Member_Name', index: 'Member_Name', align: "left" },
{ name: 'MemberIPAddress', index: 'MemberIPAddress', align: "left" },
{ name: 'Member_Port', index: 'Member_Port', align: "center", width: 90 },
{
name: 'MemberIPAddress', index: 'Environment', sortable: true, align: "left", formatter: function (cellvalue, options, rowObject) {
var IPAddress = cellvalue;
return GetEnvironment(IPAddress);
}
}, { name: 'ATCName', index: 'ATCName', align: "left" },
{ name: 'ATCEmail', index: 'ATCEmail', align: "left", width: 200 }
],
ajaxGridOptions: { cache: false },
autoencode: true,
autowidth: true,
beforeRefresh: function () {
grid.jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
},
caption: "Certificate Details",
emptyrecords: "No records to view",
gridview: true,
hoverrows: true,
ajaxGridOptions: { cache: false },
loadonce: true,
loadui: 'block',
multiboxonly: true,
multiselect: true,
pager: '#pjqgrid',
rowList: [15, 20, 30, 50],
rowNum: 15,
rownumbers: true,
sortname: 'srno',
sortorder: "asc",
toolbarfilter: true,
viewrecords: true
});
// Add Filter on top of the column
jQuery("#jqgrid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
// Adding pagination
jQuery("#jqgrid").jqGrid('navGrid', "#pjqgrid", {
edit: false,
add: false,
del: false,
reloadGridOptions: { fromServer: true },
refreshstate: "current"
});
});
$(window).on('resize.jqGrid', function () {
$("#jqgrid").jqGrid('setGridWidth', $("#content").width());
});
</script>
Код контроллера MVC:
public ActionResult GetCertDetails(string timeframe, string ddlTimeFrame)
{
using (NetworkAutomationContext NAC = new NetworkAutomationContext())
{
List<NetworkCertsATC_SP> results = new List<NetworkCertsATC_SP>();
try
{
if (timeframe != null)
ViewData["TimeFrame"] = timeframe;
else
ViewData["TimeFrame"] = "All";
// Fetch Grid data filtered according to time frame
DateTime ExpiryDate = DateTime.Now.Date;
switch (timeframe)
{
case "All":
results = NAC.NetworkCMDB_Certss.ToList();
break;
case "1Day":
ExpiryDate = ExpiryDate.AddDays(1);
results = NAC.NetworkCMDB_Certss.Where(record => record.Expiry_Date < ExpiryDate).ToList();
break;
case "5Days":
ExpiryDate = ExpiryDate.AddDays(5);
results = NAC.NetworkCMDB_Certss.Where(record => record.Expiry_Date < ExpiryDate).ToList();
break;
case "15Days":
ExpiryDate = ExpiryDate.AddDays(15);
results = NAC.NetworkCMDB_Certss.Where(record => record.Expiry_Date < ExpiryDate).ToList();
break;
case "30Days":
ExpiryDate = ExpiryDate.AddDays(30);
results = NAC.NetworkCMDB_Certss.Where(record => record.Expiry_Date < ExpiryDate).ToList();
break;
default:
results = NAC.NetworkCMDB_Certss.ToList();
break;
}
}
catch (Exception ex)
{
var ErrorObject = new NetworkCertsATC_SP
{
Common_Name = "Error",
Certificate = ex.Message,
Device = "NA",
Expiry_Date = DateTime.Now.Date,
Profile = "NA",
Virtual = "NA",
Partition = "NA",
Pool = "NA",
VIP = "NA",
Virtual_Port = 0,
Member_Name = "NA",
MemberIPAddress = "NA",
Member_Port = 0,
ATCEmail = "NA",
ATCName = "NA",
EnvironmentType = "NA"
};
results.Add(ErrorObject);
}
return Json(results, JsonRequestBehavior.AllowGet);
}
}
РЕДАКТИРОВАТЬ 1 : Добавлен снимок экрана новых данных, успешно полученных от контроллера, но не обновленных в jqGrid.
EDIT 2 : обновлен код, предложенный @Oleg. Но все еще сталкиваются с той же проблемой. MVC Controller на этот раз не вызывается. Кроме того, вторая точка останова в JQuery также не достигнута:
EDIT 3 : снимок экрана следующей ошибки после обновления кода.
