如何在javascript中使用两个具有相同ID的文本框获取asp.net用户控件的值

Posted 2023-05-08

【中文标题】如何在javascript中使用两个具有相同ID的文本框获取asp.net用户控件的值

【英文标题】：How to get the values of an asp.net user control with two textboxes with same id in javascript

【发布时间】：2018-05-17 21:20:50

【问题描述】：

搜索了很多，但无法到达任何地方..我的案例：我有一个名为 DateControl 的 UserControl：

<div class="input-group">
  <div class="input-group-addon">
    <i class="fa fa-calendar"></i>
  </div>
  <asp:TextBox ID="ValueDateTextBox" runat="server" CssClass="form-control input-sm nepali-datepicker ignore" data-inputmask="'alias': 'dd/mm/yyyy'" />
</div>

它有一个我用于日期选择器的文本框。在我的 .aspx 页面中，我使用了这样的控件：

<div class="form-group">
  <label class="control-label col-sm-2">
                                From Date
                            </label>
  <div class="col-sm-3">
    <uc1:DateControl runat="server" ID="FromDateControl" />
  </div>

  <label class="control-label col-sm-2">
                                To Date
                            </label>
  <div class="col-sm-3">
    <uc1:DateControl runat="server" ID="ToDateControl" />
  </div>
</div>
<small class="col-sm-offset-2 text-warning pvInfo"></small>

在我的情况下，我必须从 datepicker 中选择两个日期 FROM 和 TO。从服务器端访问日期没有问题，因为我可以像访问它一样访问它

var fromDate = FromDateControl.ValueDateAd;
var toDate = ToDateControl.ValueDateAd;

这让我得到了选定的日期。但在我的情况下，我需要将这两个日期传递给 ajax 调用。而且由于 datepicker id 都是 ValueDateTextBox，我得到两个选择的日期相同。

JS 代码

 $(document).ready(function()
        $('#ShowInGridButton').on('click',
            function () 
                
                var accountNumberId = $('#DepositAccountNumberIdHiddenField').val();
             
                var fromDateCtrl = $('[id$="FromDateControl"]').find('[id$="ValueDateTextBox"]');
                alert(fromDateCtrl.val());
                var toDateCtrl = $('[id$="ToDateControl"]').find('[id$="ValueDateTextBox"]');
                alert(toDateCtrl.val());

                //var fromDate = $('#ValueDateTextBox').val();
               
                //var toDate = $('#ValueDateTextBox').val();
                var url = "/WebMethods/Deposit.asmx/GetDepositAccountStatement";
                var d =  accountNumberId: accountNumberId, fromDate: fromDate, toDate: toDate ;
                var jqXhr = ajaxPost(url, d);
                jqXhr.done(function (data) 
                    console.log(data);
                    if (data) 
                        var div = $('#CfDataTable').empty();
                        div.append(
                           $("<tr class='success'><th>Tran Date</th><th>Value Date</th><th>Statement Reference</th><th>Check No.</th><th>Collector</th><th>Debit</th><th>Credit</th><th>Balance</th></tr>"));
                      
                        $(data.d).each(function (index, item) 

                            div.append(
                                    $("<tr>")

                                    .append($("<td>").html(TojavascriptDate(item.TranDate)))
                                    .append($("<td>").html(ToJavaScriptDate(item.ValueDate)))
                                    //.append($("<td>").html(item.TranDate))
                                    //.append($("<td>").html(item.ValueDate))
                                    .append($("<td>").html(item.StatementReference))
                                    .append($("<td>").html(item.CheckNumber))
                                    .append($("<td>").html(item.Collector))
                                    .append($("<td>").html(item.Debit))
                                    .append($("<td>").html(item.Credit))
                                    .append($("<td>").html(item.Balance)));


                        );
                    
                ).fail(function () 
                    console.log('Data Retrieve failed.');
                );
            );
    );

所以很明显，相同的 ids 值将是相同的。我什至试着在这里环顾四周

var bothElements = document.querySelectorAll("[id='ValueDateTextBox']");
var first = bothElements[0];
alert(first);

仍然无法从日期选择器中获取所选日期的不同日期。感谢帮助。谢谢。这不是我没有四处寻找可能的解决方案，不得不在这里问。抱歉，如果您的专家开发人员的问题过于模糊。 :)

已编辑

DateControl 背后的代码

 public partial class DateControl : System.Web.UI.UserControl

    public string ValueDateNp
    
        get  return ValueDateTextBox.Text; 
        set  ValueDateTextBox.Text = value; 
    
    public DateTime ValueDateAd
    
        get  return DateConversion.GetEnglishDate(ValueDateTextBox.Text).ToDateTime(); 
        set
        
            if (value == DateTime.MinValue)
            
                ValueDateTextBox.Text = DateConversion.GetCurrentBSServerDate();
            
            ValueDateTextBox.Text = DateConversion.GetNepaliDate(value);
        
    

    public bool IsDateDisabled  get; set; 

    protected override void OnInit(EventArgs e)
    
        if (!IsPostBack)
        
            ValueDateTextBox.Text = DateConversion.GetCurrentBSServerDate();
        
    

    protected override void OnLoad(EventArgs e)
    
        if (!IsPostBack)
        
            ValueDateTextBox.Focus();
        
        if (IsDateDisabled)
        
            ValueDateTextBox.MakeReadOnly();
            ValueDateTextBox.CssClass.Remove(3);
        
    

    public void BindDataProperty<T>(Expression<Func<T, object>> property)
    
        ValueDateTextBox.SetDataBindPropertyName(property);
    

【问题讨论】：

ID 必须是唯一的。使用类而不是 id。

@Andreas 你好先生..即使我使用类，因为只有一个 ValueDateTextBox，我如何获得两个不同的选择值？谢谢

如果你使用 JS 来选择给定类的元素，你会得到一个数组中返回的两个文本框，你可以循环遍历数组来查找各个值。

@ADyson 谢谢陛下。介意给我一个例子来说明我的情况。一个小的 sn-p 会很有帮助。我是 Js 的新手。这不是我知道的代码工厂，但有一点帮助赞赏。:)

var dates = $(".datepicker"); 为您获取字段（假设它们具有跨两个文本框共享的类“datepicker”）。然后，使用 jQuery，您可以使用 .each() 方法对它们进行循环。 api.jquery.com/each 。粗略示例：dates.each(function() alert( this.value); );

【参考方案1】：

由于您有一个带有 id(FromDateControl & ToDateControl) 的父容器，您可以使用它们来查找内部子容器。

var fromDateCtrl = $('[id$="FromDateControl"]').find('[id$="ValueDateTextBox"]');
alert(fromDateCtrl.val());

【讨论】：

检查alert($('[id$="FromDateControl"]').length)

现在得到 0 先生

与其寻找解决方法，不如使用有效的标记并将 id 替换为类

@oldmonk 欢迎来到 Web 开发，在 js 和 jq 中编码时，您必须确保尝试查找某个元素的脚本应始终在加载该元素后运行。有一些其他方法可以在添加动态元素后立即找到它们，但这是不同的。您可以在文件末尾添加代码，也可以将其包装在文档就绪事件中。

@oldmonk inside find() 尝试将$ 替换为*。 (find('[id*="ValueDateTextBox"]'))