javascript - C# ASP.NET slider JavaScript 在 HTML 页面和 ASPX 网站中的 react 不同

Question

再次需要帮助，我在网上找到了一些可以使用的模板，我尝试复制它并放入我的 html 中，它可以工作，但是 slider 有一些问题。

如果它采用 .HTML 格式，则 slider 可以像这样完美地工作，直到对话结束。

但是如果它在 .ASPX 文件中，它将看起来像这样

它从容器中滑出，有人知道是什么原因造成的吗？

顺便说一句，代码是完全相同的，相同的 css、bootstrap 和 JS谢谢

Answer 1

在您的 ASPX 页面中，当您应用 runat=server 时，可能会导致您的控件的 id 在浏览器中发生更改。

例如，在常规 html 通用控件上，您可能有:

<input id='mybutton' type='button' value='Go' />

当您将 runat=server 应用于嵌套在父控件内的控件(例如母版页或用户控件)时，在 Web 浏览器中生成的 ID 可能会更改:

例如，当使用主控件时，内容通常放置在内容占位符中。如果上面的控件是这样放置的:

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"><input id='mybutton' type='button' value='Go' runat='server' /> </asp:content>

ASP.NET 将在浏览器中呈现如下所示的控件:

<input id='MainContent_mybutton' type='button' value='Go' runat='server'  />

控件的名称属性也可以更改。

这是设计使然，以便 ASP.NET 可以跟踪您的控件并确保它们位于页面控件集合的正确层次结构中。 ID 和名称还用于填充对象并引发控制方法的事件处理程序。

您可以通过在控件上设置 ClientIDMode="Static" 来覆盖 id 的更改，但请注意不要最终得到多个具有相同 id 的控件。

您需要确保 ID 与任何 CSS 或 JavaScript 中设置的 ID 相匹配。处理此问题的常用方法是保留生成的客户端 ID 并在 JavaScript 中引用它，如下所示:

var mybuttonId = '<%= mybutton.ClientID %>';

您还需要注意，您在应用程序中设置的任何外观或主题都不会覆盖控件的默认样式。

要解决您的问题，请将控件呈现的正常 HTML 与 ASP.NET 呈现的控件进行比较。要么解决 ASP.NET 更改 ID/NAME/STYLE/CLASS 属性的问题，要么更新 JavaScript 和 CSS 以使用由 aspx 页面生成的名称。