3

心に留めておいてください、私はクライアント側のスクリプトを作成するのが初めてで、自分の道を学んでいます..

表形式のデータを含むページを作成し、ユーザーが特定のリンクをクリックしてモーダル ポップアップを表示し、リクエストを送信できるようにする必要があります。

このフォームを DIV に配置し、jQuery を使用して表示しますが、問題ありません。「テーブル」については、クリックとデータを最適な方法で接続する方法についてジレンマがあります。私はクラスでそれを行う傾向がありますが、私の HTML は次のようになります。

<ItemTemplate>
  <tr>
    <td class="tripId"><%# DataBinder.Eval(Container.DataItem, "TripId")%></td>
    <td class="pickupDate"><%# DataBinder.Eval(Container.DataItem, "PickupDate", "{0:MM/dd/yy}")%></td>
    <td class="from"><%# DataBinder.Eval(Container.DataItem, "FromCity")%>, <%# DataBinder.Eval(Container.DataItem, "FromState")%></td>
    <td class="deliveryDate"><%# DataBinder.Eval(Container.DataItem, "DeliveryDate", "{0:MM/dd/yy}")%></td>
    <td class="to"><%# DataBinder.Eval(Container.DataItem, "ToCity")%>, <%# DataBinder.Eval(Container.DataItem, "ToState")%></td>
    <td class="weight"><%# DataBinder.Eval(Container.DataItem, "Weight")%></td>
    <td><%# DataBinder.Eval(Container.DataItem, "LoadedMiles")%></td>
    <td><%# DataBinder.Eval(Container.DataItem, "RequiredEquipment")%></td>
    <td><a href="#" class="inquireLink"><strong>Inquire now</strong></a></td>
  </tr>
</ItemTemplate>

JavaScript では、次のようにすべての href にフックします。

// Hookup link events to handle modal popup
$(".inquireLink").on("click", function (event) {
    event.preventDefault();
    inquireAboutTrip($(this));
});

function inquireAboutTrip($link) {
   // Link located on <TR> so we can traverse up and then into each cell to get data
}

したがって、リンクから TR までトラバースし、各 CLASS から TD 内のデータを見つけることができます。次に、必要に応じてこのデータをフォームで使用できます。2 つの問題があります: VS2012 は、これらすべてのクラスが未定義であると不平を言います (もちろん、それらは CSS にはありません)。別の問題は、行ごとにこのマークアップの繰り返しがあることです..もっときれいにしたいです。jQuery を使用すると、TR 内の TD の順序に依存できることを理解しています。コードはより脆弱になりますが、HTML は少なくなります。

このような問題を解決する一般的な方法は何ですか?

4

3 に答える 3

2

ここで、一歩下がって、保持しているデータの観点から、構造について少し考えてみるとよいでしょう。

ここにあるのは、テーブル内の行で、その行内に多数のセルがあります。これらの行の 1 つは、「旅行」エンティティの ID を参照しています。しかし実際には、その行内のすべてのフィールドが同じ「旅行」を参照しています。

私が一般的にこれを解決する方法は、識別子を階層のできるだけ上位に置くことです。この場合、ある種の識別スキームを使用して行を識別します (通常は独自のカスタム パラメーターを作成しますが、必要に応じて ID を使用できます)。

<tr tripId="<%# DataBinder.Eval(Container.DataItem, "TripId")%>">
    <td class="tripId"><%# DataBinder.Eval(Container.DataItem, "TripId")%></td>
    <td><a href="#" class="inquireLink"><strong>Inquire now</strong></a></td>
</tr>

<tr/>これで、ブロック全体を「トリップ」として扱い始めることができます。

$("[tripId]").each(
    function(indx, elem) {
        $(elem).find(".inquireLink").click( ... );
        // Or better yet, if there is only ever a single anchor tag in the "Inquire" cell:
        $(elem).find("a").click( ... );
    }
);
于 2013-04-02T01:00:10.087 に答える
1

あなたは今、意図されている方法でそれを行っています。それはまさにクラスが使用される方法です。VS からの警告は無視してください。特に ASP.NET テンプレートをおかしなことに使用する場合、HTML の検証はあまり得意ではありません。

それぞれのクラスを指定するこの方法は、私の意見では、jQuery が非常に堅牢になるため、jQuery<td>の順序に依存するよりもはるかに優れています。<td>

他の人がより簡単に利用できるようになるので、あなたはあなたにいるtripIdことができます。たとえば、関連するデータを選択することもできます。<tr><td>$('#trip-10 .weight')

<ItemTemplate>
  <tr id="trip-<%# DataBinder.Eval(Container.DataItem, "TripId")%>">
    <td class="tripId"><%# DataBinder.Eval(Container.DataItem, "TripId")%></td>
    <td class="pickupDate"><%# DataBinder.Eval(Container.DataItem, "PickupDate", "{0:MM/dd/yy}")%></td>
    <td class="from"><%# DataBinder.Eval(Container.DataItem, "FromCity")%>, <%# DataBinder.Eval(Container.DataItem, "FromState")%></td>
    <td class="deliveryDate"><%# DataBinder.Eval(Container.DataItem, "DeliveryDate", "{0:MM/dd/yy}")%></td>
    <td class="to"><%# DataBinder.Eval(Container.DataItem, "ToCity")%>, <%# DataBinder.Eval(Container.DataItem, "ToState")%></td>
    <td class="weight"><%# DataBinder.Eval(Container.DataItem, "Weight")%></td>
    <td><%# DataBinder.Eval(Container.DataItem, "LoadedMiles")%></td>
    <td><%# DataBinder.Eval(Container.DataItem, "RequiredEquipment")%></td>
    <td><a href="#" class="inquireLink"><strong>Inquire now</strong></a></td>
  </tr>
</ItemTemplate>
于 2013-04-02T01:02:42.223 に答える