剑道对象失去了功能和风格

Kendo Objects lose function and style

本文关键字：功能 风格 失去 对象      更新时间：2023-09-26

我遇到了一些剑道对象的问题，特别是按钮、下拉列表和文本框。我的情况是：我有一个局部视图，它加载了一个零件列表和一个项目列表。列表中的每个项目都包含一个链接，该链接打开一个剑道窗口，该窗口加载有关零件或项目的部分信息视图。所有零件共享一个窗口，但信息会根据零件进行更新，所有项目共享一个窗，其中所有信息都会根据项目进行更新。该窗口在包含零件列表的局部视图上实例化，但在单击零件/项目之前不可见。然后将数据从单独的局部视图加载到窗口上，然后打开窗口。每个窗口都包含剑道按钮、剑道文本框和剑道下拉列表。

第一次加载时，项目链接和零件链接都能正常工作。它们继续工作，直到用户打开另一种类型的链接，无论是零件还是项目。然后两个车窗都停止工作。窗口打开，但所有剑道对象都失去了功能。例如，一个下拉列表变成了一个文本框，一个按钮呈现出扁平的蓝色外观，并且工作表从CSS中失去了样式。我在这个项目中成功地使用了很多次剑道对象，所以我对这个视图有所了解。我检查了窗口和窗口中所有对象的名称和ID，没有一个是共享的。我还更改了部分视图中的javascript函数的名称（我知道这是一种糟糕的做法，但我从未找到正确的方法），使其彼此不同。问题仍然存在。

我没有足够的声誉来发布图片，而且大多数图片托管网站在工作中都被屏蔽了，所以我不能发布任何视觉辅助。

下面是其中一个窗口的代码。

 <div style="width:100%;text-align:center;">
    <div style="display:inline-block; vertical-align:central">
        <table>
            <tr>
                <td>
                    @Html.Kendo.Button.Name("test1").Content("Add    Costs").Events(Sub(events) events.Click("enterActualInfo"))
                </td>
                <td>
                    @Html.Kendo.Button.Name("test2").Content("View Change History").Events(Sub(events) events.Click("showProjectHistory"))
                </td>
                <td>
                    @Html.Kendo.Button.Name("test3").Content("GPC/Target").Events(Sub(events) events.Click("addGPC"))
                </td>
            </tr>                
        </table>
    </div>
</div>

这是打开窗口的代码

    function sendProjInfo(projNum) {
    var projectWindow = $("#custProjWindow").data("kendoWindow")
    $.ajax({
        type: "GET",
        url: "@Url.Action("getCustProjInfo", "Home")",
        data: { custProjNumber: projNum },
        datatype: "html",
        success: function (result) {
            projectWindow.content(result).open()
        }
    })
}
//when a part number is clicked, open a new window that has thats part information
function sendPartInfo(partNumber) {
    var partWindow = $("#partWindow").data("kendoWindow")
   $.ajax({
        type:"GET",
        url: "@Url.Action("getPartInfo", "Home")",
        data: {partNumber: partNumber},
        datatype: "html",
        success: function (result) {
            partWindow.content(result).open();
        }
    })
}

这是窗口的实例化。

@Html.Kendo.Window.Name("custProjWindow").Title("Edit Customer Project").Draggable.Resizable.Actions(Sub(actions) actions.Minimize.Maximize.Close()).Visible(False)
@Html.Kendo.Window.Name("partWindow").Title("Edit Part").Draggable.Resizable.Actions(Sub(actions) actions.Minimize.Maximize.Close()).Visible(False)

如有任何建议，我们将不胜感激。如果有助于解决问题，我很乐意发布更多信息。提前谢谢。

-Eric

很容易确定原因：双重id。当你打开第一个时，没有问题，因为按钮是#test1、#test2和#test3，但当你加载另一个时，这些id会重复到同一页面中

您应该更改您的局部视图，以便按钮的名称是动态的和唯一的：

发件人：

@Html.Kendo.Button.Name("test1").Content("Add    Costs").Events(Sub(events) events.Click("enterActualInfo"))

收件人：

@Html.Kendo.Button.Name("test1_" + ViewBag.someId).Content("Add    Costs").Events(Sub(events) events.Click("enterActualInfo"))

在您的控制器中，您有一个返回您的partialView的操作，对吗？在那里，您必须传递唯一的id，该id将区分每个分部和其他分部。

public PartialViewResult _YourPartialView()
{
    ViewBag.someId = variableName; // this should be something like a model Id or something.
    return PartialView();
}

您可以在控制器中使用变量，也可以在单击加载局部视图的链接时通过javascript发送内容。

在发布这个问题之前，我花了很多小时来研究这个问题。在发布问题几分钟后，我就解决了。

对于其他有此问题或类似问题的人：

  • 确保没有对象共享ID。显然这很糟糕
  • 如果任何事件调用JS函数，请确保它们的拼写正确且引号
  • 如果任何事件调用JS函数，请确保在调用它的对象之前加载该函数。我只需将函数放在按钮上方，它就解决了我的所有问题。我相信还有更好的练习我还没有学会，但这只是一个开始
  • 请始终检查浏览器调试器！那里总是有有价值的信息

祝有类似问题的人好运。

相关文章：