omachizura

ホームページの基本的なことからスタートし、WEBアプリの開発までできるスキルを紹介します。


asp.netの基本・aspとの違い

ここまでaspを用いてWEBアプリの基本を説明してきましたが、ここまでのサンプルコードを見てわかるように、aspはレスポンスするhtmlのレイアウトとサーバ処理が1つのファイルに記載しているため、複雑な画面になってくると、処理を把握するのが大変になってしまいます。

aspやphpのようにhtmlの中にサーバ処理のプログラムを記載する方法とは違い、asp.netではサーバ処理とhtmlレイアウトを別ファイルで管理します。別ファイルで管理するため、コードが整理され処理を把握しやすくなります。

aspでsample.aspというファイルがあったとしたら、asp.netではhtmlレイアウトを実装するsample.aspxと、サーバ処理を実装するsample.aspx.vb(サーバ言語によって拡張子は異なります)の2つのファイルになります。

前回までのaspの処理をasp.netに置き換えたコードは下記のようになります。

※本来は下記のようなやり方はしませんが、説明の都合であえて下記のような方法で実装しています。

sample.aspx(htmlレイアウトのファイル)
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="sample1.aspx.vb" Inherits="sample1" %>

<html>
<head>
    <title>aspを移植</title>
    <script type="text/javascript">
    function touroku(){
      //クライアント側の入力チェック
      if(document.frmMain.txtName.value==''){
        alert('商品名を入力してください。');
        return;
      }
      if(document.frmMain.txtPrice.value==''){
        alert('単価を入力してください。');
        return;
      }
      document.frmMain.hidMode.value = "1";
      document.frmMain.submit();
    }
    function init(){
      if(document.frmMain.hidCheck.value=="1"){
        alert("選入力した商品名はすでに登録されています。");
      }
    }
    </script>
</head>
<body onload="init()">
  <form id="frmMain" runat="server">
    <input type="button" value="登録" onclick="touroku()">
    商品名:<input type="text" name="txtName" value="<%= strName %>">
    単価:<input type="text" name="txtPrice" value="<%= strPrice %>">
    <input type="hidden" name="hidMode" />
    <table>
      <th>商品名</th>
      <th>単価</th>
      <%=detail%>
    </table>
    <input type="hidden" value="<%=hidCheck %>" name="hidCheck" />
  </form>
</body>
</html>
sample.aspx.vb(サーバ処理のファイル)
Imports System.Data

Partial Class sample1
  Inherits System.Web.UI.Page
  'htmlに埋め込む変数
  Public detail As String = String.Empty
  Public hidCheck As String = String.Empty
  Public strName As String = String.Empty
  Public strPrice As String = String.Empty

  ''' <summary>
  ''' ページロードイベント
  ''' </summary>
  Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    If Request.Form("hidMode") = "1" Then
      If checkData() Then 'データチェック
        insertData()
      Else
        hidCheck = "1"
        'エラー時は値を保持
        strName = Request.Form("strName")
        strPrice = Request.Form("strPrice")
      End If
    End If

    Dim dt As DataTable = getData() 'データ取得
    dispData(dt) 'データ表示
  End Sub

  ''' <summary>
  ''' データ取得
  ''' </summary>
  Private Function getData() As DataTable
    Dim dt As DataTable
    'データを取得する処理は省略します
    Return dt
  End Function

  ''' <summary>
  ''' データ表示
  ''' </summary>
  Private Sub dispData(ByVal dt As DataTable)
    detail = ""
    For Each row As DataRow In dt.Rows
      detail &= "<tr><td>" & row("商品名").ToString & "</td><td>" & row("単価").ToString & "</td>" & vbCrLf
    Next
  End Sub

  ''' <summary>
  ''' 登録データをチェック
  ''' </summary>
  Private Function checkData() As Boolean
    'データが存在するかどうかチェックする処理は省略します
    'すでにデータが登録されていたらtrueを返します
  End Function

  ''' <summary>
  ''' データ登録
  ''' </summary>
  Private Sub insertData()
    'データを登録する処理は省略します
  End Sub
End Class

長くなってしまうので、サーバ処理は省略していますが、フォームアプリと同じようなイメージでサーバ処理は実装することができます。

上記のコードではaspxファイルに(htmlレイアウトのファイル)に、まだstrNamedetailなど、サーバ処理の変数が残っています。次ページ以降でhtmlレイアウトとサーバ処理を分離して、効率よくasp.netを実装していく方法を紹介していきます。






  • asp.netの基本・aspとの違い

    classic aspとasp.net(aspx)の違いやaspx.netの基本的な考え方ついて説明します。ここまでaspを用いてWEBアプリの基本を説明してきましたが、ここまでのサンプルコードを見て...


  • htmlサーバコントロールの基本

    asp.netのhtmlサーバコントロールの基本の基本的な考え方ついて説明します。htmlサーバコントロールを使えば、サーバ処理でhtmlの要素(コントロール)にアクセスできるようになります。フォーム...


  • webサーバコントロールの基本

    asp.netにはwebサーバコントロールというコントロールが用意されています。webサーバコントロールはhtmlのスタイルや属性を直接編集するわけではなく、サーバ処理ではフォームアプリのように、コン...


  • ポストバックの基本

    asp.netでは保持したいコントロールにrunat="server"属性を指定してsubmitすると、自動的に内部処理でコントロールの値を復元してくれます。基本的にasp.net...


  • イベントの基本と注意事項

    asp.netではsubmitコントロールにrunat="server"属性を指定してsubmitするようにすれば、サーバ処理ではフォームアプリと同じようにイベントのファンクション...


  • repeaterで表示・編集・登録処理 その1

    asp.netのWEBサーバコントロールのrepeaterコントロールを使用し、データの表示・編集・登録処理の流れの実装例を紹介します。具体的には、DBに登録されているデータをrepeaterコントロ...


  • repeaterで表示・編集・登録処理 その2

    aspxファイルに定義したrepeaterの中のコントロールのIDはサーバ処理で使うためのIDであって、レスポンスされるコントロールのIDではありません。なので、ID=txtNameのテキストボックス...


  • repeaterで出力時にjavascriptのイベントを定義する

    apsxファイルに詳細ボタンと、詳細画面を起動するjavascriptのファンクションを定義します。onclick属性(イベント)をaspxに定義してしまうと、引数で必要な行事の情報がわからないので、...


  • repeaterで出力したコントロールにjavascriptでアクセスする

    asp.netのrepeaterで動的に出力したコントロールにjavascriptでアクセスする方法を紹介します。javascriptで要素にアクセスする場合はgetElementById(取得したい...


  • javascriptでtableタグの中のコントロールにアクセスする

    例えばrepeaterで明細の一覧を出力した場合、各行のコントロールのIDは動的に出力されるため、document.getElementById('コントロールID')のようにID...