0

Web 開発者として、CSS に多くの時間を費やしていると感じています。ASPX や ASCX ファイルなどの追加コードやコード ビハインド ファイルを使用せずに、再利用可能な CSS、つまりクラスを作成し、HTML でこれらのクラスを参照できるソリューションを考え出そうとしています。HTML 要素を CSS クラスにリンクする仲介者が必要です。

私が達成したいこと:

  • 送信直前にHTMLを修正
  • HTML の要素を選択する
  • 他の場所で定義されたルールに基づいて (たとえば、現在処理中のページに関連するテキスト ファイルで):
  • 複数の HTML 要素への CSS クラス参照の追加
  • 複数の CSS クラス参照を単一の HTML 要素に追加する

これがどのように機能するかを想像する方法：

  1. 最終的な HTML を生成する ASP.NET 関数を拡張する
  2. すべての HTML を文字列として取得します
  3. クエリ (XPATH など) メソッドを使用してオブジェクトのコンストラクターに文字列を渡します。
  4. グローバル ルールのリストを調べます。たとえばul、first divthenの子などclass = "navigation"
  5. ページ固有のルールのリストを確認する (例: ulfirst divthenの子)class &= " home"
  6. obj.ToString などのオブジェクトから処理された HTML を取得します
  7. 処理された HTML を使用してページ生成を再開する ASP.NET

だから私が知る必要があるのは：

  1. ASP.NET ページ生成関数をどこでどのように拡張できますか (ページのすべての HTML を取得するため)
  2. どのクラスが要素/ノードのクエリ メソッドと属性へのアクセスを持っているか

事前にご協力いただきありがとうございます。

PS私はISS 7で実行されているVB.netコードビハインドを使用してASP.NET WebフォームWebサイトを開発しています

4

2 に答える 2

2

私の CsQuery プロジェクトをチェックしてください: https://github.com/jamietre/csqueryまたは "CsQuery" として nuget で。

これは、jQuery の C# (.NET 4) ポートです。基本的なパフォーマンス テスト (プロジェクト テスト スイートに含まれる) では、セレクターは HTML Agility Pack + Fizzler (HAP の CSS セレクター アドオン) よりも約 100 倍高速です。典型的な Web サイトでリアルタイムに出力ストリームを操作するには、十分に高速です。あなたがamazon.comか何かなら、もちろんYMMV.

これを開発した最初の目的は、コンテンツ管理システムから HTML を操作することでした。起動して実行すると、CSS セレクターと jQuery API を使用する方が、Web コントロールを使用するよりもはるかに楽しいことがわかり、サーバーでレンダリングされたページの主要な HTML 操作ツールとして使用し始め、カバーするために構築しました。 CSS、jQuery、ブラウザ DOM のほぼすべて。それ以来、私は Web コントロールに触れていません。

CsQuery を使用して Web フォームの HTML をインターセプトするには、ページの分離コードで次のようにします。

using CsQuery;
using CsQuery.Web;

protected override void Render(HtmlTextWriter writer)
{

    var csqContext = WebForms.CreateFromRender(Page, base.Render, writer);

    // CQ object is like a jQuery object. The "Dom" property of the context
    // returned above represents the output of this page.

    CQ doc = csqContext.Dom;

    doc["li > a"].AddClass("foo");

    // write it
    csqContext.Render();
}

ASP.NET MVC で同じことを行うには、それについて説明しているこのブログ投稿を参照してください。

GitHub に CsQuery の基本的なドキュメントがあります。HTML の入出力を除けば、jQuery とほとんど同じように機能します。上記のオブジェクトは、オブジェクトとメソッドとのWebFormsやり取りを処理するのに役立ちます。一般的な使用法は非常に単純です。HtmlTextWriterRender

var doc = CQ.Create(htmlString);

// or (useful for scraping and testing)
var doc = CQ.CreateFromUrl(url);

// do stuff with doc, a CQ object that acts like a jQuery object

doc["table tr:first"].Append("<td>A new cell</td>");

さらに、ブラウザーで使用するのと同じメソッドを使用して、ブラウザー DOM のほぼ全体を使用できます。インデクサー [0] は、jquery のように選択セットの最初の要素を返します。HTML を操作するための JavaScript の記述に慣れている場合は、非常に使い慣れているはずです。

