更新パネルを使用してデータベース情報を表示しようとしている Web ページがあります。コードは正しく動作していますが、ページごとの結果が変更されるか、並べ替えが変更されると、ページが更新されます。そこで、トリガーなどを追加して非同期になるようにコードを設定しようとしましたが、何らかの理由でこれを行うと、テーブルがまったく更新されません。更新パネルの進行がトリガーされ、「読み込み中」と表示されますが、データ自体はまったく変更されません。基本的にデータを変更するには、DataSource1.SelectCommand「SELECT * FROM .... WHERE ...」を使用して、コードが使用しているデータソースを更新します。
- 私がこれをテストしたので、データソースは結果を正しく返します。
- 進捗イベントがトリガーされると、更新パネルが更新されます
- 最初にこの関数を実行すると、メイン ページに返される HTML は正しく、テーブルにデータが入力されます。更新しようとすると機能しません。
refresh で動作する元のコードは次のとおりです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div class="row">
<div class="large-4 columns" style="padding-top: 25px;">
</div>
<div class="large-3 large-offset-1 columns">
<label for="results">
Results Per Page :
</label>
<asp:DropDownList name="results" ID="results" runat="server" AutoPostBack="True"
OnTextChanged="results_TextChanged">
<asp:ListItem>10</asp:ListItem>
<asp:ListItem>25</asp:ListItem>
<asp:ListItem>50</asp:ListItem>
<asp:ListItem>100</asp:ListItem>
</asp:DropDownList>
</div>
<div class="large-4 columns">
<label for="filter">
Sort By :</label>
<asp:DropDownList ID="filter" name="filter" runat="server" OnTextChanged="filter_TextChanged"
AutoPostBack="True">
<asp:ListItem>Name A to Z</asp:ListItem>
<asp:ListItem>Name Z to A</asp:ListItem>
<asp:ListItem>Age Youngest to Oldest</asp:ListItem>
<asp:ListItem>Age Oldest to Youngest</asp:ListItem>
<asp:ListItem>Location A to Z</asp:ListItem>
<asp:ListItem>Location Z to A</asp:ListItem>
<asp:ListItem>Last Logged In</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<asp:updatepanel id="UpdatePanel1" runat="server" updatemode="Conditional">
<ContentTemplate>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Loading
</ProgressTemplate>
</asp:UpdateProgress>
<table class="large-12 columns">
<colgroup>
<col style="width: 40%;" />
<col style="width: 15%;" />
<col style="width: 15%;" />
<col style="width: 15%;" />
<col style="width: 15%;" />
</colgroup>
<thead>
<tr style="border-bottom: 1px solid #dddddd;">
<th class="aupairColour">
Photo
</th>
<th class="aupairColour">
Name
</th>
<th class="aupairColour">
From
</th>
<th class="aupairColour">
Age
</th>
<th class="aupairColour">
Last Logged In
</th>
</tr>
</thead>
<tbody>
<%= LoopBlock()%>
</tbody>
</table>
</ContentTemplate>
</asp:updatepanel>
</body>
</html>
そして、ここにビハインドコードがあります:
protected string LoopBlock()
{
//update datasource (the actual code for this has more switches etc)
if (filter == "Name A to Z")
{
DataSource1.SelectCommand "SELECT * FROM .... WHERE ...".
}
else
{
DataSource1.SelectCommand "SELECT * FROM .... WHERE ...".
}
//items per page value
int ipp = Convert.ToInt32(results.Text);
//get the HTML to print out to the screen, pass the Items per Page to this function
System.Text.StringBuilder sb = LoopBlockCode(ipp);
//return the HTML to the place in which it was called on the main page
return Convert.ToString(sb);
}
private System.Text.StringBuilder LoopBlockCode(int ipp)
{
//create a data view so the items can be dealt with
DataView dv = (DataView)Aupairs_DataSource.Select(DataSourceSelectArguments.Empty);
DataRowView drv;
//create a string builder so that long strings of HTML can be built
System.Text.StringBuilder sb = new System.Text.StringBuilder();
int n = Convert.ToInt32(ipp);
string name, city, country;
int age, numList;
//gets the amount of items returned from the DB query in another function
if (totalCount < ipp)
{
numList = totalCount;
}
else
{
numList = ipp;
}
try
{
for (int i = 0; i < numList; i++)
{
//loop each item that was returned from the DB and add it to the HTML elements
drv = dv[i];
//get age from DOB using the function in script
age = GlobalScript.AgeFromDOB(Convert.ToDateTime(drv["dob"].ToString()));
if (age >= Convert.ToInt32(min) && age <= Convert.ToInt32(max))
{
sb.Append("<tr>");
sb.Append("<td>");
sb.Append("<img height='100' width='100' src='" + drv["photo"].ToString() + "' alt='Family Profile Picture' />");
sb.Append("</td>");
sb.Append("<td>");
//capitalise the first letter of the name using function in script
name = GlobalScript.FirstLetterToUpper(drv["first_name"].ToString(), true);
//
sb.Append(name);
sb.Append("</td>");
sb.Append("<td>");
//capitalise the city and country using function in script
city = GlobalScript.FirstLetterToUpper(drv["city"].ToString(), true);
country = GlobalScript.FirstLetterToUpper(drv["country_desc"].ToString(), true);
//
sb.Append(city + ", " + country);
sb.Append("</td>");
sb.Append("<td>");
sb.Append(age);
sb.Append("</td>");
sb.Append("<td>");
sb.Append(drv["last_logon"].ToString());
sb.Append("</td>");
sb.Append("<tr>");
sb.Append("<tr style='border-bottom: 1px solid #dddddd;'>");
sb.Append("<td colspan='4'>");
sb.Append("<p>Description</p>");
sb.Append("<p>" + drv["intro_heading"].ToString() + "</p>");
sb.Append("<p>Interests</p>");
sb.Append("<p>" + drv["interests"].ToString() + "</p>");
//conversion of dates for start and finish
sb.Append("<span class='label'>Looking for a Family from " + Convert.ToDateTime(drv["start_date"].ToString()).ToString("dd/MM/yyyy") + " to " + Convert.ToDateTime(drv["end_date"].ToString()).ToString("dd/MM/yyyy") + " for " + drv["shortest_term"].ToString() + " to " + drv["longest_term"].ToString() + " months.</span>");
sb.Append("</td>");
sb.Append("</tr>");
}
}
return sb;
}
catch
{
sb.Clear();
sb.Append("");
return sb;
}
}
protected void results_TextChanged(object sender, EventArgs e)
{
UpdatePanel1.Update();
}
protected void filter_TextChanged(object sender, EventArgs e)
{
UpdatePanel1.Update();
}
そして、非同期を機能させるために、私が使用したもの:
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(results);
ScriptManager1.RegisterAsyncPostBackControl(filter);
}
更新パネルのトリガーを追加するために HTML にコードを追加しようとしましたが、これは機能していないようで、トリガーの登録を行う方がビハインド コード ロード イベントの方が優れていることを読みましたか?
上記の RegisterAsyncPostBackControl を使用している更新パネルの外に実際には他のフィルター コントロールがありますが、今のところそれらを切り取って単純化して、これらのコントロールを機能させようと考えました。