Remove From My Forums

ListViewでポストバック時の再描画について

質問

サインインして投票

-------------------------------------------------------------------
開発用PC
Windows8 Pro、VsiaulStudio2012(ASP.net C#)、ASP.NET開発サーバ、Framework4.5
MySQL Server 5.6、MySQL Connector Net 6.6.5
-------------------------------------------------------------------

お世話になります。
masterページ及びBootstrapを用い、Listviewを表示しております。
Listviewにはjquery.stickyheader.jsを用い、ヘッダーの固定、及び
tbodyのスクロール処理を実装しています。

Listviewに表示する行数が100件など、少ない場合には問題がないのですが、
行数が多くなると、ポストバックの度にListviewが一旦、全行表示後され、その後、縦サイズとスクロールが適用されてしまいます。
ListViewの編集ボタンやキャンセルボタンを押すだけでも再描画されるため、非常に見づらく、対応方法を模索しております。

何か良い方法がありましたら、教授頂けると幸いです。
宜しくお願い致します。

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="m_syouhin.aspx.cs" Inherits="m_syouhin" MaintainScrollPositionOnPostback="true" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolderContent" runat="Server">
 
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/component.css" />
    
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
	<script src="js/jquery.stickyheader.js"></script>
    
    <!-- /#container-fluid -->
    <div class="container-fluid">

        <br />

        <!-- Page Heading -->
        <div class="row">

            <div class="col-lg-12">

                <div class="panel panel-default">

                    <!--panel-heading-->
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-money fa-fw"></i>商品管理マスタ</h3>
                    </div>
                    <!--#panel-heading-->

                    <!--panel-body-->
                    <div class="panel-body">
                        
                        <div class="table-responsive">

                            <asp:ListView ID="_listView" runat="server" DataSourceID="MySqlDataSource" InsertItemPosition="LastItem" DataKeyNames="item,lot" OnItemInserting="_listView_ItemInserting">

                                <EditItemTemplate>
                                    <tr style="">
                                        <td class="text-nowrap" style="width: 20px"></td>
                                        <td class="text-nowrap col-sm-2">
                                            <asp:Button runat="server" CommandName="Update" Text="更新" ID="UpdateButton" />
                                            <asp:Button runat="server" CommandName="Cancel" Text="取消" ID="CancelButton" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:TextBox Text='<%# Bind("sort_id") %>' runat="server" ID="sort_idTextBox" /></td>
                                        <td class="text-nowrap col-sm-2">
                                            <asp:Label Text='<%# Eval("item") %>' runat="server" ID="itemLabel1" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:Label Text='<%# Eval("lot") %>' runat="server" ID="lotLabel1" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:TextBox Text='<%# Bind("itemgroup") %>' runat="server" ID="itemgroupTextBox" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:TextBox Text='<%# Bind("login_name") %>' runat="server" ID="login_nameTextBox" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:TextBox Text='<%# Bind("user_id") %>' runat="server" ID="user_idTextBox" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:TextBox Text='<%# Bind("updateday") %>' runat="server" ID="updatedayTextBox" Visible="false" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:TextBox Text='<%# Bind("createday") %>' runat="server" ID="createdayTextBox" Visible="false" /></td>
                                    </tr>
                                </EditItemTemplate>
                                <EmptyDataTemplate>

                                    <tr>
                                        <td>データは返されませんでした。</td>
                                    </tr>

                                </EmptyDataTemplate>
                                <InsertItemTemplate>
                                    <tr style="">
                                        <td class="text-nowrap" style="width: 20px"></td>
                                        <td class="text-nowrap col-sm-2">
                                            <asp:Button runat="server" CommandName="Insert" Text="挿入" ID="InsertButton" />
                                            <asp:Button runat="server" CommandName="Cancel" Text="クリア" ID="CancelButton" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:TextBox Text='<%# Bind("sort_id") %>' runat="server" ID="sort_idTextBox" /></td>
                                        <td class="text-nowrap col-sm-2">
                                            <asp:TextBox Text='<%# Bind("item") %>' runat="server" ID="itemTextBox" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:TextBox Text='<%# Bind("lot") %>' runat="server" ID="lotTextBox" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:TextBox Text='<%# Bind("itemgroup") %>' runat="server" ID="itemgroupTextBox" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:TextBox Text='<%# Bind("login_name") %>' runat="server" ID="login_nameTextBox" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:TextBox Text='<%# Bind("user_id") %>' runat="server" ID="user_idTextBox" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:TextBox Text='<%# Bind("updateday") %>' runat="server" ID="updatedayTextBox" Visible="false" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:TextBox Text='<%# Bind("createday") %>' runat="server" ID="createdayTextBox" Visible="false" /></td>
                                    </tr>
                                </InsertItemTemplate>
                                <ItemTemplate>
                                    <tr style="">
                                        <td class="text-nowrap" style="width: 20px">
                                            <asp:CheckBox ID="che_select" runat="server" /></td>
                                        <td class="text-nowrap col-sm-2">
                                            <asp:Button runat="server" CommandName="Edit" Text="編集" ID="EditButton" />
                                            <asp:Button runat="server" CommandName="Delete" Text="削除　" ID="DeleteButton" />
                                        </td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:Label Text='<%# Eval("sort_id") %>' runat="server" ID="sort_idLabel" /></td>
                                        <td class="text-nowrap col-sm-2">
                                            <asp:Label Text='<%# Eval("item") %>' runat="server" ID="itemLabel" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:Label Text='<%# Eval("lot") %>' runat="server" ID="lotLabel" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:Label Text='<%# Eval("itemgroup") %>' runat="server" ID="itemgroupLabel" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:Label Text='<%# Eval("login_name") %>' runat="server" ID="login_nameLabel" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:Label Text='<%# Eval("user_id") %>' runat="server" ID="user_idLabel" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:Label Text='<%# Eval("updateday") %>' runat="server" ID="updatedayLabel" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:Label Text='<%# Eval("createday") %>' runat="server" ID="createdayLabel" /></td>
                                    </tr>
                                </ItemTemplate>

                                <LayoutTemplate>
                                    <table runat="server" class="table table-bordered table-striped ">
                                        <tr runat="server">
                                            <td runat="server">
                                                <table border="0" class="table table-bordered table-hover table-striped table-hgroup overflow-y">
                                                    <thead class='header'>
                                                        <tr runat="server">
                                                            <th id="Th1" runat="server" class="text-nowrap col-sm-1">選択</th>
                                                            <th id="Th2" runat="server" class="text-nowrap col-sm-2">アクション</th>
                                                            <th id="Th3" runat="server" class="text-nowrap col-sm-1">表示順</th>
                                                            <th id="Th4" runat="server" class="text-nowrap col-sm-2">商品</th>
                                                            <th id="Th5" runat="server" class="text-nowrap col-sm-1">規格</th>
                                                            <th id="Th6" runat="server" class="text-nowrap col-sm-1">商品グループ</th>
                                                            <th id="Th7" runat="server" class="text-nowrap col-sm-1">担当者名</th>
                                                            <th id="Th8" runat="server" class="text-nowrap col-sm-1">担当ID</th>
                                                            <th id="Th9" runat="server" class="text-nowrap col-sm-1">更新日</th>
                                                            <th id="Th10" runat="server" class="text-nowrap col-sm-1">登録日</th>
                                                        </tr>
                                                    </thead>

                                                    <tbody>
                                                        <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
                                                    </tbody>

                                                </table>
                                            </td>
                                        </tr>

                                    </table>
                                </LayoutTemplate>
                                <SelectedItemTemplate>
                                    <tr style="">
                                        <td class="text-nowrap" style="width: 200px">
                                            <asp:CheckBox ID="che_select" runat="server" /></td>
                                        <td class="col-sm-2">
                                            <asp:Button runat="server" CommandName="Edit" Text="編集" ID="EditButton" />
                                            <asp:Button runat="server" CommandName="Delete" Text="削除　" ID="DeleteButton" />
                                        </td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:Label Text='<%# Eval("sort_id") %>' runat="server" ID="sort_idLabel" /></td>
                                        <td class="text-nowrap col-sm-2">
                                            <asp:Label Text='<%# Eval("item") %>' runat="server" ID="itemLabel" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:Label Text='<%# Eval("lot") %>' runat="server" ID="lotLabel" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:Label Text='<%# Eval("itemgroup") %>' runat="server" ID="itemgroupLabel" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:Label Text='<%# Eval("login_name") %>' runat="server" ID="login_nameLabel" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:Label Text='<%# Eval("user_id") %>' runat="server" ID="user_idLabel" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:Label Text='<%# Eval("updateday") %>' runat="server" ID="updatedayLabel" Visible="false" /></td>
                                        <td class="text-nowrap col-sm-1">
                                            <asp:Label Text='<%# Eval("createday") %>' runat="server" ID="createdayLabel" Visible="false" /></td>
                                    </tr>
                                </SelectedItemTemplate>
                            </asp:ListView>

                            <asp:SqlDataSource ID="MySqlDataSource" runat="server"
                                ConnectionString="<%$ ConnectionStrings:MySqlDataSorce %>"
                                ProviderName="<%$ ConnectionStrings:MySqlDataSorce.ProviderName %>"
                                SelectCommand="SELECT item, lot, itemgroup, user_id, login_name, updateday, createday,sort_id FROM m_syouhin order by sort_id,item,lot"
                                DeleteCommand="DELETE FROM m_syouhin where item=@item and lot=@lot"
                                InsertCommand="INSERT INTO m_syouhin (item, lot, itemgroup, user_id, login_name, updateday, createday,sort_id) values (@item, @lot,@itemgroup, @user_id, @login_name, @updateday, @createday,@sort_id) "
                                UpdateCommand="UPDATE m_syouhin SET itemgroup=@itemgroup,user_id=@user_id,login_name=@login_name,updateday=@updateday,createday=@createday,sort_id=@sort_id where item=@item and lot=@lot"
                                OnInserting="MySqlDataSource_Inserting"></asp:SqlDataSource>

                        </div>
                        <!--#table-responsive-->

                    </div>
                    <!--#panel-body-->

                </div>
                <!-- /.panel -->

            </div>
            <!-- /#col-lg-12 -->

        </div>
        <!-- /#Page Heading -->

    </div>
    <!-- /#page-wrapper -->

</asp:Content>

2015年1月8日 9:56

回答

1

サインインして投票
> Listviewに表示する行数が100件など、少ない場合には問題がないのですが、
> 行数が多くなると、ポストバックの度にListviewが一旦、全行表示後され、
> その後、縦サイズとスクロールが適用されてしまいます。

自分の感覚では 100 行で少ないということが理解不能ですし、ポストバックして再描画したから必然的にそうなったのだ思いますが、それを言ってもしかたがないのですよね・・・

> ListViewの編集ボタンやキャンセルボタンを押すだけでも再描画されるため、
> 非常に見づらく、対応方法を模索しております。

ListView だけで編集操作をしないで、DetailsView または FormView を併用して編集操作はそれで行うようにすれば、上記の問題だけは解決できるのではないですか？

ListView は一覧を表示してユーザーに編集するレコードを選択させるだけにして、ユーザーが ListView 上でレコードを選択したら UpdatePanel に入れた DetailsView または FormView を表示して、それを編集するようにしたら「編集ボタンやキャンセルボタンを押すだけでも再描画される」ということはなくなると思います。

具体例は以下のページが参考になりませんか？

ModalPopup で編集・更新操作
http://surferonwww.info/BlogEngine/post/2010/10/14/Select-edit-and-update-using-2-pages.aspx
- 回答としてマーク hys73 2015年1月10日 5:01
2015年1月8日 10:43

返信

|

引用

トップ回答者

ListViewでポストバック時の再描画について

質問

回答