无法从 ASP.Net 中的选择标记触发 onchange 事件答案

【问题标题】：Unable to trigger onchange event from select tag in ASP.Net无法从 ASP.Net 中的选择标记触发 onchange 事件
【发布时间】：2020-06-03 06:15:04
【问题描述】：

我想根据用户选择的 accountType 更改应显示的文本框。但是，附加到 select 的 onchange 事件没有被触发。有什么注意事项吗？

这是选择标签。

<div class="col-md-12 form-group" style="color:black">
    <select name="accountTypes" id="accountTypes" runat="server" onchange="javascript:document.forms[0].submit();" onserverchange="accountType_Changed">
            <option value="customer">Customer</option>
            <option value="pharmacy">Pharmacy</option>
            <option value="doctor">Doctor</option>
    </select>
</div>

accountType_Changed 函数是：

void accountType_Changed(Object sender, EventArgs e)
{
    cnic.Text = accountTypes.SelectedItem.Value;//or accountTypes.SelectedItem.Text
}

编辑： 根据@mahesh_b 提出的解决方案，进行了以下修改以解决该问题：

protected void Page_Load(object sender, EventArgs e)
{
    this.accountTypes.Attributes.Add("onchange", Page.ClientScript.GetPostBackEventReference(this.accountTypes, this.accountTypes.ID));
}

protected void accountType_Changed(object sender, EventArgs e)
{
    cnic.Text = "Working!!!"; //accountTypes.SelectedItem.Value;//or accountTypes.SelectedItem.Text
}

编辑 2：添加部分刷新后的布局渲染问题

<asp:ScriptManager EnablePartialRendering="true" ID="scriptManager" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <section class="login_part section_padding ">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 col-md-6">
                <div class="login_part_text text-center">
                    <div class="login_part_text_iner">
                        <h2>New to PHS?</h2>

                        <div class="row">

                            <div class="column col-md-12 form-group p_star">
                                <div class="col-md-12 form-group p_star">
                                    <asp:TextBox ID="firstname" placeholder="First Name" class="form-control" runat="server">
                                    </asp:TextBox>
                                </div>
                            </div>


                            <div class="column col-md-12 form-group p_star">
                                <div class="col-md-12 form-group p_star">
                                    <asp:TextBox ID="lastname" placeholder="Last Name" class="form-control" runat="server">
                                    </asp:TextBox>
                               </div>    

                            </div>

                        </div>


                        <div class="col-md-12 form-group p_star">
                            <asp:TextBox ID="cnic" placeholder="CNIC" class="form-control" runat="server">
                            </asp:TextBox>
                       </div>

                        <div class="col-md-12 form-group p_star">
                            <asp:TextBox ID="email" placeholder="Email" class="form-control" runat="server">
                            </asp:TextBox>
                       </div>

                        <div class="col-md-12 form-group p_star">
                            <asp:TextBox ID="pass" placeholder="Password" class="form-control" runat="server">
                            </asp:TextBox>
                       </div>

                        <div class="col-md-12 form-group" style="color:black">
                            <select name="accountTypes" id="accountTypes" runat="server" onchange="javascript:document.forms[0].submit();" onserverchange="accountType_Changed">
                              <option value="customer">Customer</option>
                              <option value="pharmacy">Pharmacy</option>
                              <option value="doctor">Doctor</option>
                            </select>
                        </div>

                        <br /><br />
                        <div class="col-md-12 form-group p_star">
                            <asp:TextBox ID="taxNo" placeholder="Tax No" class="form-control" runat="server">
                            </asp:TextBox>
                       </div>

                        <div class="col-md-12 form-group p_star">
                            <asp:TextBox ID="pName" placeholder="Pharmacy Name" class="form-control" runat="server">
                            </asp:TextBox>
                       </div>

                        <div class="col-md-12 form-group p_star">
                            <asp:TextBox ID="pAddress" placeholder="Pharmacy Address" class="form-control" runat="server">
                            </asp:TextBox>
                       </div>

                        <div class="col-md-12 form-group p_star">
                            <asp:TextBox ID="cAddress" placeholder="Address" class="form-control" runat="server">
                            </asp:TextBox>
                       </div>

                        <div class="col-md-12 form-group p_star">
                            <asp:TextBox ID="docID" placeholder="Doctor Id" class="form-control" runat="server">
                            </asp:TextBox>
                       </div>

                        <div class="col-md-12 form-group p_star">
                            <asp:TextBox ID="experience" placeholder="Experience (Years)" class="form-control" runat="server">
                            </asp:TextBox>
                       </div>

                        <div class="col-md-12 form-group p_star">
                            <asp:TextBox ID="expertise" placeholder="Expertise (Specialization)" class="form-control" runat="server">
                            </asp:TextBox>
                       </div>

                        <br />
                        <p>Create an account today and avail the best deals on medics.</p>      
                        <asp:Button ID="registerButton" class="btn_3" runat="server" width="50%" Text="Create Account" OnClick="createAccount_Clicked"/>

                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="login_part_form">
                    <div class="login_part_form_iner">
                        <h3>Welcome Back ! <br>
                            Please Sign in now</h3>
                        <form class="row contact_form" action="#" method="post" novalidate="novalidate">
                            <div class="col-md-12 form-group p_star">
                                <input type="text" class="form-control" id="name" name="name" value=""
                                    placeholder="Username">
                            </div>
                            <div class="col-md-12 form-group p_star">
                                <input type="password" class="form-control" id="password" name="password" value=""
                                    placeholder="Password">
                            </div>
                            <div class="col-md-12 form-group">

                                <button type="submit" value="submit" class="btn_3">
                                    log in
                                </button>
                                <a class="lost_pass" href="#">forget password?</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
