Практическое руководство. Добавление динамического поведения в элементы управления ListView и FormView

В этом разделе описывается добавление поведения платформы динамических данных ASP.NET в элементы управления ListView и FormView с помощью элемента управления DynamicControl. Класс DynamicControl используется элементами управления с привязкой к данным для отображения полей данных, использующих функции платформы динамических данных.

Для добавления динамического поведения в элементы управления ListView и FormView необходимы следующие компоненты.

Проект Visual Studio с исходным кодом этого примера доступен на следующей странице: Adding Dynamic Data.

Добавление динамической реакции на событие

  1. В Visual Studio 2010 или Visual Web Developer 2010, экспресс-выпуск откройте веб-сайт, на который требуется добавить поведение платформы динамических данных.

  2. Откройте веб-страницу ASP.NET, содержащую элемент управления EntityDataSource или LinqDataSource.

  3. Добавьте на страницу элемент управления ListView или FormView.

  4. Добавьте на страницу элемент управления DynamicDataManager.

  5. В качестве значения свойства ControlID элемента DataControlReference в элементе управления DynamicDataManager задайте идентификатор элемента управления ListView или FormView.

    В результате будет зарегистрирован элемент управления с привязкой данных, и в нем будет включена поддержка динамического поведения.

  6. В качестве значения свойства DataSourceID элемента управления ListView или FormView задайте идентификатор элемента управления EntityDataSource или LinqDataSource.

  7. Для каждого столбца в элементе управления ListView или каждой строки в элементе управления FormView, для которых требуется разрешить отображение поля данных, выполните следующие действия.

    1. Добавьте элемент управления DynamicControl в шаблон ItemTemplate элемента управления с привязкой к данным.

    2. В качестве значения свойства DataField элемента управления DynamicControl задайте имя столбца или строки данных, к которой требуется выполнить привязку.

  8. Для каждого столбца в элементе управления ListView или каждой строки в элементе управления FormView, для которых требуется разрешить редактирование поля данных, выполните следующие действия.

    1. Добавьте элемент управления DynamicControl в шаблон EditItemTemplate элемента управления с привязкой к данным.

    2. В качестве значения свойства DataField элемента управления DynamicControl задайте имя столбца или строки данных, к которой требуется выполнить привязку.

    3. Задайте для свойства Mode значение Edit.

В следующих примерах приведены две страницы, разрешающие поведение платформы динамических данных для элементов управления ListView и FormView с помощью элемента управления DynamicControl.

