什么是正确的方式来重新绑定一个剑道网格,以前的搜索条件从另一个视图(后退按钮不起作用)

本文关键字:搜索 条件 网格 按钮 不起作用 另一个 视图 一个 方式 新绑定 什么 | 更新日期: 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'>&nbsp;</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'号,具有相同的数据....要人!