使用JQuery控制DetailView内部

时间:2011-08-02 14:08:10

标签: jquery asp.net

    <asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False"       DataSourceID="TimeEntriesDataSource"
                            RowStyle-VerticalAlign="Top" DefaultMode="Insert" HeaderStyle-HorizontalAlign="Center"
                            BackColor="White" BorderColor="#336666" BorderStyle="Double" BorderWidth="3px"
                            CellPadding="4" OnItemInserted="DetailsView1_ItemInserted" OnItemCommand="DetailsView1_ItemCommand"
                            OnItemInserting="DetailsView1_ItemInserting">
                            <RowStyle VerticalAlign="Top" BackColor="White" ForeColor="#333333"></RowStyle>
                            <PagerStyle BackColor="#336666" ForeColor="White" HorizontalAlign="Center" />
                            <Fields>
                                <asp:TemplateField HeaderText="Group">
                                    <InsertItemTemplate>
                                        <asp:DropDownList ID="ddlGroups" runat="server"     DataSourceID="GroupsDataSource" DataTextField="Name"
                                            DataValueField="Id" AppendDataBoundItems="true" ValidationGroup="InsertTimeEntry"
                                            AutoPostBack="true" OnSelectedIndexChanged="ddlGroups_SelectedIndexChanged">
                                            <asp:ListItem Selected="True" Text="-- Select --" Value=""></asp:ListItem>
                                      </asp:DropDownList>

                                        <asp:ObjectDataSource ID="GroupsDataSource" runat="server" SelectMethod="GetSortedActiveGroups"
                                            TypeName="NicorNational.TimeTracker.BLL.Gateway"></asp:ObjectDataSource>
                                    </InsertItemTemplate>
                                </asp:TemplateField>

                            </Fields>
                            <EditRowStyle Font-Bold="True" />
            </asp:DetailsView> 

我们如何编写JQuery函数以从Details View获取Dropdownlist?如果Dropdownlist中有任何更改,我需要提醒用户。我正在写这样的东西但是当用户改变下拉值时它不会被触发。

             $(document).ready(function () {
                           $(#ddlGroups).change(function () {
                               alert("Hello world!");
                           });
                        });

[编辑]我还有一个问题。根据下拉选择,我需要从ObjectDataSource获取相应的描述。这是服务器端代码。 你能给我相同的JQuery函数吗?

              protected void ddlActivityTypes_SelectedIndexChanged(object sender, EventArgs e)
                    {
                        string description = string.Empty;
                        var ddlActivityTypes = DetailsView1.FindControl("ddlActivityTypes") as DropDownList;
                        var textBox1 = DetailsView1.FindControl("TextBox1") as TextBox;
                        var activityDataSource = DetailsView1.FindControl("ActivityTypesDataSource") as ObjectDataSource;

                        if (!string.IsNullOrEmpty(ddlActivityTypes.SelectedValue))
                        {
                            IEnumerable IDs = activityDataSource.Select();

                            foreach (ActivityType item in IDs)
                            {
                                if (item.Name == ddlActivityTypes.SelectedItem.Text.ToString())
                                {
                                    description = item.Description;
                                }
                            }

                            textBox1.Text = description;
                        }

                    }

我在JQuery中尝试过这样的东西,但它不起作用。

                   $(document).ready(function () {
                       $('select[id*=ddlActivityTypes]').change(function () {
                           var selectedText = $('select[id*=ddlActivityTypes]').find("option:selected").text(); ;
                           var data = $('select[id*=ActivityTypesDataSource]').select();

                           data.each(function () {
                               if (selectedText == this.Name) {
                                   alert(this.description);
                               }

                       });
                   });

2 个答案:

答案 0 :(得分:1)

我假设这个“DropDownList”可以用不同的“clientID”呈现,你可以试试这个:

                  $(document).ready(function () {
                       $('select[id*=ddlGroups]').change(function () {
                           alert("Hello world!");
                       });
                    });

答案 1 :(得分:0)

当在页面上呈现此控件时,如果您使用母版页或嵌套控件等,则ID可能不相同。试试这个

$(document).ready(function () {
                           $("div[id*=DetailsView1]").find("select[id*=ddlGroups]").change(function () {
                               alert("Hello world!");
                           });
                        });