什么是正确的方式来重新绑定一个剑道网格,以前的搜索条件从另一个视图(后退按钮不起作用)
本文关键字:搜索 条件 网格 按钮 不起作用 另一个 视图 一个 方式 新绑定 什么 | 更新日期: 2023-09-27 18:19:09
我是MVC Razor和Telerik的新手。我的应用程序有大量的JQuery和剑道UI网格。我有一个搜索页面…它所做的就是搜索数据,并填充剑道网格。然后你可以点击网格中的"View"按钮,它会调用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;
}
所有这些都很好。用户点击"查看",进入"详细信息"页面。问题是,这个"网格"是一个可分页的网格。我希望用户能够回到这个'Search'视图,甚至在他离开的网格上看到相同的'Page'。我尝试了一些简单的东西,比如浏览器的后退按钮,但那不起作用。
我尝试了一些东西,但我在过程的细节中陷入了困境。什么是最佳实践?我知道我可以发送: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 {}
}
}
它保留/显示网格中最后搜索的项。但是,它不会改变页面。我猜是因为页面还没有和动作同步。有没有办法将它添加到网格属性?
更新:
您可以使用web存储(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);
}
});
}
我明白了:
看看这个帖子,给了我什么我一直在寻找:以编程方式更改页面
这里的不同之处在于我将上面的代码更改为: $(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命令请求我留下的完全相同的'Page'号,具有相同的数据....要人!