</ContentTemplate>
</asp:UpdatePanel>

这些图像显示了选择的原始布局以及我更改值后加载的内容：

原文：

这是更改 accountType 中的值后加载的内容：

我怎样才能保持原来的布局？

【问题讨论】：

标签： c# asp.net database

【解决方案1】：

您需要使用ASP.NET Dropdownlist 和使用AutoPostBack=true 来触发OnChange 事件：

<div class="col-md-12 form-group" style="color:black">
    <asp:DropDownList id="accountTypes" AutoPostBack="True" OnSelectedIndexChanged="accountType_Changed" runat="server">
      <asp:ListItem Value="account_type">Account Type</asp:ListItem>
      <asp:ListItem Value="customer"> Customer </asp:ListItem>
      <asp:ListItem Value="pharmacy"> Pharmacy </asp:ListItem>
      <asp:ListItem Value="doctor"> Doctor </asp:ListItem>
   </asp:DropDownList>
 </div>

而服务器端accountType_Changed 会是这样的：

void accountType_Changed(Object sender, EventArgs e)
{
    username.Text = accountTypes.SelectedItem.Value;//or accountTypes.SelectedItem.Text
}

【讨论】：

我按照您的建议进行了更改。但现在我收到编译错误：编译器错误消息：CS1061：“login_aspx”不包含“accountType_Changed”的定义，并且找不到接受“login_aspx”类型的第一个参数的可访问扩展方法“accountType_Changed”（你是缺少 using 指令或程序集引用？）。不知道为什么会发生。我已经用提议的修改修改了问题。
您可以尝试添加Protected 并再试一次吗？

【解决方案2】：

对于 HTML 控件，使用服务器事件，在您的情况下为 OnServerChange 事件。为了触发 serverchange 事件，您必须明确提交表单或对onchange 事件进行回发。您可以使用以下两个选项来执行此操作 -

从客户端提交onchange 事件的表单：

<select name="accountTypes" id="accountTypes" runat="server" 
onchange="javascript:document.forms[0].submit();" onserverchange="accountType_Changed">

在服务器端使用GetPostBackEventReference 方法：

protected void Page_Load(object sender, EventArgs e)
{      
    this.accountTypes.Attributes.Add("onchange", Page.ClientScript.GetPostBackEventReference(this.accountTypes, this.accountTypes.ID));

}

您可能还必须将方法签名更改为-

    protected void accountType_Changed(object sender, EventArgs e)
    {

    }

请参阅这些主题以了解更多信息 -

How to make HtmlSelect Control with OnChange event to trigger C# code behind function

OnServerChange event not firing

如果您的要求适合更改为 ASP.NET 下拉列表，那么您可以按照另一个答案中提到的Selim。

【讨论】：

非常感谢。触发器现在被触发。一个小问题是，在执行该功能时，网页会重置滚动。我读到它是由于 href="#" 而发生的。但是在函数中我没有使用过这个标签。任何解决方法都会很棒。
此答案符合您最初的问题与 HTML 选择相关的内容。但是您编辑了该问题，不确定为什么其他人可能不会将此视为无效答案！保留您的原始问题以及带有正确描述的更新问题！
对于滚动这可能会有所帮助 -stackoverflow.com/questions/10134963/…
我意识到每次更改 accountType 中的值时，页面都会刷新。我怎样才能防止这种情况发生？
@Raza..这是 aspx 控件的正常行为。您可能需要使用更新面板检查部分页面更新-docs.microsoft.com/en-us/aspnet/web-forms/overview/…