// "Select" method is the same as the property indexer [] we used above.
// I go back and forth between them to emphasise their interchangeability.

var element = dom.Select("div > input[type=checkbox]:first-child")[0];
a.Checked=true;

もちろん、C# では、LINQ などの他の汎用ツールを自由に使用できます。または:

var element = dom["div > input[type=checkbox]:first-child"].Single();

a.Checked=true;

ドキュメントの操作が終わったら、おそらく HTML を取り出したいと思うでしょう:

string html = doc.Render();

それだけです。オブジェクトには膨大な数のメソッドがあり、CQすべての jQuery DOM 操作テクニックを網羅しています。また、JSON を処理するためのユーティリティ メソッドもあり、jQuery のように、データ構造 (CSS クラスのセットなど) をできるだけ簡単に渡すことができるように、動的型と匿名型を幅広くサポートしています。

より高度なもの

asp.net の http ワークフローの低レベルの操作に慣れていない限り、これを行うことはお勧めしません。元に戻すことはできませんが、HttpHandler について聞いたことがない場合は学習曲線が必要になります。

WebForms エンジンを完全にスキップする場合は、IHttpHandlerHTML ファイルを自動的に解析する を作成できます。これは、ASPX エンジンにオーバーレイするよりも確実にパフォーマンスが向上します。おそらく、Web コントロールを使用してサーバー側で同量の処理を行うよりも高速です。その後、特定の拡張子 (や など) のweb.config を使用してハンドラーを登録できます。htmhtml

自動的にインターセプトするもう 1 つの方法は、ルーティングを使用することです。問題なく Web フォーム アプリで MVC ルーティング ライブラリを使用できます。これを行う方法の 1 つの説明を次に示します。次に、任意のパターン (これもおそらく*.html) に一致するルートを作成し、処理をカスタムIHttpHandlerまたはクラスに渡すことができます。この場合、すべてを行っています。パスを確認し、ファイル システムからファイルをロードし、CsQuery で解析し、応答をストリーミングする必要があります。

もちろん、どちらのメカニズムを使用する場合でも、ページごとに実行するコードをプロジェクトに伝える方法が必要になります。つまり、気の利いた HTML パーサーを作成したからといって、そのページに対して正しい「コード ビハインド」を実行するようにどのように指示するのでしょうか?

MVC は、"PageNameController.cs" という名前のコントローラーを見つけて、パラメーターの名前に一致するメソッドを呼び出すだけでこれを行います。やりたいことは何でもできます。たとえば、次の要素を追加できます。

<script type="controller" src="MyPageController"></script>

ジェネリック ハンドラー コードでそのような要素を探し、リフレクションを使用して、呼び出す正しい名前付きクラスとメソッドを見つけることができます。これはかなり複雑で、この回答の範囲を超えています。しかし、まったく新しいフレームワークまたは何かを構築しようとしている場合は、これがその方法です。

于 2012-06-14T18:34:48.010 に答える
1

送信される前にページのコンテンツを傍受するのはかなり簡単です。私はこれを、オンザフライでコンテンツを圧縮するプロジェクトでしばらく前に行いました。とにかく、やりたいことは次のとおりです。

1) Flush が呼び出されるまでページのコンテンツを保存する Stream オブジェクトを作成します。たとえば、圧縮プロジェクトでこれを使用しました: http://optimizerprime.codeplex.com/SourceControl/changeset/view/83171#1795869前に言ったように、きれいではありません。しかし、私の要点は、必要なことを行う独自の Stream クラスを作成する必要があるということです (この場合、ページの文字列出力を提供し、文字列を解析/変更してから、ユーザーに出力します)。

2) ページのフィルター オブジェクトをそれに割り当てます。(Page.Response.Filter) すべてのコンテンツをキャッチできるように、かなり早い段階で行う必要があることに注意してください。これは、PreRequestHandlerExecute イベントで実行される HTTP モジュールで行いました。しかし、次のようなことをした場合:

    protected override void OnPreInit(EventArgs e)
    {
        this.Response.Filter = new MyStream();
        base.OnPreInit(e);
    }

それもおそらくうまくいくでしょう。

3) Html Agility Packなどを使用して HTML を解析し、そこから変更できるはずです。

それは私にとって最も簡単なアプローチのようです。

于 2012-06-14T19:07:07.860 に答える