如何访问<表单>那不是母版页？

Question

Winforms 开发人员转换为 Web 开发人员。我知道关于具有标签的母版页的部分，不清楚的是我是否可以在我的内容页面之一中拥有另一个标签。我一直在搜索中看到这两个答案。我认为是的，只要有 runat=server 就可以。问题是我有一个包含母版页的网页上的几个单选按钮。我有一个 .js 文件，它有一个函数，如果我将名称发送到其中，它将循环遍历表单中的控件以查看选择了哪个并返回所需的日期范围（MTD、QTD、YTD 等）。当我在非母版页网页上运行它时，它工作正常。但是，当我在具有母版页的网页上运行时，我似乎无法访问该元素。我尝试了 getElementByID，我尝试循环浏览页面元素等。也许我的处理方式不正确，我希望有人可以纠正我。

这是我的 .js 文件中的代码，可能有助于解释我想要做得更好一点。

var frmDateRanges = document.getElementById(formFieldName); 
var chosen;
var len = frmDateRanges.DateRanges.length;
for(i=0;i<len;i++) 
   {
    if(frmDateRanges.DateRanges[i].checked) 
      {
        chosen = frmDateRanges.DateRanges[i].value;
       }
    }

其中 formFieldName 是传递到函数中的参数，DateRanges 是赋予单选按钮的名称值。

在我调用此函数的按钮中，我有： onclick ="FunctionCall('frmDateRanges')" FunctionCall 仅用于描述目的，'frmDateRanges' 是为表单 action="" 提供的名称和 id，

感谢您的帮助，因为我在这一点上感到困惑。如果有更好的方法来做到这一点，也请告诉我。

---

减少在客户端重新渲染的 HTML

var theForm = document.forms['aspnetForm'];

if (!theForm) { theForm = document.aspnetForm; } 函数 __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } }

 <form id = "frmDateRanges" action = "">
        <dl>
            <dt>&nbsp;Begin Date: &nbsp; &nbsp; End Date:</dt><dd><input name="ctl00$ContentPlaceHolder1$wpSettings$beginDT" type="text" id="ctl00_ContentPlaceHolder1_wpSettings_beginDT" style="width:67px;" />
                &nbsp;&nbsp;
                <input name="ctl00$ContentPlaceHolder1$wpSettings$endDT" type="text" id="ctl00_ContentPlaceHolder1_wpSettings_endDT" style="width:67px;" />
                &nbsp;
                <input id="btnBackOneDateRange" name = "btnBackOneDateRange" style="width: 20px; height: 21px" type="button"
                    value="<" onclick="BackOneDateRange('ctl00_ContentPlaceHolder1_wpSettings_beginDT', 'ctl00_ContentPlaceHolder1_wpSettings_endDT', 'frmDateRanges');"/>
                <input id="btnForwardOneDateRange" style="width: 20px; height: 21px" type="button"
                    value=">" /></dd><dd>

                        &nbsp;
                        <input type="radio" id="btnTrl1Yr" name="DateRanges" style="width: 19px"  value="1" onclick="GetTrailingYears('ctl00_ContentPlaceHolder1_wpSettings_beginDT', 'ctl00_ContentPlaceHolder1_wpSettings_endDT','1');" />
                        1 Year
                        <input type="radio" id="btnTrl3Yr" name="DateRanges" style="width: 19px"  value="3" onclick="GetTrailingYears('ctl00_ContentPlaceHolder1_wpSettings_beginDT', 'ctl00_ContentPlaceHolder1_wpSettings_endDT','3');" />
                        3 Years &nbsp;
                        <input type="radio" id="btnTrl5Yr" name="DateRanges" style="width: 19px"  value="5" onclick="GetTrailingYears('ctl00_ContentPlaceHolder1_wpSettings_beginDT', 'ctl00_ContentPlaceHolder1_wpSettings_endDT','5');" />
                        5 Years
                        <input type="radio" id="btnTrl10Yr" name="DateRanges" style="width: 19px"  value="10" onclick="GetTrailingYears('ctl00_ContentPlaceHolder1_wpSettings_beginDT', 'ctl00_ContentPlaceHolder1_wpSettings_endDT','10');" />
                        10 Years</dd><dt><input type="radio" id="btnMthToDate" name="DateRanges" style="width: 19px"  value="mth" onclick="GetMonthToDate('ctl00_ContentPlaceHolder1_wpSettings_beginDT', 'ctl00_ContentPlaceHolder1_wpSettings_endDT');" />
                            Month&nbsp;
                            <input type="radio" id="btnQtrToDate" name="DateRanges" style="width: 19px"  value="mth" onclick="GetQuarterToDate('ctl00_ContentPlaceHolder1_wpSettings_beginDT', 'ctl00_ContentPlaceHolder1_wpSettings_endDT');" />
                            Quarter &nbsp;<input type="radio" id="btnYearToDate" name="DateRanges" style="width: 19px"  value="mth" onclick="GetYearToDate('ctl00_ContentPlaceHolder1_wpSettings_beginDT', 'ctl00_ContentPlaceHolder1_wpSettings_endDT');" />
                            Calendar Year</dt></dl>

      </div> 
   </form>

Answer 1

您的内容页面中只能有 1 个 runat=server 表单。与页面中的其他表单混在一起可能会比其价值更令人困惑，即使它是一个小型 HTML 控件表单。

话虽这么说，我认为您遇到了这样的问题：当您尝试访问内容页面中的 DOM 元素时，包含这些元素的母版页已更改您的所有 ID。如果检查渲染的表单源，您将看到 id 元素现在已预先添加了内容容器 id，如下所示：

<输入 id="contentAreaId_controlID" />

这可能会导致您出现 document.getElementById(formFieldName); 问题。

Answer 2

有几点：

1. 嵌套
   
   元素不是合法的标记：某些浏览器对此比其他浏览器更宽松，但如果这样做，您会看到奇怪的行为。
2. 使用 ASP.NET 4 以下的母版页时，您会注意到页面上呈现的控件 id 与您在标记中为控件提供的 id 不完全匹配 - 它将根据id 上的内容占位符以及（可能）DOM 树中位于其上方的任何其他容器。

如果可以的话，您应该尝试为您动态生成一些 JavaScript，这样您就可以输出服务器控件的 ClientID 属性，您可能必须传入服务器控件的名称DateRange 单选按钮 - 当您声明 RadioButton 控件时，您应该给它一个 GroupName - 这样所有单选按钮都具有相同的 name （而不是 id），因此您可以传入该单选按钮的名称第一个选项

FunctionCall('<%=Option1.ClientID%>');

然后您可以对该对象调用 document.GetElementById ，并请求 .name 属性来获取单选按钮集合的名称，并使用该名称调用 document.getElementsByName价值：

function FunctionCall(radioButtonId) {
  var radioButtonList = document.getElementById(radioButtonId).name;
  var radioButtons = document.getElementsByName(radioButtonList);
  // radioButtons is an array of input type=radio, iterate as needed.
}