时间戳

首页 > 解决方案 > 如何通过 asp.net 中的 web api 发送静态 html 数据？

html - 如何通过 asp.net 中的 web api 发送静态 html 数据？

问题描述

我有一个用 ASP.NET 开发的产品页面，我对产品的值进行了硬编码，目前只是前端。在此页面上，我有产品信息，例如产品名称和价格，以及页面上这些项目下方的添加到购物车按钮。我有一个网络 api，我想通过它发送这个产品信息。出于测试目的，它在我使用输入表单时有效，但我想知道如何在单击按钮时发送这些静态信息，例如名称和价格。下面是我的html页面

<div class="col-md-3 col-sm-3 col-xs-6" style="margin-bottom: 8px;">
    <div class="img-thumbnail product-item" style="height: 300px;">
        <img class="img-fluid" title="Click to View Product detail" style="cursor: pointer; height: 160px; width: 100%;" src="~/Images/SamsungNote.JPG" />
        <div class="caption">
            <h5>Samsung note 10 plus</h5>
            <p>€ 1071.28</p>
            <p>
                Available <button class="pull-right" href="#"><i class="fa fa-shopping-cart"> Add to cart</i></button>
            </p>
            <div class="product-item-badge">New</div>
        </div>
    </div>
</div>

在我的 HomeController 中，我有以下内容。就像我之前说的，这适用于表单，但是当我单击“添加到购物车”按钮时，有什么方法可以发送此产品信息？

 [HttpPost]
        public ActionResult AddToCart(Product product)
        {
            using (var client =  new HttpClient())
            {
                client.BaseAddress = new Uri("http://localhost:60036/");
                var content = new StringContent(
                    JsonConvert.SerializeObject(product),
                    Encoding.UTF8,
                    MediaTypeNames.Application.Json);
                var postTask = client.PostAsync("api/Product", content);
                var result = postTask.Result;
                if (result.IsSuccessStatusCode)
                {
                    return this.RedirectToAction("Home");
                }
            }

            this.ModelState.AddModelError(string.Empty, "Server error. Please contact your administrator");

            return RedirectToAction("Privacy", "Home");
        }

标签： htmlasp.netasp.net-mvcasp.net-coreasp.net-web-api

解决方案

使用一些 JS 库（如 jQuery）来做 AJAX。

例如：

$.ajax({
    url: 'http://yourdomain/Home/AddToCart',
    data: {'ProductName': 'Samsung', 'Price': 1071.28},
    type: "POST",
    dataType: "json",
    contentType: "application/json;charset=utf-8",
    success: function(returnData){
        console.log(returnData);
    },
    error: function(xhr, ajaxOptions, thrownError){
        console.log(xhr.status);
        console.log(thrownError);
    }
});

推荐阅读