BinaryDevelop
  1. ホーム
  2. シーピー

c# ウェブページのバックエンドにデータを渡すいくつかの方法

2022-03-01 04:38:19

        C#のWebページからバックエンドにデータを渡すには、サーバーコントロールやajaxを使用する多くの方法があります。この記事では、いくつかの一般的な方法について説明します。

メソッド一覧

(1) サーバーコントロールを使用する。
(2) ajax+aspxを使用する。
(3) ajax+ashxを使用する。
(4) ajax+aspxの静的メソッドを使用する。

       以下に、これらのメソッドの使用方法を詳しく説明する例を記述します。

ステップ1：ajax_01.aspxの作成 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ajax_01.aspx.cs" Inherits="web_ajax_01& quot; %>

<!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">
    <title></title>
    <script type="text/javascript" src=". /jquery/jquery-1.8.0.min.js"></script>
	<script type="text/javascript">

	    function method1() {

	        $.ajax({
	            type: "Post",
	            url: location.href,
	            data: $("#form1").serialize(),	           
	            success: function(data) {
	                if (data="success")
	                    alert("Message confirmed successfully! ");
	            },
	            error: function(err) {
	               alert("error");
	            }
	        });

	    }

	    function method2() {

	        $.ajax({
	            type: "Post",
	            url: "ajax_01.ashx",
	            data: $("#form1").serialize(),
	            success: function(data) {
	                if (data = "success")
	                    alert("Message confirmed successfully! ");
	            },
	            error: function(err) {
	                alert("error");
	            }
	        });

	    }

	    function method3() {

	        var name = $("#name").val();
	        var age = $('input[name=age]:checked').val()
	        var code = $("#code").val();

	        var language = [];
	        $("input[name='language']:checked").each(function() {
	           language.push($(this).val());
	        });  
	        
	        var comment = $("#comment").val();
	        
	        $.ajax({
	            type: "Post",
	            url: "ajax_01.aspx/read3",
	            data: "{'name':'" + name + "','age':'" + age + "','code':'" + code + "','language':'" + language + "', 'comment':' " + comment + "'}",
	            contentType: "application/json; charset=utf-8",
	            dataType: "json",
	            success: function(data) {
	                alert(data.d);
	            },
	            error: function(err) {
	                alert("error");
	            }
	        });

	    }

	    function method4() {

	        var json = $('#form1').serialize();

	        $.post(location.href, json, function(data) {
	            if (data ="success")
	            { 
	                alert("success! ");    
	            }
	            
	        });

	    }

	    function method5() {

	        var json = $('#form1').serialize();

	        $.post("ajax_01.ashx", json, function(data) {
	            if (data = "success") {
	                alert("success! ");
	            }

	        });

	    }    
	    
	
	</script>
    
</head>
<body>
    <form id="form1">
    <input id="action" name="action" value="read" type="hidden" />
    <div>
        <table border="0">
            <tr>
                <td> Name: </td>
                <td>
                    <input id="name" name="name" type="text" />
                </td>
            </tr>         
            <tr>
                <td> age group: </td>
                <td>
                    <input type="radio" name="age" value="18" />Less than 18 years old
                    <input type="radio" name="age" value="18-40" checked="checked" />18-40 years old
                    <input type="radio" name="age" value="40" />40+
                </td>
            </tr>           
            <tr>
                <td> Programming time: </td>
                <td>
                    <select name="code" id="code">
                        <option value="never">notprogramming</option>
                        <option value="6" selected="selected">less than six months</option>
                        <option value="6-12">Six to twelve months</option>
                        <option value="12-24">twelve to twenty-four</option>
                        <option value="24">greater than twenty-four</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td> Programming Language: </td>
                <td>
                    <input name="language" type="checkbox" value="java" />java
                    <input name="language" type="checkbox" value="c" />c
                    <input name="language" type="checkbox" value="c++" />c++
                    <input name="language" type="checkbox" value="c#" />c#
                    <input name="language" type="checkbox" value="vb" />vb
                </td>
            </tr>

ステップ2：ajax_01.aspx.csを書く 

using System;
Generic;
Linq;
Web;
UI;
WebControls;
WebControls; using System.Web;

public partial class web_ajax_01 : System.Web.
UI.
    protected void Page_Load(object sender, EventArgs e)
    {
        string action = "";
        if (Request.Form["action"] ! = "")
        action = Request.Form["action"];

        switch (action)
        {
            case "read"://query data
                read();
                break;
          
            default:
                break;

        }
    }
    
    private void read()
    {
        string name = Request.Form["name"];
        string age = Request.Form["age"];
        string code = Request.Form["code"];
        string language = Request.Form["language"];
        string comment = Request.Form["comment"];
        
        Response.Clear();
        Response.Write("success");
        Response.End();

    }

    [WebMethod]
    public static string read3(string name, string age, string code, string language, string comment)
    {
        return name + age + code + language + comment;

    }

}

ステップ3：ajax_01.ashxの作成 

<%@ WebHandler Language="C#" Class="ajax_01" %>

using System;
Web;

public class ajax_01 : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";

        string action = context.Request["action"];
        if (action == "read")
        {
            read(context);                
        }        
        
        context.Response.Write("Hello World");
        
    }

    private void read(HttpContext context)
    {
        string name = context.Request.Form["name"];
        string age = context.Request.Form["age"];
        string code = context.Request.Form["code"];
        string language = context.Request.Form["language"];
        string comment = context.Request.Form["comment"];

        context.Response.Clear();
        context.Response.Write("success");
        context.Response.End();
        
        
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

説明

(1) メソッド1、4ともにaspxにデータを渡します。
(2) 方法2と5は、両方ともashxにデータを渡します。
(3) 方法3は、aspxのスタティックメソッドにデータを渡しています。

ashxのノート。

(1) ajaxメソッドのcontentTypeに"application/x-www-form-urlencoded"を指定した場合、ashxのrequest.formがデータを取得できない。
(2) dataTypeがjsonで、jQueryにjsonデータを自動解析させたい場合、ashxは厳密にjsonデータを返す必要があり、ダブルクォート（アンチセンス文字を解除したもの）形式である必要があります。
(3) contentTypeが設定されていない、あるいは "application/x-www-urlencoded" タイプでない場合、reque.formはデータを取得できないので、contextを使用することが可能です。InputStreamを使用して、リクエストの内容を取得することができます。
(4) request ashxのdataパラメータにはいくつかの形式があります: data:{'a':'aa','b':'bb'}, data:"a=aa&b=bb",data:{a:'aa',b:'bb'}, 3つのデータはすべてrequest.form[" "]で得ることが可能です。

aspx の静的メソッドに関する注意事項。

  (1) aspx のバックエンドメソッドは静的で、かつ webmethod 機能が付加されている必要があります。
  (2) ajaxメソッドでcontentTypeが"application/json"であること。
  (3) 渡されるデータは厳密にjsonデータであること、例えば "{'a':'aa','b':'bb'}" のように、パラメータは静的メソッドのパラメータに対応するものでなければなりません。
  (4) aspxのバックエンドメソッドから返されるデータのデフォルト形式は "{'d':'returned content'}" なので、dataTypeに "json" を指定した場合は data.d で返すデータを取得する必要があります。

個人的な見解です。

静的メソッドは非常に柔軟性に欠け、書くのが複雑です。
の具体的な書き方は、本文中のものだけでなく、他のものでも、動くものであればOKです。
サーバー制御の方法は紹介せず、直接呼び出すだけなので、個人的には非常に気に入っています、シンプルで効率が悪いのが好きです。

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します