代码之家 › 专栏 › 技术社区 › Bassie

发现不可能发布简单的ajax

razor-pages asp.net-core c#

Bassie · 技术社区 · 6 年前

我真的很努力,我会告诉你任何建议。

我有这个领域

<input id="scanInput" type="text" placeholder="SCAN" class="form-control" />

为此,我想在字段更改时进行ajax调用,所以我尝试了

<script>
$("#scanInput").change(function () {
    console.log('ye');

    $.getJSON("?handler=GetPartDetails", function (data) {
        //Do something with the data.
        console.log('yay?');
     }).fail(function (jqxhr, textStatus, error) {
        var err = textStatus + ", " + error;
        console.log("Request Failed: " + err);
        });
});
</script>

在我的 PageModel 有这个方法

[HttpPost]
public IActionResult GetPartDetails()
{
    return new JsonResult("hello");
}

有关网页的网址是 /packing/package/{id}

现在当我改变输入值时,我明白了 ye 在控制台上,我可以看到网络调用 http://localhost:7601/Packing/Package/40?handler=GetPartDetails (我认为正确的url?)带状态码二百

但是我的断点 GetPartDetails 从来没打过,我看不到 yay? 在控制台里。

我也看到来自 fail 经办人:

请求失败:parsererror,syntaxerror:json.parse:json数据的第3行第1列出现意外字符

但我甚至没有传递任何json数据…为什么它必须这样做我也试过这样:

$.ajax({
    type: "POST",
    url: "?handler=GetPartDetails",
    contentType : "application/json",
    dataType: "json"
})

但我知道

XML分析错误:找不到元素地点: http://localhost:7601/Packing/Package/40?handler=GetPartDetails 第1行,第1列:

我也试过了

$.ajax({
    url: '/?handler=Filter',
    data: {
        data: "input"
    },
    error: function (ts) { alert(ts.responseText) }
})
    .done(function (result) {
        console.log('done')
    }).fail(function (data) {
        console.log('fail')
    });

带着行动

    public JsonResult OnGetFilter(string data)
    {
        return new JsonResult("result");
    }

但在这里,我在控制台中看到了结果文本,但我的断点从未命中操作,并且没有网络错误………… 我做错什么了?

3 回复 | 直到 6 年前

Sk83r1l4m4 6 年前

请原谅我把这个答案发出去,我宁愿在评论区发,但我还没有这个特权。

你不应该 PageModel 像这样?

[HttpPost]
public IActionResult GetPartDetails() {
  return new JsonResult {
    Text = "text", Value = "value"
  };
}

Bassie 6 年前

不知怎的,我找到了一个可行的设置,但我不知道为什么…

页面模型

    [HttpGet]
    public IActionResult OnGetPart(string input)
    {
        var bellNumber = input.Split('_')[1];
        var partDetail = _context.Parts.FirstOrDefault(p => p.BellNumber == bellNumber);

        return new JsonResult(partDetail);
    }

剃须刀页

$.ajax({
    type: 'GET',
    url: "/Packing/Package/" + @Model.Package.Id,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: {
        input: barcode,
        handler: 'Part'
    },

    success: function (datas) {
        console.log('success');
        $('#partDescription').html(datas.description);
    }
});

Edward 6 年前

对于这个问题,它与razor页面处理程序有关。为了 default handler routing .

http动词的处理程序方法(“未命名”处理程序方法)遵循约定:在[async]上(附加async是可选的,但是建议用于异步方法)。

对于您的原始帖子,请按照以下步骤操作:

变化 GetPartDetails 到 OnGetPartDetails 哪个处理程序是 PartDetails 而http动词是 Get .
去除 [HttpPost] 已经定义了 得到 动词by OnGet 。

客户请求

 @section Scripts{ 
<script type="text/javascript">
    $(document).ready(function(){
        $("#scanInput").change(function () {
            console.log('ye');

            $.getJSON("?handler=PartDetails", function (data) {
                //Do something with the data.
                console.log('yay?');
            }).fail(function (jqxhr, textStatus, error) {
                var err = textStatus + ", " + error;
                console.log("Request Failed: " + err);
            });
        });
    });
</script>
}

您还可以按照上面的链接自定义上述规则,以替换默认的页面应用程序模型提供程序