JavaScriptから、分離コードのC#関数CsharpFunction
を呼び出したい。以下のコードを試してみましたが、JavaScript条件がTrue
またはFalse
であるかどうかに関係なく、CsharpFunction
が呼び出されました。
JavaScriptコード:
if (Javascriptcondition > 0) {
<%CsharpFunction();%>
}
C#コードビハインド:
protected void CsharpFunction()
{
// Notification.show();
}
JavaScriptからC#関数を呼び出すにはどうすればよいですか?
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
}
.CS File
namespace Csharp
{
public void CsharpFunction()
{
//Code;
}
}
JS code:
function JSFunction() {
<%#ProjectName.Csharp.CsharpFunction()%> ;
}
注:CSページ関数を呼び出すときのJS関数で...プロジェクトの最初の名前、次にCSページの名前空間の名前、次に関数名
最新のアプローチは、 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_Start
のGlobal.asax
メソッドにルーティング指示を追加する必要があります。
RouteTable.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = System.Web.Http.RouteParameter.Optional }
);
クライアントからサーバー呼び出しを行うことを意味している場合は、Ajaxを使用する必要があります。Jqueryのようなものを見て、どのような戻り値に応じて$ .Ajax()または$ .getJson()を使用してサーバー関数を呼び出します実行したいアクションまたはアクションの後。
ブレイザーを使用 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)
}