Question

我将在单击按钮时构建一个HTML页面，它将HTML页面上的localStorage数据传输到MVC站点的操作和处理操作，然后将数据保存在MVC站点

这是我的HTML按钮的功能：

function OH10() {            
            var url1 = "@Url.Action('createFuel','FuelExtras')";
            debugger;
            for (var i = 0; i < localStorage.length; i++) {
                var key = localStorage.key(i);
                var val = localStorage.getItem(key);
                $.ajax({
                    type: "POST",
                    url: url1,
                    data: val,
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function () {
                        alert("Data has been added successfully.");
                    },
                    error: function () {
                        alert("Error while inserting data");
                    }
                });
            }
};

以及MVC网站的操作：

[HttpPost]
        [System.Web.Services.WebMethod]
        public ActionResult createFuel(FuelExtra fuelExtra)
        {
            db.FuelExtras.Add(fuelExtra);
            db.SaveChanges();
            string message = "SUCCESS";
            return Json(new { Message = message, JsonRequestBehavior.AllowGet });
        }

有人建议吗？还有一个问题正在开发中，我已经在同一解决方案中建立了两个站点，但是当我将其部署到Intranet时，我必须将其分为两个站点。可以吗？

Answer 1

我在您的示例中发现了几个错误：

1）System.Web.Services.WebMethod仅用于Web表单，在MVC中不能用于ActionResult，应将其删除。

2）AJAX回调放置在循环内，因此它将执行多次而不是单个请求。

3）传递的数据是从localStorage函数作为单个字符串获取的最后一个getItem()值，而不是反映模型属性名称及其值的键值对。

因此，假设您具有以下模型：

public class FuelExtra
{
    public string CaptainEmpNo { get; set; } 
    public string AirCraft { get; set; } 
    public string FlightNo { get; set; } 
    public string DepartureAirport { get; set; } 
    public string ArrivalAirport { get; set; }

    // other properties
}

然后，您应将键值对对象作为JSON字符串发送，因为contentType的{{1}}设置已设置为application/json，如下例所示：

JSON.stringify()

控制器操作应如下所示：

function OH10() {            
    var key = []; // array of keys
    var val = []; // array of values

    var obj = {}; // combined KVP object

    var url1 = "@Url.Action("CreateFuel", "FuelExtras")";
    debugger;
    for (var i = 0; i < localStorage.length; i++) {
        key.push(localStorage.key(i));
        val.push(localStorage.getItem(key));
    }

    for (var n = 0; n < key.length; n++) {
        obj[key[n]] = val[n]; // create KVP object from both arrays
    }

    $.ajax({
       type: "POST",
       url: url1,
       data: JSON.stringify({ fuelExtra: obj }), // convert KVP object to JSON string
       dataType: "json",
       contentType: "application/json; charset=utf-8",
       success: function (result) {
           alert("Data has been added successfully.");
       },
       error: function (xhr, status, err) {
           alert("Error while inserting data");
       }
    });
};

由于您要以POST方法发送AJAX请求，因此[HttpPost] public ActionResult CreateFuel(FuelExtra fuelExtra) { db.FuelExtras.Add(fuelExtra); db.SaveChanges(); return Json(new { Message = "SUCCESS" }); }是不必要的。

注意：

确保从AJAX传递的JSON字符串中的所有键名都与JsonRequestBehavior.AllowGet类中声明的所有属性名相同。

将HTML网站与MVC网站的操作链接起来

1 个答案: