HTMLをC#で操作したい

HTMLで作成した画面に、C#で動きを付ける方法を教えて頂きたいです。

具体的には
・データベースから情報を持ってきてテキストボックスに表示
・ボタンクリック時に特定の動作
などをC#で行いたいです。

開発にはVisualStudio2015を使用しております。

自分で調べた結果、MVCやLinqが使えそうなことはわかったのですが
私の能力が乏しく、どの様に扱えばいいのか分かりませんでした。

お手数おかけしますが、どなたかご教授お願い致します。

No.3 ベストアンサー 回答者： zircon3 回答日時： 2017/02/17 16:12

No.2です。

まずNo.1を読み直して下さい。
で。。。

> ボタンはHTMLのinputで作っています。
> 押した時の動作は
> ・登録項目を入力し、データベースにそのデータを追加
> ・検索項目を入力し、それに合うデータを全て表示
> ・表示されたデータの横にチェックボックスを設置し、チェックされたているデータを削除
> ・表示されたデータの情報をユーザーが書き換え、そのデータに更新
> の4つです。以上の動作を行うボタンを、それぞれ設置しております。

この機能仕様をきちんと日本語と図を用いて設計しましょう。
まず最初に。。。

紙の上に1つの画面を1つの四角で表現した画面遷移図を書きましょう。
各画面には「〇〇画面」といた名前を付け、どの画面で何をしたらどの画面が表示されるか、どの画面に戻るかが一目でわかる図で示します。
例えば画面Ａで「実行」ボタンを押すと処理結果の画面Ｂが表示されるのであれば、Ａの四角からＢの四角へ矢印線を引き、その線の上に「実行」と書きます。画面Ｂで「戻る」というボタンやリンクを押されたら画面Ａを表示するのであれば、Bの四角からAの四角へ矢印線を引き、その線の上に「戻る」と書きます。
これを全画面について1枚の紙にまとめると全体像が見えます。

次に。。。
紙の左半分をWebブラウザ、右半分をサーバ（上のプログラム）、紙の縦方向を時間として各処理機能ごとの呼び出し元画面と、呼び出されるプログラムと、プログラムが必要な処理を行った結果送出する画面の関係を図にしましょう。
例えば、画面Aで「実行」ボタンを押すとサーバ上のkennsaku.exeが呼び出され検索結果を表示した画面Bを表示するのであれば、左上に画面Aの四角を書き、右斜め下に向かって矢印線を引き、その先に四角を書いてkennsaku.exeと書きます。そのkennsaku.exeの四角から左斜め下に向かって矢印線を引き、その先に四角を書いて画面Bと記します。
これを機能ごとにまとめると、何という画面から呼び出された何というプログラムが何という画面を生成するか（送出するか）がわかります。

ここまで出来たら次が肝心要の各プログラムの処理手順の設計です。
上で機能ごとにまとめた設計資料をもとにプログラムごとの処理内容を具体的に日本語で箇条書きなどで示します。フローチャート等のチャート図をご存知でしたらそれを使用して書かれてもよいです。ただし、チャート図のでは表し切れない細かなところはやはり「言葉」で書く必要があります。
お仕事でしたらこうした一連の設計内容は「開発標準」として何という設計書をどういう目次構成で作成し、各項目にはどのような内容を記述するかが決まっていますが、お勉強でしたら「どのようにしたら目指す機能を持ったプログラムを作成できるか」を考えて記述内容や記述方法を工夫されるとよいでしょう。

そういう設計文書が出来たらその内容をよく読み直し、本当にそれで求める動作をするかを頭の中で検証してみましょう。
で。「ＯＫ！」となったところでコーディングです。

