6

最近、私が取り組んでいるいくつかのイントラネット アプリで ASP.NET AJAX UpdatePanel コントロールを頻繁に使用しています。ほとんどの場合、これを使用してデータを動的に更新したり、フォーム上のコントロールを表示または非表示にしたりしています。ユーザーのアクション。

少し困っているところがあり、どなたかアドバイスをいただけないでしょうか。私のフォームは、ユーザーが入力するラベルとフィールドのグリッドを表示するためにテーブルが使用される、非常に典型的なテーブルベースのレイアウトを使用しています。(テーブルベースのレイアウトを敬遠する人がいることは既に知っており、長所と短所は理解しています。しかし、それは私が行った選択なので、「テーブルベースのレイアウトを使用しないでください」と答えないでください。)

今私の問題は、一連の行の周りに UpdatePanel をラップして、それらを動的に非表示および表示できるようにしたい場合があることですが、UpdatePanel では実際にはそれができません。基本的な問題は、それらの周りに div をラップすることです。私の知る限り、テーブルの行を div でラップすることはできません。有効な HTML ではありません。

したがって、私が対処してきた方法は、動的な行を完全に新しいテーブル全体の一部にすることです。これは問題ありませんが、すべての列をその上のテーブルに手動で配置する必要があります。痛みとかなり壊れやすい。

それで、質問は... UpdatePanelまたは同様のものを使用して行を動的に生成または更新するためのテクニックを知っている人はいますか? ページに UpdatePanel をドロップするのと同じくらい簡単に解決できることを願っていますが、そうでない場合でも、私はそれを聞きたいと思っています。

4

7 に答える 7

5

UpdatePanel は DIV タグとしてレンダリングされるため、テーブルの行間では無効です。(非常に悪い) テーブル レイアウトを維持しながらコンテンツを非表示にすることだけが必要な場合は、次のように表示値の ASP var を含む行にスタイル タグを含めます。

<tr style="display: <%= visible %>">
     <td></td>
</tr>

次に、必要に応じて可視変数を操作します。

とはいえ、適切なレイアウトを脇に置くと、ここであなたを傷つけます.

于 2008-12-10T17:15:27.040 に答える
3

UpdatePanels (または一般的な AJAX ポストバック) は、単に要素を非表示または表示するために使用しないでください。データを更新する必要がある場合、それは 1 つのことですが、それ以外の場合は、JavaScript を使用してディスプレイの CSS プロパティを変更してください。

jQuery のようなクライアント フレームワークを使用すると、さらに簡単になります。次のようなことができます。

<button onclick="$('.inactive').toggle();">Toogle Inactive</button>

<table>
<tr class="inactive"><td>Inactive 1</td></tr>
<tr class="inactive"><td>Inactive 2</td></tr>
<tr><td>Active 1</td></tr>
<tr><td>Active 2</td></tr>
</table>
于 2008-12-11T23:40:01.320 に答える
2

回答：結局、UpdatePanelを使用してこれを行う方法はありません。達成できる最善の方法は、テーブル全体を更新することですが、個々の行を更新することはできません。

于 2009-02-19T07:37:40.320 に答える
2

コントロールを動的に作成している場合は、コントロールの生成中に表示または非表示にするものを決定できます。

次のようなこともできます。

<table>
    <tr id="row1" runat="server">
        <td>Label</td><td>Field</td>
    </tr>
</table>

そしてコードビハインドから：

row1.visible = false;

@Rob Allenの回答を修正して、これを行います：

CSS

.hidden_row {
    display: none;
}

ASPX

<tr class="<%= variable %>">

同じ考えで、CSS をテーブルに直接コーディングする代わりに、クラスを使用するだけです。

于 2008-12-11T23:36:07.410 に答える
2

