从另一个视图重新绑定剑道网格到以前的搜索条件的正确方法是啥（后退按钮不起作用）
Posted
技术标签:
【中文标题】从另一个视图重新绑定剑道网格到以前的搜索条件的正确方法是啥（后退按钮不起作用）【英文标题】：What is the right way to rebind a kendo grid, to former search criteria from another view (the back button does not work)从另一个视图重新绑定剑道网格到以前的搜索条件的正确方法是什么（后退按钮不起作用） 【发布时间】：2014-10-15 04:57:34 【问题描述】：我对 MVC Razor 和 Telerik 比较陌生。我的应用程序有大量的 JQuery 和 Kendo UI 网格。 我有一个搜索页面...它所做的只是搜索数据并填充剑道网格。然后您可以单击网格中的“查看”按钮，该按钮调用 javascript 的“GotoDetails”，如下所示：
@(html.Kendo().Grid<Intranet.Models.courseclass>()
.Name("grid")
.DataSource
(
dataSource => dataSource // Configure the grid data source
.Ajax() // Specify that ajax binding is used
.Read(read => read.Action("gridfill", "Course")
.Data("productsReadData") // Specify the JavaScript function which will return the data
) // Set the action method which will return the data in JSON format
)
.Columns(columns =>
columns.Command
(command =>
command.Custom("Detail").Click("GotoDetails").Text("View");
);
columns.Bound(x => x.CourseID);
columns.Bound(x => x.PartNumber);
columns.Bound(x => x.CourseTitle);
// Add more fields later
)
.Pageable() // Enable paging
.Sortable() // Enable sorting
.HtmlAttributes(new
style = "display: none" //Hide
)
)
function GotoDetails(e)
var dataitem = this.dataItem($(e.target).closest("tr"));
var url = '@Url.Action("Detail", "Course", new CourseID = "__id__" )';
url = url.replace('__id__', dataitem.CourseID);
window.location.href = url;
所有这些东西都很好用。用户单击“查看”并转到“详细信息”页面。问题是，这个“网格”是一个可分页的网格。我希望用户能够回到这个“搜索”视图，甚至在网格上看到相同的“页面”，他离开了。我尝试了像浏览器后退按钮这样简单的方法，但它不起作用。
我尝试了一些事情：但我陷入了流程的细节中。最佳做法是什么？我知道我可以发送： var grid = $("#grid").data("kendoGrid"); var currentPage = grid.dataSource.page(); 我可以发送搜索条件。您可能希望查看“gridfill”代码隐藏：
public ActionResult gridfill([DataSourceRequest]DataSourceRequest request, string text)
if (text == "") text = "RLFfudgefactor"; //return no results - fudge factor
hiddentablesEntities1 db = new hiddentablesEntities1();
var result_1st = db.tab_course
.Where(x => x.CourseTitle.Contains(text) || x.CourseID.ToString().Contains(text) || x.CoursePartNumber.Contains(text))
.OrderBy(x => x.CourseTitle);
IQueryable<tab_course> courselist = result_1st;
// Convert the Product entities to ProductViewModel instances
DataSourceResult result = courselist.ToDataSourceResult(request, product => new courseclass
CourseID = product.CourseID,
PartNumber = product.CoursePartNumber,
CourseTitle = product.CourseTitle
);
return Json(result, JsonRequestBehavior.AllowGet);
编辑： 我添加了一个返回搜索按钮：它的脚本有这个：
function backtosearch()
var url = '@Url.Action("Search", "Course", new text = "__cid__", Page = "__pid__" )';
var pagenumber = @Model.pagenumber +0;
var searchvalue = '';
@
if (Model.searchvalue != null)
@Html.Raw("searchvalue = '" + Model.searchvalue + "';");
url = url.replace('__pid__', pagenumber);
url = url.replace('__cid__', searchvalue);
window.location.href = url;
我通过模型提供数据。然后在搜索视图上：
我在脚本中有这段代码：
$(document).ready(startfunction);
function startfunction()
@
try
if (Model.searchvalue != null)
<text>
//1st run
var pagenumber = @Model.pagenumber +0;
var searchvalue = @MvcHtmlString.Create("'" + Model.searchvalue + "'") + '';
var grid = $("#grid").data("kendoGrid");
$("#AutoComplete1").val(searchvalue);
grid.dataSource.read(); //Keep the grid in sync
grid.dataSource.page(pagenumber);
$("#grid").attr("style", "display: block;");
debugger
</text>
catch
它确实保留/显示网格中最后搜索的项目。但是，它不会更改页面。我猜是因为页面尚未与操作正确同步。有没有办法将它添加到 Grid 属性中？
【问题讨论】：
如果您的详细信息页面数据不是那么大，那么您可以将其添加到同一页面的剑道弹出窗口中 【参考方案1】：更新：
您可以在离开页面之前使用网络存储（sessionStorage 或 localStorage）保存您的最后位置。 sessionStorage 只会持续与您的会话一样长（通常当您关闭浏览器时它会过期），或者您可以使用 localStorage 它将持续到下一个会话（不会过期）。
注意：本地存储将所有内容保存为字符串，因此您必须对其进行解析。
//returns the page your grid is on and saves it in sessionStorage
sessionStorage.page = $('#grid').data('kendoGrid').dataSource.page());
作为页面加载的一部分
//Parse out the int and set the page
if(sessionStorage.page != null)
$('#grid').data('kendoGrid').dataSource.page(parseInt(sessionStorage.page));
如果从未设置过sessionStorage.page，它将返回null
您可以使用此 JQuery 设置网格所在的页面。
$('#grid').data('kendoGrid').dataSource.page(2);
正如 Nitin 建议的那样，尽管我认为这可能是使用剑道窗口并将您的内容放在页面上的好地方。完成此操作的 ajax 函数可能如下所示。
function loadWindow()
$('body').prepend("<div class='my-window'><span class='k-loading-image'> </span></div>");
$('.my-window').kendoWindow(
width: $(window).innerWidth() - ($(window).innerWidth() / 5),
height: $(window).innerHeight() - ($(window).innerHeight() / 5),
close: function(e) e.sender.destroy();
);
var window = $('.my-window').data('kendoWindow').center().open();
return window;
function GotoDetails(e)
var window = loadWindow();
var dataitem = this.dataItem($(e.target).closest("tr"));
var url = '@Url.Action("Detail", "Course", new CourseID = "__id__" )';
url = url.replace('__id__', dataitem.CourseID);
$.ajax(
url: url,
type:'html',
success: function(data)
window.content(data);
);
【讨论】：
我们决定不使用模型弹出窗口或剑道窗口格式。我已经指出了上面的 datasource.page 概念。我遇到的问题是如何来回传递数据。 当我想从详细视图重定向回“搜索”视图时。我可能在客户端有数据。但是当我发布帖子或重定向时，似乎无法告诉“搜索”页面有这些额外的细节。至少我在这个 MVC 中还没有这个概念。在网络表单中这很容易。 您可以在转到新页面之前使用网络存储或 cookie 保存此信息。我建议使用网络存储，因为它不会成为请求的一部分。 w3schools.com/html/html5_webstorage.asp 我已经编辑了我上面的内容，以包括我进入的新方向。不，我没有使用 Cookie。即使我这样做了，我相信我仍然会遇到同样的问题。打开视图后：如何让它改变一个尚未绑定的网格的页面...【参考方案2】：我明白了：
请参阅其他帖子，它给了我想要的东西： Changing the page programmatically
这里的区别是我把上面的代码改成了这样：
$(document).ready(startfunction);
function startfunction()
@
try
if (Model.searchvalue != null)
<text>
//1st run
var pagenumber = @Model.pagenumber +0;
var searchvalue = @MvcHtmlString.Create("'" + Model.searchvalue + "'") + '';
var grid = $("#grid").data("kendoGrid");
$("#AutoComplete1").val(searchvalue);
grid.dataSource.query( page: pagenumber, pageSize: 10 );
$("#grid").attr("style", "display: block;");
</text>
catch
现在 grid.dataSource.query 命令请求我留下的完全相同的“页”号，具有相同的数据.... 哇！
【讨论】：
以上是关于从另一个视图重新绑定剑道网格到以前的搜索条件的正确方法是啥（后退按钮不起作用）的主要内容，如果未能解决你的问题，请参考以下文章