asp.net-mvc-4 - 在 ASP MVC 中更新剑道网格列而不重新加载页面

Question

我有一个剑道网格，用户可以从网格中选择列列表，并通过给出名称(即 View 名称)来保存选择。每个保存的选择( View 名称)将显示为网格上方的下拉菜单，以便用户可以随时更改网格列。在当前的实现中，每当用户从一个下拉值选择 View 名称到另一个下拉值时，我都会调用操作方法来选择该 View 名称作为当前 View 名称。然后页面重新加载以调用Index 的操作方法来检索当前 View 名称列值。我在网格中使用可见属性来显示和隐藏网格中的列。

现在我想知道当用户从下拉列表中更改 View 名称时是否可以更新网格列而不重新加载页面。

谢谢桑吉夫

屏幕截图:

这是我的设置: View 模型:

namespace MvcApplicatioin.Models
{
    public class EmployeeViewModel
    {
        public EmployeeColumns EmployeeColumns               { get; set; }
        public IEnumerable<SelectListItem> EmployeeViewNames { get; set; }
        public long EmployeeSelectedViewId                   { get; set; }
    }

    public class EmployeeResponse
    {
        public int Id           { get; set; }
        public string FirstName { get; set; }
        public string LastName  { get; set; }
    }

    public class EmployeeColumns
    {
        public bool Id        { get; set; }
        public bool FirstName { get; set; }
        public bool LastName  { get; set; }
    }
}

Controller :

public class EmployeeController : Controller
{
        // GET: Employee
        public ActionResult Index()
        {
            var service = new EmployeeService();
            EmployeeViewModel model = new EmployeeViewModel();
            long currentViewId;

            //setup views and column preferences
            EmployeeColumns employeeColumns = service.GetCurrentEmployeeColumnsPreferences();
            model.EmployeeColumns = employeeColumns;
            model.EmployeeViewNames = service.GetAllEmployeeViewNames(out currentViewId);
            model.EmployeeSelectedViewId = currentViewId;

            return View(model);
        }
 }

Razor :

@using Kendo.Mvc.UI

@{
    ViewBag.Title = "Employee Info:";
}

<h3 style="margin-bottom: 10px;">Employee Info</h3>

<input id="btnSearch" type="button" value="Search" class="btn_Search" />

<div class="row">
    <div class="col-sm-12">
        @(Html.Kendo().Grid<MvcApplicatioin.Models.EmployeeResponse>()
            .Name("GridEmployee")
            .Columns(columns =>
            {
                columns.Bound(e => e.Id).Width("170px").Visible(Model.EmployeeColumns.Id);
                columns.Bound(e => e.FirstName).Width("190px").Visible(Model.EmployeeColumns.FirstName);
                columns.Bound(e => e.LastName).Width("170px").Visible(Model.EmployeeColumns.LastName);                
            })
            .ToolBar(tools =>
            {
                tools.Template(@<text>
                    <div class="col-lg-4 col-md-5 col-sm-5 col-xs-7 pull-right" style="padding-right: 0;">
                        <div class="form-group" style="margin-bottom: 0;">
                            @Html.Label("Grid View:", new { @class = "col-sm-3 col-xs-4 control-label view" })
                            <div class="col-sm-7 col-xs-6" style="padding-left: 0;">
                                @Html.DropDownList("lstEmployeeViewNames", new SelectList(Model.EmployeeViewNames, "Value", "Text", Model.EmployeeSelectedViewId), "- Select View Name -", new { @class = "form-control", @style = "height: auto;" })
                            </div>
                        </div>
                    </div>
                </text>);
            })
            .Pageable(x => x.PageSizes(new int[] { 10, 20, 50, 100 }).ButtonCount(4))
            .AutoBind(false)
            .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(10)
                        .ServerOperation(false)
                        .Read(read => read.Action("SearchEmployee", "Employee")))
        )
    </div>
</div><!--//row-->

<script type="text/javascript">
    $('#btnSearch').click(function (e) {
        e.preventDefault(); //This prevent the submit button onclick from submitting by itself

        $('#GridEmployee').data('kendoGrid').dataSource.read();
    });

    //Change event for Dropdown placed inside the Grid's Toolbar - To Change the view
    $("#lstEmployeeViewNames").change(function (e) {
        var selectedViewId = $('select#lstEmployeeViewNames option:selected').val();

        if (selectedViewId == null || selectedViewId == '') {
            alert("Please select the view name from the dropdown first !!");
            return;
        }

        $.post("/Employee/SetEmployeeColumnsCurrentPreferences", { viewId: selectedViewId }, function (data) {
            window.top.location.reload();
        });
    });
</script>

Answer 1

这就是我在客户端中进行搜索的方式。我知道它没有告诉您如何显示和隐藏列，但至少它可以让您走上正确的轨道。

技巧是操纵 $("#GridEmployee") 而不是发布。

function search() {
    var searchCriteria = $("#searchField").val();
    var gridData = $("#GridEmployee").data("kendoGrid");

    if searchCriteria != "") {
        gridData.dataSource.filter({ field: "FirstName", operator: "contains", value: searchCriteria });
    } else {
        gridData.dataSource.filter({});
    }
}