JavaScriptとVB.NETを併用してデータをPOST送信する

こんにちは！新卒3年目エンジニアです。
今回は申し込みボタンなどで使える、「データのPOST送信」機能をvb.netとJavaScriptを併用して構築していきたいと思います。

大きく３つの手順で任意のデータをPOST送信することができます。

①ボタンと入力項目を作る

▼ボタン
<p class="btnPost">
<input type="hidden" id="pmReqPost" name="pmReqPost" />
<button id="btnApply">web申込み</button>
</p>

▼入力項目
遷移先フォームURL
[パラメータ1]名前
[パラメータ1]値
<asp:TextBox ID="txtTransitionFormUrl" textmode="SingleLine" maxlength="2000" runat="server" CssClass="ctlTextArea_M" />
<asp:TextBox ID="txtReqName" maxlength="32" runat="server" />
<asp:Label ID="lblReqValue" runat="server" ResourceKey="lblReqValue" />

まずは「type="hidden"のinputタグを含んだボタン」と」「入力項目」を準備します。これで上記のような見た目のボタンが出来上がり、下準備は完了です。次に送信したい値と遷移先URLをセットしていきます。

②データをセット

infoCMSの画面

先ほど準備した項目に、「任意のURL」「パラメータの名前と値」を画面上から登録します。ここでセットしたデータがvb.netとJavaScriptで処理されて、ボタンをクリックしただけでデータが送信されます。
では最後にボタンをクリックしていきます。

③ボタンクリックでデータ送信

①で作った「Web申込み」ボタンをクリックすると設定したURLのページに遷移します。↓

https://www.muryou-tools.com/test/posttestutf8.php

今回はPOST送信が確認できるテストサイトを使用させていただきました。
キャプチャの通り、セットしたデータ「INFO_NET」「3150」がPOSTされていることが分かります。
ロジックとしては、button id="btnApply"のクリックをトリガーにしてinputタグのname,valueを書き換えています。以下はVBファイル内でJavaScriptを記載した例です。

▼VB.net/JavaScript

Dim url As String = Server.HtmlDecode(CType(Settings("TransitionFormUrl"), String))
Dim ReqName As String = Server.HtmlDecode(CType(Settings("ReqName"), String))
Dim Reqvalue As String = Server.HtmlDecode(CType(Settings("ReqValue"), String))

Protected Overrides Sub RegisterClientScript()
    Dim script As New StringBuilder()
    script.AppendLine("<script type=""text/javascript"">")
    script.AppendLine("window.addEventListener('DOMContentLoaded', function() {")
    script.AppendLine("var $btn = document.getElementById(""btnApply"");")
    script.AppendLine("    $btn.onclick = function() {")
    script.AppendLine("         var pmReqname = '" & ReqName & "';")
    script.AppendLine("         var pmReqvalue = '" & Reqvalue & "';")
    script.AppendLine("         var form = document.getElementById(""Form"");")
    script.AppendLine("         var Input_1 = form.querySelector(""input[name='pmReqPost']"");")
    script.AppendLine("         var currentDir = window.location.pathname.split('/').slice(0, -1).join('/') + '/';")
    script.AppendLine("           form.action = '" & url & "';")
    script.AppendLine("           form.method = 'POST'")
    script.AppendLine("           form.setAttribute(""target"", ""_blank"")")
    script.AppendLine("           Input_1.setAttribute(""name"", pmReqname);")
    script.AppendLine("           Input_1.setAttribute(""value"", pmReqvalue);")
    script.AppendLine("         form.submit();")
    script.AppendLine("         form.action = currentDir;")
    script.AppendLine("         form.target = '_self';")
    script.AppendLine("    };")
    script.AppendLine("  });")
    script.AppendLine("</script>")
    Me.Page.ClientScript.RegisterStartupScript(Me.Page.GetType, url, script.ToString())
End Sub

この技術はカタログの申し込み処理などで別の申し込み集計ページに受け付けた情報を送るときに使用できます。

まとめ

いかがでしたでしょうか？ボタンを作り、データをセットし、ボタンをクリックで別のWebサイトに好きな値を送信できました。
エンジニアになり３年目ですがやっとスタートラインに立てた感覚なので、これからも色々な機能開発を経験していきたいです！