ちなみにWebブラウザに最終的に表示されるのはHTMLですから、HTMLエディタやテキストエディタを使ってまずこれを作成するとよいです。もちろん検索結果などはわかりませんから、雛形としてかくわけです。
検索結果画面は1件1行の表形式なら見出し行と数行分の検索結果データの行を描くとよいです。
出来た各画面のHTMLファイルをWebブラウザで表示すると具体的イメージがつかめ、「ここはもうちょっとこうした方がよい」といった事もわかります。お仕事の場合はまずは設計者間での動作イメージの擦り合わせや、お客様への提案資料としてこれを作成し、上流の設計書にも画面を貼ります。
このHTMLはそれでおしまいではなく、該当画面を送出するプログラムの画面生成処理部分のコーディングでも使用します。
先の検索結果画面なら検索結果のデータ行のところは、各列は変数が書かれ、ヒット件数分処理がループする作りになりますが（←そういった記述もチェーと図や処理手順の記述では具体的にわかるように書く）、それ以外の固定的な部分はそのまま利用できます。

以上たくさん書きましたが雰囲気はわかってもらえたでしょうか？　(^^;

この回答へのお礼

お返事が遅くなってしまい申し訳ありません。

非常に詳しく教えて頂き誠にありがとうございます。

まだ完全に理解!とまではいきませんが、おおよそのイメージはわかりました。
こちらを参考に、勉強していきたいと思います。

お礼日時：2017/02/22 09:02

No.4 回答者： tknakamuri 回答日時： 2017/02/18 13:06

ASP.NET MVCの入門書を読むのがよいでしょう。

ここのQ&Aだけでは無理(^-^;

例えば

https://www.amazon.co.jp/s/?ie=UTF8&keywords=asp …

この回答へのお礼

ご回答ありがとうございます。

一から勉強していきたいと思います。

お礼日時：2017/02/22 09:03

No.2 回答者： zircon3 回答日時： 2017/02/17 10:45

No.1です。

> もしよろしければ、具体的な方法について教えていただけないでしょうか。

えっと。。。

> > 具体的には
> > ・データベースから情報を持ってきてテキストボックスに表示
> > ・ボタンクリック時に特定の動作
> > などをC#で行いたいです。

まず、データベースは具体的に何をお使いですか？
リレーショナルデータベースの場合、SQLはご存知ですか？
そもそもC#で作成されるプログラム内から使用されるデータベースへ接続する方法は承知されていますか？

画面内にボタンを配置するとのことですが、そのボタンはHTML標準のボタンですか？　それともデザインされた画像ですか？　そういった画面デザインは決定されていますか？
また、表示されたボタンをクリックした際の動作は何ですか？　Javascriptなどを用いてWebブラウザ側でローカルに動ける機能ですか？　それともサーバ側に作成するプログラムを呼び出し、その処理結果を表示するといったものですか？　そういったWebサイトとしての機能と具体的画面遷移、個々の画面のデザインが決まっていないとそのそもプログラムを何本作ったらよいのかさえわかりません。

参考まで。

この回答へのお礼

ご返信ありがとうございます。
説明が足らず申し訳ございません。

データベースはSQLserverです。
C#で繋ぐことは出来き、データの表示（SELECTの実行）までは出来ました。

ボタンはHTMLのinputで作っています。
押した時の動作は
・登録項目を入力し、データベースにそのデータを追加
・検索項目を入力し、それに合うデータを全て表示
・表示されたデータの横にチェックボックスを設置し、チェックされたているデータを削除
・表示されたデータの情報をユーザーが書き換え、そのデータに更新
の4つです。以上の動作を行うボタンを、それぞれ設置しております。

基本で躓いている未熟者な為、ご迷惑おかけしますが、ご教授の程、お願い致します。

お礼日時：2017/02/17 15:22

No.1 回答者： zircon3 回答日時： 2017/02/16 16:17

> HTMLで作成した画面に、C#で動きを付ける方法を教えて頂きたいです。

発想が逆です。
Webブラウザに表示されているある画面から呼び出されるC#で作成したプログラムが、呼び出し元から受け取った情報を使用してデータベーステーブルの検索など必要な処理を行い、その結果を表示するHTMLの画面を生成して標準出力するのです。
それがCGIプログラムの基本です。

参考まで。

この回答へのお礼

ご回答ありがとうございます！
そういった仕組みなのですね。勉強になりました。

もしよろしければ、具体的な方法について教えていただけないでしょうか。

お礼日時：2017/02/17 10:03