如何根据要求在 Kendo Window 中加载部分视图

Posted 2023-05-09

【中文标题】如何根据要求在 Kendo Window 中加载部分视图

【英文标题】：How to load a partial view inside Kendo Window on request

【发布时间】：2015-09-25 02:59:36

【问题描述】：

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

    $('.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 是我的剑道模型窗口

以下是我的操作方法

public ActionResult EditWidget(string id)

    var widgetViewModel = // view model construction here.
    return PartialView("Widgets/_EditWidget", widgetViewModel);

这就是我的剑道模型窗口在其中加载编辑器局部视图的方式，现在我想通过单击按钮在该局部视图中加载另一个局部视图。 例如如果我的局部视图名称是 _Chart 并且模型名称是 ChartModel，我如何通过单击按钮（按需）从父局部视图调用此局部视图，并在 Kendo 模型窗口中将其呈现在现有局部视图中。

【问题讨论】：

您好，您能否将一些代码发布到您目前拥有的代码中。

嗨 Jamie，我已经用代码更新了我的问题

【参考方案1】：

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

返回 PartialViewResult 的 MVC 操作 使用 jQuery load 方法从第 1 点检索 html 如果 Ajax 调用没有错误，则打开剑道窗口

你的 MVC 代码是这样的

public ActionResult EditWidget(string id)

    var widgetViewModel = // view model construction here.
    return PartialView("Widgets/_EditWidget", widgetViewModel);

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

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

    </div>
   </text>)

) )

在您的脚本中使用 jQuery 来检索 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();
            );

【讨论】：

感谢您的回复 anmarti。我不久前已经解决了这个问题，但没有更新我的答案。我相信您的回复肯定会对某人有所帮助。