ASP コード:

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<table width="100%">
    <tr>
        <td style="width: 300px">
            Employee First Name
        </td>
        <td>
            <asp:TextBox ID="txtFname" runat="server"></asp:TextBox>
        </td>
    </tr>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <tbody>
                <tr>
                    <td style="width: 300px">
                        Date Of Birth
                    </td>
                    <td>
                        <asp:TextBox ID="txtDOB1" runat="server" OnTextChanged="txtDOB_TextChanged" AutoPostBack="true"></asp:TextBox>
                        <asp:CalendarExtender ID="txtDOB1_CalendarExtender" runat="server" Enabled="True"
                            TargetControlID="txtDOB1">
                        </asp:CalendarExtender>
                    </td>
                </tr>
                <tr>
                    <td style="width: 300px">
                        Age
                    </td>
                    <td>
                        <asp:TextBox ID="txtAge" Style="font-weight: bold; font-size: large" runat="server"
                            Enabled="false"></asp:TextBox>
                    </td>
                </tr>
            </tbody>
        </ContentTemplate>
    </asp:UpdatePanel>
    <tr>
        <td align="right" style="width: 300px">
            <asp:Button ID="btnSubmit" runat="server" CssClass="button" Text="Submit" />
        </td>
        <td>
            <asp:Button ID="btnClear" runat="server" CssClass="button" Text="Reset" />
        </td>
    </tr>
</table>

クラスコード:

protected void txtDOB_TextChanged(object sender, EventArgs e)
{
    try
    {
        DateTime Today = DateTime.Now;
        DateTime DOB = Convert.ToDateTime(txtDOB1.Text);
        ArrayList arr = new ArrayList();
        arr = span(Today, DOB);
        arr[0].ToString();//For Years
        arr[1].ToString();//For Months
        arr[2].ToString();//For Days
        txtAge.Text = "Y: " + arr[0].ToString()+",M: "+arr[1].ToString()+",D: "+arr[2].ToString();

    }
    catch (Exception ex)
    {

        lblError.Text = "Error : " + ex.Message ;
    }
}
public ArrayList span(DateTime f, DateTime l)
{
    int days;
    int months;
    int years;

    int fird = f.Day;
    int lasd = l.Day;

    int firm = f.Month;
    int lasm = l.Month;

    if (fird >= lasd)
    {
        days = fird - lasd;
        if (firm >= lasm)
        {
            months = firm - lasm;
            years = f.Year - l.Year;
        }
        else
        {
            months = (firm + 12) - lasm;
            years = f.AddYears(-1).Year - l.Year;
        }
    }
    else
    {
        days = (fird + 30) - lasd;
        if ((firm - 1) >= lasm)
        {
            months = (firm - 1) - lasm;
            years = f.Year - l.Year;
        }
        else
        {
            months = (firm - 1 + 12) - lasm;
            years = f.AddYears(-1).Year - l.Year;
        }
    }


    if (days < 0)
    {
        days = 0 - days;
    }
    if (months < 0)
    {
        months = 0 - months;
    }
    ArrayList ar = new ArrayList();
    ar.Add(years.ToString());
    ar.Add(months.ToString());
    ar.Add(days.ToString());
    return ar;
}
于 2012-11-07T08:29:21.300 に答える
2

私は同じ問題を抱えていて、解決策を見つけました。

テーブル全体が Updatepanel 内にある場合、テーブルの TD 部分を更新できます!!

理由がわからない。わたしにはできる。

<asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate> <table ID="Table1">
<tr>
<td >
...
</td>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<td >
....
</td>
<td >
...
</td>
<td >
...
</td>
</ContentTemplate>
</asp:UpdatePanel> 

</tr>

 </table></ContentTemplate></asp:UpdatePanel>
于 2012-05-26T03:49:39.403 に答える
0

私たちのプロジェクトでは、この問題の解決策を見つけました。各行に多くのアクティブな要素 (編集、承認などのボタン) を含む複雑なレポートを作成する必要がありました。

updatepanel に配置される div を作成しました (必要に応じてテーブル全体を更新するため)。この div では、ヘッダー定義を含むテーブルを作成し、行ごとに個別のテーブルを作成しました (これらのテーブルは更新パネルに配置されます)。各行に等しい列を作成するには、テーブル セルごとに css クラスを使用する必要があります。

したがって、次のようなものがあります (各行にはボタン、ドロップダウン、ツールチップなどはほとんどありませんが、アイデアを理解するために 1 つの列に切り捨てました):

<UpdatePanel>
<DIV>
    <TABLE>
    <TR>
    <TH class="h1">Name</TH>
    </TR>
    </TABLE>

    <UpdatePanel Id='InnerPanel1'>
        <TABLE>
        <TR>
        <TD class="h1">John</TD>
        </TR>
        </TABLE>
    </UpdatePanel>
</DIV>
</UpdatePanel>

エレガントではなく、大きな HTML を生成しますが、機能します。

于 2011-04-19T22:56:35.153 に答える