Remembering ListView page index and restoring it.

I am using ListView with DataPager to get a paging feature of my list.
I want to redirect my page when I click on an entry in the list view, show some detail information.
When I am done, I want to go back and view the exact same list of information.
That is, remembering the page index.

我是用DataPager幫我的ListView做分頁功能.我想要在使用者點選列表上某一條目後,
轉跳到別的頁面,顯示一些詳細資訊後,完成後回到剛才的列表頁面,要能看到剛才的那一個分頁.
就是說,要記住之前的頁碼.

Inside your ItemCommand handler method, use the following code snippet to find the correct startRowIndex
在你的ItemCommand處理程序裡面,用下面的程式片段去找出正確的startRowIndex

//index of the clicked item within the whole list
int l_dataIndex = ((ListViewDataItem)e.Item).DataItemIndex;
//minus the index of the item in that page = startRowIndex
int l_startRowIndex = l_dataIndex - ((ListViewDataItem)e.Item).DisplayIndex;
Store this index whatever you want, I store it by using GET method.
把索引值存在你喜歡的地方,我把它儲存在GET方法裡

Why do I call the above correct startRowIndex and not using the DataPager.startRowIndex?
Because we are going to use DataPager.SetPageProperties() in Page_Load() to restore the page we previously looking at.
為甚麼我會說上面的是正確的startRowIndex還有不去用DataPager.startRowIndex呢?
因為我們將會在Page_Load()裡用DataPager.SetPageProperties()去顯示之前我們在看的分頁

dataPager.SetPageProperties(l_startRowIndex, dpg_dataPager.MaximumRows, true);

This will bring you back to the page as we expect. But after this call.
The startRowIndex won’t update now even though you click next/previous to change your page.
That is why I said this is not the correct startRowIndex. You can try this youself ^^.
這個調用會把你帶到之前的分頁,正如我們預期.但在這個調用後,
startRowIndex就會停止更新,就算你點選上一頁/下一頁也不會改變.
這就是為甚麼我說上面的才是正確的startRowIndex.你可以自己試一試 ^^.

It turns out that I have done something stupid. The SetPageProperties() have to be inside IsPostBack to work correctly.
Result in something like this.

//in ItemCommand handler
url += "&startRowIndex=" + dataPager.startRowIndex;

//in Page_Load
if (!IsPostBack)
{
dataPager.SetPageProperties(startRowIndex, dataPager.MaximumRows, true);
}

Hidden field in ListView, for my Guid, or just hidden field.

Their are many times developer bind their data from database to the user interface and we wants to know what the user has chosen.

But in the meantime, the user will never wants to see the Guid. So what we need is a hidden field or a branch of hidden fields.

If you try to do this by a label with Visible=”false”. You won’t get what you want. Because ASP will just skip rendering not visible controls. They don’t even exist in your user interface.

We should use HiddenField and assign the Guid to its value. I do this in my ListView template and get the Guid back by FindControl().

開發網頁系統時,很常把資料庫的資料跟介面結合,然後我們想知道使用者選了甚麼項目,勾了那一行裡的checkbox. 但同時我們不想使用者在介面上看到Guid. 所以我們需要隱藏欄位.

如果你把Guid放在一個Label並設定Visible為false,那並不能成為一個隱藏欄位,ASP會在繪制UI時就不會繪Visible為false的控制項,它不存在你也取不出Guid.所以我們應該產生一個HiddenField控制項,把Guid存進去它的value. 我在我的ListView裡的每一行加一個HiddenField,再用FindControl()把Guid取回來.

ListView with dynamic template in action

In the previous article “Keep it MVC. Use templated controls without injecting Eval() in your aspx” I write about how to implement dynamic template. Now let’s look at how to use them.

There are a few things we should know before using template and ListView.

1. There are build-in action you can use. What I mean build-in is, you can assign some pre-defined CommandName to your control inside your ListView, such as a LinkButton, then if you assign CommandName=”Edit” to it, the event you should be handling when that button is being click is ListView.Onitemediting. Here is the list of build-in CommandName I know and the event handler which handle them.

在前一篇怎樣避免在頁面加入Eval()同時設定資料要怎樣跟ListView綁定.也知道了怎樣實作模板.現在來看看要怎樣應用之前做出來的東西.

使用之前有些東西我們應該要知道,對使用上會有幫助.

