ASP.NET GridView의 ItemTemplate 태그 내에서 각 항목에 대한 바닥글 레코드 만들기

19678 단어 HTML 아 SP. 네 T C#

1. 소개

현재 ASP.NET의 이슈에 종사하고 있으며, 각 라인에 바닥글 레코드를 삽입한 GridView 레이아웃 작성을 의뢰하였습니다.
조금 다루어 버렸으므로, 비망으로 기재합니다.
또, 이번 안건에서는 GridView를 계승한 커스텀 컨트롤을 사용해야 하는 규약이었으므로, 꽤 고리추천으로 기술하고 있습니다. . . . .
양해 바랍니다.

2. 하고 싶은 일

열 결합한 행을 각 품목 행 아래에 추가하는 것과 같은 이미지입니다.
통상의 html라면 에 colspan 지정하면 좋다, 어쩔 수 없는 레이아웃이 됩니다.

Sample.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Sample</title>
  </head>
  <body>
    <table id="PersonTable" border="1" cellspacing="0" cellpadding="0">
        <tr style="background-color:#6088C6;">
            <th>ID</th>
            <th>Name</th>
            <th>Gender</th>
        </tr>
        <tr>
            <td rowspan="2">001</td>
            <td>Taro Tanaka</td>
            <td>Male</td>
        </tr>
        <tr>
            <td colspan="2">Remarks：Normal Employee</td>
        </tr>
        <tr>
            <td rowspan="2">002</td>
            <td>Yuki Suzuki</td>
            <td>Female</td>
        </tr>
        <tr>
            <td colspan="2">Remarks：Leader</td>
        </tr>
    </table>
  </body>
</html>

3. DataGrid 컨트롤 내에서 구현

그래서 구현해 보았습니다.

Sample.aspx

<%@ Page Title="Sample Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Sample .aspx.cs" Inherits="WebApplication1._Sample " %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <asp:GridView ID="PersonView" runat="server" 
        autoGenerateColumns="false" 
        headerStyle-BackColor="#6088C6" OnRowDataBound="PersonView_RowDataBound">
        <Columns>
            <asp:TemplateField>
                <HeaderTemplate>
                    <asp:Label runat="server" Text="ID"></asp:Label>
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:Label id="IDLabel" runat="server" Text=<%# DataBinder.Eval(Container.DataItem, "ID").ToString() %>></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <HeaderTemplate>
                    <asp:Label runat="server" Text="Name"></asp:Label>
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:Label id="NameLabel" runat="server" Text=<%# DataBinder.Eval(Container.DataItem, "Name").ToString() %>></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <HeaderTemplate>
                    <asp:Label runat="server" Text="Gender"></asp:Label>
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:Label id="GenderLabel" runat="server" Text=<%# DataBinder.Eval(Container.DataItem, "Gender").ToString() %>></asp:Label>
                    </td></tr>
                    <tr id="DetailFooterRow">
                        <td colspan ="2">
                             <asp:Label id="RemarksCaptionLabel" runat="server" Text="Remarks："></asp:Label>
                             <asp:Label id="RemarksLabel" runat="server" Text=<%# DataBinder.Eval(Container.DataItem, "Remarks").ToString() %>></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</asp:Content>

Sample.aspx.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;

namespace WebApplication1
{
    /// <summary>
    /// Defaultページクラス
    /// </summary>
    public partial class _Sample : Page
    {
        /// <summary>
        /// ロードイベント
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void Page_Load(object sender, EventArgs e)
        {
            //----------------------------------------
            // [1] バインドデータ作成
            //----------------------------------------
            DataTable personTable = new DataTable("PersonTable");

            //カラム設定
            personTable.Columns.AddRange(new DataColumn[]
            {
                 new DataColumn("ID", typeof(string))
                ,new DataColumn("Name", typeof(string))
                ,new DataColumn("Gender", typeof(string))
                ,new DataColumn("Remarks", typeof(string))
            });

            //データを追加
            personTable.Rows.Add(new string[] { "001", "Taro Tanaka", "Male", "Normal Employee" });
            personTable.Rows.Add(new string[] { "002", "Yuki Suzuki", "Female", "Leader" });

            //----------------------------------------
            // [2] GridViewにバインド
            //----------------------------------------
            this.PersonView.DataSource = new DataView(personTable);
            this.PersonView.DataBind();
        }

        /// <summary>
        /// 行バインドイベント
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void PersonView_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            //DataBind行のみを対象
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                //IDセルの行幅を設定
                e.Row.Cells[0].RowSpan = 2;
            }
        }
    }
}

위의 코딩은 다음과 같은 동적 코드를 생성합니다.

Sample.html

<table cellspacing="0" rules="all" border="1" id="MainContent_PersonView" style="border-collapse:collapse;">
        <tr style="background-color:#6088C6;">
            <th scope="col">
                    <span>ID</span>
                </th><th scope="col">
                    <span>Name</span>
                </th><th scope="col">
                    <span>Gender</span>
                </th>
        </tr><tr>
            <td rowspan="2">
                    <span id="MainContent_PersonView_IDLabel_0">001</span>
                </td><td>
                    <span id="MainContent_PersonView_NameLabel_0">Taro Tanaka</span>
                </td><td>
                    <span id="MainContent_PersonView_GenderLabel_0">Male</span>
                    </td></tr>
                    <tr id="DetailFooterRow">
                        <td colspan ="2">
                             <span id="MainContent_PersonView_RemarksCaptionLabel_0">Remarks：</span>
                             <span id="MainContent_PersonView_RemarksLabel_0">Normal Employee</span>
                </td>
        </tr><tr>
            <td rowspan="2">
                    <span id="MainContent_PersonView_IDLabel_1">002</span>
                </td><td>
                    <span id="MainContent_PersonView_NameLabel_1">Yuki Suzuki</span>
                </td><td>
                    <span id="MainContent_PersonView_GenderLabel_1">Female</span>
                    </td></tr>
                    <tr id="DetailFooterRow">
                        <td colspan ="2">
                             <span id="MainContent_PersonView_RemarksCaptionLabel_1">Remarks：</span>
                             <span id="MainContent_PersonView_RemarksLabel_1">Leader</span>
                </td>
        </tr>
    </table>

포인트로서는 의 마지막 항목 바로 아래에 를 기술해, 그 하부에 를 기술하고 있습니다.
위에서 동적 소스 생성시 무리하게 요소를 추가하고 있습니다.

그리고 실제로 표시되는 페이지가 여기가 됩니다.
(손 빼고 죄송합니다...)

4. 우려 사항

이번에는 Style 계열의 속성 변경이 없었기 때문에 위의 논리에서 문제가 없었습니다.
그러나 GridView의 AlternatingRowStyle 등의 속성을 지정할 때는주의가 필요합니다.
위의 속성은 어디까지나 동적으로 생성되는 단위로 설정됩니다.
따라서 을 억지로 닫으면 속성에 지정된 스타일이 적용되지 않습니다.
해결책으로서는, 이벤트의 타이밍으로 설정 가능하면, 대상의 를 HtmlTableRow 클래스나 TableRow 클래스로 설정해 줄까, css로 클래스를 정의해, JavaScript등으로 구현할 수 있을 것 같습니다.
(※필자는 아직 검증 할 수 없습니다.)

Reference

이 문제에 관하여(ASP.NET GridView의 ItemTemplate 태그 내에서 각 항목에 대한 바닥글 레코드 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kyaloway/items/d0b5118a18b7396fdd76

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Windows10 IIS에 웹 앱을 배포하는 데 필요한 기능 사용

asp.net > swagger

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다