如何根据要求在Kendo窗口中加载局部视图 [英] How to load a partial view inside Kendo Window on request

问题描述

我有一个kendo窗口，其数据通过ajax调用加载.该kendo窗口的作用类似于窗口小部件编辑器，它允许用户更改或操纵数据以呈现不同的图表等.一旦用户配置了所有选项，他们便希望在显示在页面上之前预览其图表/图形. 我已经成功构建了模型窗口，并使用一个输入(预览)按钮加载了初始数据，但是现在我不知道如何在单击预览按钮时在模型窗口内加载部分视图.我不知道这种方法是否正确，但由于必须构造模型，因此我绝对需要一个局部视图，该模型将传递给该局部视图以呈现图表.

I have a kendo window who's data is loaded with an ajax call. This kendo window is acting like a widget editor which allow users to change or manipulate data in order to render different charts etc. Once users have configured all the options they want to preview their chart/graph before being displayed on a page. I have successfully constructed the model window and loaded the initial data with one input (Preview) button but now I don't know how to load the partial view inside the Model window on the Preview button click. I don't know if this approach is right or not but I defiantly need a partial view as I have to construct the model which will be passed to this partial view to render the chart/graph.

    $('.btnedit').click(function () {
        var pwrid = $(this)[0].id;

        $.ajax({
            url: '/Home/EditWidget/' + '?id=' + pwrid,
            type: 'GET',
            accepts: 'text/html',
            context: self,
            success: self.editWidgetWindowCallBack,
            error: function () { alert('Oops! Something went wrong'); },
            complete: function(){ }
        });
    });

editWidgetWindowCallBack: function (html, textStatus, jqXHR) {
    var model = $('#EditWidgetModelWindow').data('kendoWindow');
    model.content(html);
    model.center();
    model.open();
}

EditWidgetModelWindow是我的剑道模型窗口

EditWidgetModelWindow is my kendo model window

以下是我的行动方法

public ActionResult EditWidget(string id)
{
    var widgetViewModel = // view model construction here.
    return PartialView("Widgets/_EditWidget", widgetViewModel);
}

这是我的kendo模型窗口在其中加载编辑器局部视图的方式，现在我想在单击按钮时在此局部视图内加载另一个局部视图. 例如如果我的局部视图名称是_Chart，模型名称是ChartModel，那么如何通过单击按钮(按需)从父局部视图中调用该局部视图，并在Kendo模型窗口中使用现有局部视图渲染该局部视图.

this is how my kendo model window is loading an editor partial view in it and now I want to load another partial view inside this partial view on a button click. e.g. if my partial view name is _Chart and model name is ChartModel, how I can call this partial view from the parent partial view on a button click (on demand) and render it inside the existing partial view with in the Kendo Model Window.

推荐答案

我使用这种方法将html加载到剑道窗口中:

I use this approach to load html into kendo window:

1. 返回PartialViewResult
的MVC操作
2. 使用jQuery load方法从点1检索html
3. 如果Ajax调用没有错误，请打开kendo窗口

1. An MVC Action that returns a PartialViewResult
2. Use the jQuery load method to retrieve the html from point 1
3. Open the kendo window if no error on Ajax call

您的MVC代码是这个

public ActionResult EditWidget(string id)
{
    var widgetViewModel = // view model construction here.
    return PartialView("Widgets/_EditWidget", widgetViewModel);
}

您定义一个包含剑道窗口的html标记:

You define an html markup that holds the kendo window:

@(Html.Kendo().Window()
    .Name("wndWindow")  
    .Content(@<text>
         <div id="wndContent">

    </div>
   </text>)

) )

在您的脚本中，使用jQuery检索html:

In you script use jQuery to retrieve the html:

$('.btnedit').click(function () {
   var pwrid = $(this)[0].id;

   $('#wndContent').load('/Home/EditWidget/', {id: prwid}, function (response, status, xhr) {
            if (status == "error"){
                try{
                    var msge = $.parseJSON(response);
                    // get the server error
                } catch(e){
                    alert("Error parsing server response");
                }
            }else{
                $("#wndWindow").data("kendoWindow").open().center();
            });

这篇关于如何根据要求在Kendo窗口中加载局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！