Question

我已经构建了一个HTML / Javascript页面，其中包含HTML表单和Google Map。提交后，Javascript代码会运行一些计算，更新表格并在Google地图上删除一个图钉。这一切都在运行客户端，并且没有问题。

我的挑战是，当按下Submit时，我想读取数据到SQL Server并运行我的客户端Javascript。

我有一个工作的ASP.NET / C＃/ Razor页面正在写入数据库并与我的客户端Javascript交互，但是，它只在发布表单时调用。我希望数据库交互能够在没有页面刷新的情况下工作。

哪种技术最适合实现这一目标？不管它是什么，它必须能够被我的客户端Javascript

调用

提前干杯

Answer 1

使用ajax。只需导入JQuery然后：

$.ajax({
    type: "POST",
    url: '/example/test',
    data: { number: 3 },
    success: function(data) {
        alert(data);
    }
});

在C＃上：

public class YourObject
{
    public int Number { get; set; }
}

在控制器上：

public class ExampleController : Controller
{
    public ActionResult Test(YourObject input)
    {
        return input.Number.ToString();
    }
}

输出将是：

您可以根据需要使用它来更新数据库，方法是将数据从客户端传递到控制器，并将任何数据返回给客户端。

Answer 2

使用XMLHttpRequest。它不会刷新页面。 aolse，你可以这样做：

<form action="action" method="post" target="hide_frame">
</form>
<iframe name="hide_frame" src="" id="hide_frame">
</iframe>

Answer 3

您可以通过几个步骤解决此问题。

1.创建一个json对象来表示您的数据

2.创建一个javascript函数，在客户端执行以发布数据

3.创建一个c＃模型以将数据序列化为

4.创建一个c＃控制器以接受数据的发布

5.使用实体框架或ADO.NET

调用数据访问提供程序

希望这有帮助！干杯！

<script>
    // declare the object
    var data = {};

    // add data
    data.Id = 1;
    data.Name = 'Test'; 

    // make json string
    var json = JSON.stringify(data);

    $('#some_button').click(function(){
        // make ajax call
        $.ajax({
          type: 'post',
          url: 'http://localhost/api/Data',
          data:  json,
          contentType: "application/json",
          success: function(result) {
            // check response for status codes
          },
          error: function(error) {
            // check for error
          }
        });
    });
    </script>

创建一个模型来表示您的帖子数据

namespace Data.Models
{
    public class Item
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

创建一个控制器来处理发布请求和更新数据库

using Data.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web.Http;

namespace Data.Controllers
{
    public class DataController : Controller
    {
        // some data access provider using entity framework or ADO.NET
        DataProvider provider;

        public DataController()
        {
            provider = new Provider ();
        }

        [HttpPost]
        public IActionResult PostData([FromBody]Item data)
        {
            provider.Add(data);
            return Ok();
        }
    }
}

Answer 4

您使用下面的控制器表单集合冷却在服务器端发布数据。

<强>使用Javascript：

   var request = new XMLHttpRequest();
      request.open("POST", "Controller/Action");
      request.send(new FormData(formData));

C＃

public void Action(FormCollection formCollection)
{
   //Your code goes here.
}

写入数据库而不发布/刷新

4 个答案: