様々な基本になるサンプルを記録しています。

不定期更新です。

記事のサイドに使用している商品の紹介も掲載しているので、良ければご覧ください。

トップ > .NET FrameWork > 【ASP.NET】サーバーコントロールをHTMLとしてレスポンスで返す

【ASP.NET】サーバーコントロールをHTMLとしてレスポンスで返す

.NET FrameWork ASP.NET VB

AndroidとiOSの開発を行っていた時に、
どんな端末でも使えるようにというコンセプトで
WEBブラウザを使用してアプリケーション開発を行ったことがあった。

スマートフォンがまだ普及していなくて
ちょうど、iPadが話題になってたときだった。

そのときに開発言語がバラバラになるのを恐れて、
調査して実装したのがWEBサービスでAJAXを使用して、
フロントエンド開発もバックエンド開発もやれるように考えて
出てきたのがこれ。

サーバーコントロールをうまく使えば
ポストバックを回避できるので、どんな端末でもほとんど対応できる。

Google系のブラウザやSafariを扱うときは、オープンソースのJqueryを使っていくと
Javascriptの構文の違いに悩まされることは、ほぼ無いのではないかと思う。

とりあえず、Visual StudioでWEBアプリケーションの新規プロジェクトを起こして
以下のソースをコピーしてやってみると、何か見えるかもしれない。
Default.aspx.vb

Imports System.IO
Imports System.Web.UI
Partial Public Class _Default
    Inherits System.Web.UI.Page
    'ロードイベントは必ず通ります。
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        Select Case Request.Form("load")



            Case "Button1"

                Grid_View()

            Case Else

        End Select



    End Sub
    Public Sub Grid_View()

        'オブジェクトの定義はWEB画面で配置するより、中で定義して貼り付けたほうが環境に依存することがないです。
        'ここではGridViewコントロールをHTMLとして出力します。
        Dim dgv As New GridView

        'HTMLを吐き出すために以下のクラスを使います。
        Dim strw As New StringWriter()
        Dim wt As New System.Web.UI.HtmlTextWriter(strw)


        'サンプルでデータテーブルを作り、適当にデータを入れています。
        Dim dt As New DataTable
        Dim dr As DataRow


        dt.Columns.Add("項目1")
        dt.Columns.Add("項目2")
        dt.Columns.Add("項目3")
        dt.Columns.Add("項目4")

        For i As Integer = 0 To 50



            dr = dt.NewRow


            dr(0) = "データA" & CStr(i)
            dr(1) = "データB" & CStr(i)
            dr(2) = "データC" & CStr(i)
            dr(3) = "データD" & CStr(i)

            dt.Rows.Add(dr)


        Next

        'GridViewのデータバインドメソッドです。
        dgv.DataSource = dt

        'このメソッドを実行しないと、
        'データソースにデータ定義を関連付けしても反映されません。
        dgv.DataBind()

        'クライアントに返すレスポンスを初期化します。
        Response.Clear()

        'GridViewのレンダー（実際にWEBで記述されるHTMLの内容）を
        'ここでTextWriterに出力します
        dgv.RenderControl(wt)

        'レスポンスに出力します
        Response.Write(strw.ToString)


        '以下、リソースの開放です。必ずレスポンスを終わらせる場合は開放してから、
        'Response.Endしてください。
        wt.Close()
        strw.Close()

        wt.Dispose()
        strw.Dispose()
        dt.Clear()
        dt.Dispose()
        dgv.Dispose()

        'レスポンス終了
        Response.End()

    End Sub

End Class

Default.aspx

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %>

<!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 runat="server">

    <script src="js_XMLHTTPRequest.js" type="text/javascript" ></script>
    
    <script language="JavaScript">
	<!--
	
	    //GridViewの表示
	    function button_clk(){

			document.getElementById('test').innerHTML = HTTPXMLREQ('Default.aspx','load=Button1&test=12');
		}
		
	//-->
	</script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
     
     <div id="test">
     
     
     
     </div>
     
   <p>
    <input id="Button1" type="button" value="button" onclick='button_clk();' /></p>
   
   
   
    </form>
</body>
</html>

js_XMLHTTPRequest.js

var xhr
var Restxt
// ------------------------------------------------------------
// XMLHttpRequest オブジェクトを作成する関数
// ------------------------------------------------------------
function XMLHttpRequestCreate() {
    try {
        return new XMLHttpRequest();
    } catch (e) { }
    try {
        return new ActiveXObject('MSXML2.XMLHTTP.6.0');
    } catch (e) { }
    try {
        return new ActiveXObject('MSXML2.XMLHTTP.3.0');
    } catch (e) { }
    try {
        return new ActiveXObject('MSXML2.XMLHTTP');
    } catch (e) { }

    return null;
}

function HTTPXMLREQ(url, send_data) {

    Restxt = "";
    // ------------------------------------------------------------
    // XMLHttpRequest オブジェクトを作成
    // ------------------------------------------------------------
    xhr = XMLHttpRequestCreate();

    // ------------------------------------------------------------
    // XHR 通信の状態が変化するたびに実行されるイベント
    // ------------------------------------------------------------
    xhr.onreadystatechange = ResponseData

    // ------------------------------------------------------------
    // 「POST メソッド」「接続先 URL」を指定
    // ------------------------------------------------------------
    xhr.open("POST",url,false);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // ------------------------------------------------------------
    // 「送信データ」を指定、XHR 通信を開始する
    // ------------------------------------------------------------
    xhr.send(send_data);

    return Restxt
}

function ResponseData() {

    switch (xhr.readyState) {
        case 4:
            // ------------------------------------------------------------
            // XHR 通信失敗
            // ------------------------------------------------------------
            if (xhr.status == 0) {

                alert("XHR 通信に失敗しました。");
                
                // ------------------------------------------------------------
                // XHR 通信成功
                // ------------------------------------------------------------
            } else {

                // ------------------------------------------------------------
                // リクエスト成功
                // ------------------------------------------------------------
                if ((200 <= xhr.status && xhr.status < 300) || (xhr.status == 304)) {
                Restxt = xhr.responseText;
                    

                    // ------------------------------------------------------------
                    // リクエスト失敗
                    // ------------------------------------------------------------
                } else {

                    alert(xhr.status);

                }
            }
            break;
    }
};