1. ListView有一些內建的事件可以用,內建的意思是你只要在ListView裡的控制項設定適當的CommandName就能喚起對應該事件.例如一個LinkButton,如果你把它的CommandName設為Edit,當它被Click時,會喚起ListView的Onitemediting事件.下面是一部份常用的內建CommandName及其對應的事件.

CommandName Event Handler
Insert oniteminserting
Edit onitemediting
Update onitemupdating
Delete onitemdeleting
Cancel onitemcanceling

There should be more, but these are enough for us to discuss.

After we have the template and took care of LayoutTemplate. We have to assign the template to our ListView.

應該還有其他內建的CommandName,但暫時這些就夠了.

我們已經有模板和寫好的LayoutTemplate.現在我們把模板指定給ListView

protected void Page_Init(object sender, EventArgs e)
        {
            ltv_webpages.ItemTemplate = new WebpageListViewTemplate(ListViewTemplateType.ItemTemplate);
            ltv_webpages.AlternatingItemTemplate = new WebpageListViewTemplate(ListViewTemplateType.AlternatingItemTemplate);
            ltv_webpages.EditItemTemplate = new WebpageListViewTemplate(ListViewTemplateType.EditItemTemplate);
            ltv_webpages.InsertItemTemplate = new WebpageListViewTemplate(ListViewTemplateType.InsertItemTemplate);
        }

We have to do this in Page_Init(). If you do this in Page_Load(), you will get a template not define error. If you want to know why this happen, it is because .NET will create and initialize all controls object before Page_Load() is reach. Take a look at any ASP page life cycle tutorial if you want to know more about this.

Then we have to bind data to the ListView. You can bind it in Page_Load(), but doing this, when you add a DataPager to your ListView, it won’t work properly. So, we should do the binding in Page_PreRender().

我們要在Page_Init()做這個動作,如果你在Page_Load()裡做這個動作,你會得到一個缺少模板定義的錯誤.如果想知道為甚麼會這樣,可以去看一下.NET的Page life cycle.在Page_Load()前就會建立好所有控制項.

然後我們把資料綁到ListView.可以在Page_Load()做這個動作,但這樣就沒辦法用DataPager.所以我們應該在Page_PreRender()把資料綁定.

protected void Page_PreRender(object sender, EventArgs e)
        {
            ltv_webpages.DataSource = WebpageDA.GetAllPageInformation();
            ltv_webpages.DataBind();
        }

Then, the last thing, inserting, editing and deleting data in ListView.

接著就是最後一項,加入,修改,刪除ListView的資料

1. Insert, set the ListView.InsertItemPosition to InsertItemPosition.FirstItem or InsertItemPosition.LastItem. This will make the InsertItemTemplate appears as the first or last item in the ListView. Then after you read the user input and done the inserting. assign InsertItemPosition.None to ListView.InsertItemPosition. Then the insertItemTemplate will be gone.

1. 新增,設定ListView.InsertItemPosition為InsertItemPosition.FirstItem或InsertItemPosition.LastItem其中一個. 這樣InsertItemTemplate就會出現在你設定的位置. 在完成加入動作後,把InsertItemPosition設為InsertItemPosition.None. InsertITemTemplate就會消失.

2. Editing, assign the index of which you wants to edit to ListView.EditIndex.

2. 修改, 把你想要修改的行數指定給ListView.EditIndex.

protected void ltv_webpages_ItemEditing(object sender, ListViewEditEventArgs e)
        {
            ltv_webpages.EditIndex = e.NewEditIndex;
        }

3. Canceling, you have to handle two canceling, edit canceling and insert canceling. by setting EditIndex to -1 or InsertItemPosition to None.

3. 取消, 你要處理兩種取消,修改取消和新增取消,把EditIndex設成-1,把InsertItemPosition設為None.

protected void ltv_webpages_ItemCanceling(object sender, ListViewCancelEventArgs e)
        {
            if (e.CancelMode == ListViewCancelMode.CancelingEdit)
            {
                ltv_webpages.EditIndex = -1;
            }
            else if (e.CancelMode == ListViewCancelMode.CancelingInsert)
            {
                ltv_webpages.InsertItemPosition = InsertItemPosition.None;
            }
        }

If you want some custom command, CommandName = “YourCommand”, the use a switch in onitemcommand event handler to handle it.

This pretty much wrap everything common up. I will post sample code when I could.

See you next time.

如果你想用自訂的指令, CommandName=”YourCommand”, 然後你可以在Onitemcommand裡用一個Switch去處理不同的Command.

最常用的大概就這些了.