Эти страницы можно использовать в веб-сайтах как с технологией scaffolding, так и без нее. В любом случае необходимо зарегистрировать контекст модели данных. Модель данных может быть моделью LINQ-to-SQL либо Entity Framework.


        <asp:ListView ID="ListView1" runat="server" DataKeyNames="CustomerID"  
            DataSourceID="EntityDataSource1">

            <EditItemTemplate>
                <tr style="">
                    <td>
                        <asp:LinkButton ID="UpdateButton" runat="server" CommandName="Update" 
                         CausesValidation="true" Text="Update" />
                        <asp:LinkButton ID="CancelButton" runat="server" CommandName="Cancel"  
                        CausesValidation="false" Text="Cancel" />
                    </td>


                    <td>
                        <asp:DynamicControl runat="server" DataField="FirstName" Mode="Edit" />
                    </td>

                    <td>
                        <asp:DynamicControl runat="server" DataField="LastName" Mode="Edit" />
                    </td>

                    <td>
                        <asp:DynamicControl runat="server" DataField="CompanyName" Mode="Edit" />
                    </td>

                    <td>
                        <asp:DynamicControl runat="server" DataField="EmailAddress" Mode="Edit" />
                    </td>

                    <td>
                        <asp:DynamicControl runat="server" DataField="ModifiedDate" Mode="Edit" />
                    </td>

                </tr>
            </EditItemTemplate>
            <EmptyDataTemplate>
                <table runat="server" style="">
                    <tr>
                        <td>
                            No data was returned.</td>
                    </tr>
                </table>
            </EmptyDataTemplate>

            <ItemTemplate>
                <tr style="">
                    <td>

                        <asp:LinkButton ID="EditButton" runat="server" CommandName="Edit" Text="Edit" />
                        <asp:LinkButton ID="LinkButton2" runat="server" CommandName="Delete" Text="Delete"
                            OnClientClick='return confirm("Are you sure you want to delete this item?");' />

                    </td>


                    <td>
                        <asp:DynamicControl runat="server" DataField="FirstName" Mode="ReadOnly" />
                    </td>

                    <td>
                        <asp:DynamicControl runat="server" DataField="LastName" Mode="ReadOnly" />
                    </td>

                    <td>
                        <asp:DynamicControl runat="server" DataField="CompanyName" Mode="ReadOnly" />
                    </td>

                    <td>
                        <asp:DynamicControl runat="server" DataField="EmailAddress" Mode="ReadOnly" />
                    </td>

                    <td>
                        <asp:DynamicControl runat="server" DataField="ModifiedDate" Mode="ReadOnly" />
                    </td>

                </tr>
            </ItemTemplate>
            <LayoutTemplate>
                <table  class="ExampleView" runat="server">
                    <tr runat="server">
                        <td runat="server">
                            <table ID="itemPlaceholderContainer" runat="server" border="0" style="">
                                <tr runat="server" style="">
                                    <th runat="server">
                                    </th>

                                    <th runat="server">
                                        FirstName</th>

                                    <th runat="server">
                                        LastName</th>

                                    <th runat="server">
                                        CompanyName</th>

                                    <th runat="server">
                                        EmailAddress</th>

                                    <th runat="server">
                                        ModifiedDate</th>

                                </tr>
                                <tr ID="itemPlaceholder" runat="server">
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr runat="server">
                        <td runat="server" style="">
                            <asp:DataPager ID="DataPager1" runat="server">
                                <Fields>
                                    <asp:NumericPagerField />
                                </Fields>
                            </asp:DataPager>
                        </td>
                    </tr>
                </table>
            </LayoutTemplate>
            <SelectedItemTemplate>
                <tr style="">
                    <td>

                        <asp:LinkButton ID="EditButton" runat="server" CommandName="Edit" Text="Edit" />
                        <asp:LinkButton ID="LinkButton2" runat="server" CommandName="Delete" Text="Delete"
                            OnClientClick='return confirm("Are you sure you want to delete this item?");' />
                    </td>

                    <td>
                        <asp:DynamicControl runat="server" DataField="FirstName" Mode="ReadOnly" />
                    </td>

                    <td>
                        <asp:DynamicControl runat="server" DataField="LastName" Mode="ReadOnly" />
                    </td>

                    <td>
                        <asp:DynamicControl runat="server" DataField="CompanyName" Mode="ReadOnly" />
                    </td>

                    <td>
                        <asp:DynamicControl runat="server" DataField="EmailAddress" Mode="ReadOnly" />
                    </td>

                    <td>
                        <asp:DynamicControl runat="server" DataField="ModifiedDate" Mode="ReadOnly" />
                    </td>


                </tr>
            </SelectedItemTemplate>
        </asp:ListView>




              <asp:FormView ID="FormViewId" runat="server" AllowPaging="True"  CssClass="DDDetailsTable"
                  DataSourceID="EntityDataSource1">
                  <EditItemTemplate>
                      FirstName:
                      <asp:DynamicControl ID="FirstNameDynamicControl" runat="server" 
                          DataField="FirstName" Mode="Edit" />
                      <br />
                      LastName:
                      <asp:DynamicControl ID="LastNameDynamicControl" runat="server" 
                          DataField="LastName" Mode="Edit" />
                      <br />
                      CompanyName:
                      <asp:DynamicControl ID="CompanyNameDynamicControl" runat="server" 
                          DataField="CompanyName" Mode="Edit" />
                      <br />
                      EmailAddress:
                      <asp:DynamicControl ID="EmailAddressDynamicControl" runat="server" 
                          DataField="EmailAddress" Mode="Edit" />
                      <br />
                      ModifiedDate:
                      <asp:DynamicControl ID="ModifiedDateDynamicControl" runat="server" 
                          DataField="ModifiedDate" Mode="Edit" />
                      <br />
                      <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" 
                          CommandName="Update" Text="Update" />
                      &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" 
                          CausesValidation="False" CommandName="Cancel" Text="Cancel" />
                  </EditItemTemplate>

                  <ItemTemplate>
                  <table  class="DDDetailsTable">
                    <tr> 
                        <td> FirstName:</td>
                        <td> <asp:DynamicControl ID="FirstNameDynamicControl" runat="server" 
                          DataField="FirstName" /></td> 
                    </tr>

                    <tr>
                        <td> LastName: </td>
                        <td> <asp:DynamicControl ID="LastNameDynamicControl" runat="server" 
                          DataField="LastName" /></td>
                    </tr>                
                    <tr>
                        <td> Company Name: </td>
                        <td> <asp:DynamicControl ID="CompanyNameDynamicControl" runat="server" 
                          DataField="CompanyName" /> </td>
                    </tr>
                    <tr>
                        <td>EmailAddress:</td>
                        <td><asp:DynamicControl ID="EmailAddressDynamicControl" runat="server" 
                            DataField="EmailAddress" /></td>
                    </tr>
                    <tr>
                        <td> Modified Date:</td>
                        <td><asp:DynamicControl ID="ModifiedDateDynamicControl4" runat="server" 
                          DataField="ModifiedDate" /></td>
                    </tr>

                  </table>

                  <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Edit" Text="Edit" /> &nbsp;
                  <asp:LinkButton ID="LinkButton2" runat="server" CommandName="Delete" Text="Delete"
                    OnClientClick='return confirm("Are you sure you want to delete this item?");' />

                  </ItemTemplate>

              </asp:FormView>



Для выполнения этого примера требуются следующие компоненты:

Показ: