Asp.net mvc 在剑道窗口中加载剑道网格

我想在剑道窗口中打开剑道网格。我的剑道窗口代码是这样的

   $("#Dialog").kendoWindow({
            title: "Add",                
            modal: true
        });

        var dialog = $("#Dialog").data("kendoWindow");          
        dialog.center().open();

我想打开窗口中的剑道网格。我没有向窗口传递任何值。

---

打开窗口时，我想从数据库中读取数据并填充网格。我该怎么做？我可以在剑道窗口中使用网格和加载的局部视图吗？

您应该使用iframe选项

---

将google url替换为

@url.Action（“Action Name”）

是的，您可以通过内容url在剑道窗口中加载部分视图：

    $('#Dialog').kendoWindow({
        content: {
            url: "/AppName/ViewName" OR "ViewName/ControllerMethod"
        },
        title: "Add",                
        modal: true});

创建包含栅格的局部视图

在javascript中： 对返回此partiel视图的操作进行ajax调用：

var kWindow = $("#window").data("kendoWindow");
$.ajax({
        url: YourController/OpenGridPartielView,
        cache: false,
        success: function (result) {
            kWindow.refresh
            {
                $("#window").html(result);
            };
            kWindow.center().open();
        },
        error: function (result) {
        }
    });

//在控制器中

public PartialViewResult OpenGridPartielView()
{   
   return PartialView(@"your PartielView Path");
}

创建一个可以渲染网格的空Div。隐藏可见性

<div id="Dialog" style="display:none;">
</div>

对控制器进行Ajax调用，并在前面提到的Div中呈现输出

$.ajax({
 url: RootUrl + 'Controller/ActionMethod',
 type: 'POST',
 contentType: 'application/json;',
 data: JSON.stringify({ Property: Value }),
 async: false,
 success: function (data) {
    document.getElementById("Dialog").innerHTML = data;
}
});

在控制器中，返回将包含栅格的局部视图

public ActionResult ActionMethod()
{
   return PartialView("PartialViewName");
}

---

我看到上面的一些例子使用了PartialView，这很好，但这里有另一种不使用PartialView的方法

我将为窗口创建一个div元素，为网格创建另一个div元素。然后，我将使用grid read事件的自定义参数实例化这两个剑道元素，以便结果可以是动态的

我的javascript：

$（文档）.ready（函数（）{
//用于保存读取事件的参数值的变量
var-id=0；
$（“#btn”）。单击（函数（）{
var对话框=$（“#kendoWindow”）.data（“kendoWindow”）；
dialog.center（）.open（）；
});
$（“#网格”）.kendoGrid({
数据源：{
运输：{
阅读：{
url:“控制器操作的url”，
键入：“获取”，
数据类型：“json”，
数据：函数（）{
返回{
id:id
}
}
}
},
模式：{
型号：{
id:“产品id”，
字段：{
产品名称：{type:“string”}
}
}
},
页面大小：20
},
身高：550，
栏目：[
“产品ID”，
“产品名称”
]
});
$（“#kendoWindow”）。kendoWindow({
标题：“添加”，
模型：对，
打开：函数（）{
//在窗口的打开事件中，您可以根据需要更改参数
id=10；
$（“#网格”）.data（“kendoGrid”）.dataSource.read（）；
}
});
});

我的Html：

KendogridinkEndowWindow
开窗

我的控制器操作（根据需要更改）：

publicjsonresult-GetData（int-id）
{
如果（id==0）{
列表数据=新列表（）；
对于（变量i=0；i<10；i++）{
添加（新产品{ProductId=i，ProductName=“test”+i}）；
}
返回Json（数据，JsonRequestBehavior.AllowGet）；
}
其他的
{
列表数据=新列表（）；
添加（新产品{ProductId=0，ProductName=“test”}）；
返回Json（数据，JsonRequestBehavior.AllowGet）；
}
}

$.ajax({
 url: RootUrl + 'Controller/ActionMethod',
 type: 'POST',
 contentType: 'application/json;',
 data: JSON.stringify({ Property: Value }),
 async: false,
 success: function (data) {
    document.getElementById("Dialog").innerHTML = data;
}
});

public ActionResult ActionMethod()
{
   return PartialView("PartialViewName");
}

<h2>kendoGridinKendoWindow</h2>
<button id="btn">Open Window</button>
<div id="kendoWindow">
    <div id="grid"></div>
</div>

public JsonResult GetData(int id)
{
    if(id == 0) {
        List<Product> data = new List<Product>();
        for(var i=0; i< 10; i++){
            data.Add(new Product{ ProductId = i, ProductName ="test" + i});
        }
        return Json(data, JsonRequestBehavior.AllowGet);
    }
    else
    {
        List<Product> data = new List<Product>();
        data.Add(new Product { ProductId = 0, ProductName = "test" });
        return Json(data, JsonRequestBehavior.AllowGet);
    }
}