如何在移植到 ASP.NET MVC 的网络表单页面中顽固地保留旧的 JavaScript 事件处理程序？

Question

考虑 .ASPX 文件中的单行标记，如下所示：

<asp:DropDownList ID="drpdownPayPlan" runat="server" onchange="javascript: document.getElementById('txtPayAmount').value = document.getElementById('drpdownPayPlan').value.replace(',', '');">

我可以保留我的嵌入式 JavaScript 处理程序代码吗？如何保留？我知道将 WebForms 应用程序移植到 ASP.NET MVC 时还有很多其他问题，但我想保持简单，只关注这一行。目前，我在这一行得到的错误是：

Unhandled exception at line 410, column 115 in http://localhost:3835/Policy/QuotePayments?QN=XYZ-1234567&PN=ABCDEFGHIJ&AC=123456789

0x800a138f - JavaScript runtime error: Unable to get property 'value' of undefined or null reference

渲染时，源代码在第 410 行实际上是这样写的（我理解名称错乱的原因）：

    <select name="ctl00$MainContent$drpdownPayPlan" id="MainContent_drpdownPayPlan" onchange="javascript: document.getElementById(&#39;txtPayAmount&#39;).value = document.getElementById(&#39;drpdownPayPlan&#39;).value.replace(&#39;,&#39;, &#39;&#39;);">

所以，恕我直言——没有给我关于如何正确地将 WebForms 项目移植到 MVC 的布道（抱歉听起来像一个叛逆和不合作的少年！）——我该如何解决我的问题？我有这一行标记吗？

Answer 1

ASPX 页面中的 0x800a138f 错误通常发生在尝试分配服务器端控件名称时（由于默认服务器控件行为分配 AutoID，客户端不存在该名称）客户端名称，因此 document.getElementById('drpdownPayPlan') returns undefined.

有两种解决方法：

将 ClientIDMode="Static" 分配给每个涉及的服务器控件（我假设 txtPayAmount 是一个 TextBox 服务器控件，如果您使用的是文字输入文本框离开txtPayAmount 原样）。

<asp:TextBox ID="txtPayAmount" runat="server" ClientIDMode="Static" />
<asp:DropDownList ID="drpdownPayPlan" runat="server" ClientIDMode="Static" onchange="javascript: document.getElementById('txtPayAmount').value = document.getElementById('drpdownPayPlan').value.replace(',', '');">

注意：ClientIDMode 属性在 .NET 4.0 及更高版本中可用。

使用 <%= drpdownPayPlan.ClientID %> 引用客户端 ID，同时将控件 ID 保持在 AutoID 状态（我再次假设 txtPayAmount 是 TextBox 控件如果 txtPayAmount 是文字文本框，请留在这里。

<asp:DropDownList ID="drpdownPayPlan" runat="server" onchange="javascript: document.getElementById('<%= txtPayAmount.ClientID %>').value = document.getElementById('<%= drpdownPayPlan.ClientID %>').value.replace(',', '');">

请注意，我建议您将 JS 部分与服务器控件分离在一个函数中，并按如下所示调用函数名称：

<asp:DropDownList ID="drpdownPayPlan" runat="server" onchange="changePayAmount();">

<script type="text/javascript">
function changePayAmount() {
    document.getElementById('<%= txtPayAmount.ClientID %>').value = document.getElementById('<%= drpdownPayPlan.ClientID %>').value.replace(',', '');
}
</script>

PS：在 MVC 上下文中，每个 HTML 辅助元素的 id 可以在 HTML 属性部分中轻松定义，如下所示：

@Html.DropDownListFor(model => model.PayPlan, Model.PayPlanList as SelectList, new { id = "drpdownPayPlan" })

类似问题：

0x800a138f - JavaScript runtime error: Unable to get property 'value' of undefined or null reference

JavaScript runtime error: Unable to get property 'value' of undefined or null reference

如何在移植到 ASP.NET MVC 的网络表单页面中顽固地保留旧的 JavaScript 事件处理程序？

How to stubbornly keep an old JavaScript event handler in a webform page ported to ASP.NET MVC?

javascript

asp.net-mvc

event-handling

porting