web-dev-qa-db-ja.com

JavaScriptからC#関数を呼び出す方法は?

JavaScriptから、分離コードのC#関数CsharpFunctionを呼び出したい。以下のコードを試してみましたが、JavaScript条件がTrueまたはFalseであるかどうかに関係なく、CsharpFunctionが呼び出されました。

JavaScriptコード:

if (Javascriptcondition > 0) {
   <%CsharpFunction();%>
}

C#コードビハインド:

protected void CsharpFunction()
{
  // Notification.show();
}

JavaScriptからC#関数を呼び出すにはどうすればよいですか?

26
IamNumber5

WebメソッドとAjaxを使用できます。

<script type="text/javascript">             //Default.aspx
   function DeleteKartItems() {     
         $.ajax({
         type: "POST",
         url: 'Default.aspx/DeleteItem',
         data: "",
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         success: function (msg) {
             $("#divResult").html("success");
         },
         error: function (e) {
             $("#divResult").html("Something Wrong.");
         }
     });
   }
</script>

[WebMethod]                                 //Default.aspx.cs
public static void DeleteItem()
{
    //Your Logic
}
32
user3098137
.CS File    
    namespace Csharp
    {
      public void CsharpFunction()
      {
        //Code;
      }
    }

    JS code:
    function JSFunction() {
            <%#ProjectName.Csharp.CsharpFunction()%> ;
    }

注:CSページ関数を呼び出すときのJS関数で...プロジェクトの最初の名前、次にCSページの名前空間の名前、次に関数名

4
Vijay Mungara

最新のアプローチは、 ASP.NET Web API 2を使用 (サーバー側)とjQuery Ajax(クライアント側)です。

ページメソッドやASMX Webメソッドと同様に、Web APIを使用すると、ASP.NETでC#コードを記述できます。これは、ブラウザーまたはどこからでも呼び出すことができます。

以下にWeb APIコントローラーの例を示します。これは、クライアントが1つまたはすべての製品に関する詳細を取得できるようにするAPIメソッドを公開します(実際には、製品はおそらくデータベースからロードされます)。

public class ProductsController : ApiController
{
    Product[] products = new Product[] 
    { 
        new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
        new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
        new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M } 
    };

    [Route("api/products")]
    [HttpGet]
    public IEnumerable<Product> GetAllProducts()
    {
        return products;
    }

    [Route("api/product/{id}")]
    [HttpGet]
    public IHttpActionResult GetProduct(int id)
    {
        var product = products.FirstOrDefault((p) => p.Id == id);
        if (product == null)
        {
            return NotFound();
        }
        return Ok(product);
    }
}

コントローラーは、このサンプルモデルクラスを使用します。

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Category { get; set; }
    public decimal Price { get; set; }
}

製品のリストを取得して反復処理するjQuery Ajax呼び出しの例:

$(document).ready(function () {
    // Send an AJAX request
    $.getJSON("/api/products")
        .done(function (data) {
            // On success, 'data' contains a list of products.
            $.each(data, function (key, item) {
                // Add a list item for the product.
                $('<li>', { text: formatItem(item) }).appendTo($('#products'));
            });
        });
});

これにより、最新のWeb APIを簡単に作成できるだけでなく、 ASP.NET Web APIヘルプページ および/または Swashbuckle

Web APIは、既存のASP.NET Webフォームプロジェクトに後付け(追加)できます。その場合、ファイルApplication_StartGlobal.asaxメソッドにルーティング指示を追加する必要があります。

RouteTable.Routes.MapHttpRoute(
    name: "DefaultApi",
    routeTemplate: "api/{controller}/{id}",
    defaults: new { id = System.Web.Http.RouteParameter.Optional }
);

ドキュメンテーション

3
Stephen Kennedy

サーバー側の機能はサーバー側にあり、クライアント側の機能はクライアントにあります。できることは、非表示のフォーム変数を設定してフォームを送信する必要があります。その後、ページでPage_Loadハンドラーを使用して変数の値にアクセスし、サーバーメソッドを呼び出すことができます。

詳細は here および here をご覧ください。

1
Rohit

クライアントからサーバー呼び出しを行うことを意味している場合は、Ajaxを使用する必要があります。Jqueryのようなものを見て、どのような戻り値に応じて$ .Ajax()または$ .getJson()を使用してサーバー関数を呼び出します実行したいアクションまたはアクションの後。

0
Russell Young

ブレイザーを使用 http://learn-blazor.com/architecture/interop/

C#は次のとおりです。

namespace BlazorDemo.Client
{
   public static class MyCSharpFunctions
   {
       public static void CsharpFunction()
       {
          // Notification.show();
       }
   }
}

次に、Javascript:

const CsharpFunction = Blazor.platform.findMethod(
"BlazorDemo.Client",
"BlazorDemo.Client",
"MyCSharpFunctions",
"CsharpFunction"
);
if (Javascriptcondition > 0) {
   Blazor.platform.callMethod(CsharpFunction, null)
}
0
Patrick Knott