.load带有部分剃刀页面的数据参数的jQuery方法

Question

我正在使用Razor页面，无法使用jquery .load函数将javascript中的dto对象映射到模型中的类。

因此，用户单击UI中的按钮，然后运行以下javascript：

$('#btnGoToResults').click(function (e) {
    var dto = {
        ID: 1,
        CODE: 5
    };
    $('#divPerformanceResults').load('/PerformanceSearch?handler=ResultsPartial', dto); // Gives error 400
}

我也尝试了以下方法而无法正常工作：

$('#divPerformanceResults').load('/PerformanceSearch?handler=ResultsPartial', JSON.stringify(dto)); // "works" since the code behind is hit but the dto values are 0 

还尝试用ajax重写：

// Gives error 400
$.ajax({
    url: '/PerformanceSearch?handler=ResultsPartial',
    data: JSON.stringify(dto),
    dataType: 'json',
    contentType: 'application/json',
    type: 'POST',
    success: function (data) {
        $('#divPerformanceResults').html(data);
    }
});

这是我要映射到的模型：

public class RequestResultModel
{
    public int ID { get; set; }
    public int CODE { get; set; }
}

它是用于创建和返回局部视图的方法的参数，该局部视图将包含所有用于过滤的逻辑：

public PartialViewResult OnGetResultsPartial(RequestResultModel dto)
{
    Results = new List<PerformanceResultModel>()
    {
        ...
    };
    return new PartialViewResult
    {
        ViewName = "_PerformanceResults",
        ViewData = new ViewDataDictionary<List<PerformanceResultModel>>(ViewData, Results)
    };
}

该方法有效，部分被渲染，因此一切都很好。这只是我需要开始工作的dto，因此我可以过滤结果列表。通过将方法参数切换为int确实可以完成以下工作，但这只是一个参数，以后我将需要多个输入。

$('#divPerformanceResults').load('/PerformanceSearch?handler=ResultsPartial', 'ID=15'); // This works. Only one param though

如果可以提供任何帮助，还附加了chrome日志：

感觉好像我在这里缺少一些简单的东西，但是我找不到在线答案。

谢谢！

Answer 1

您的.load（）的第一个版本很好，如果jquery load（）方法检测到dto参数作为对象，它将进行http发布：

$('#divPerformanceResults').load('/PerformanceSearch?handler=ResultsPartial', dto);

然后可以将[HttpPost]属性添加到Action中以接受发布方法

    [HttpPost]
    public PartialViewResult OnGetResultsPartial(WebApplication1.Models.RequestResultModel dto)
    {

Answer 2

好的。经过更多测试和研究后，我最终得到了： https://www.learnrazorpages.com/security/request-verification

我发现在剃须刀页面上添加了标记，以防止没有标记的帖子。

因此，您可以忽略全局级别或类级别的令牌验证，例如：

[IgnoreAntiforgeryToken(Order = 1001)]
public class IndexModel : PageModel
{
    public void OnPost()
    {
    }
}

或者您可以按照以下步骤操作：

首先，将方法重命名为OnPost而不是OnGet：

public PartialViewResult OnPostResultsPartial(RequestResultModel dto)

然后在javascript调用中包含令牌，如下所示：

$('#btnGoToResults').click(function (e) {
    var dto = {
        ID: 1,
        CODE: 5
    };
    $('#divPerformanceResults').load('/PerformanceSearch?handler=ResultsPartial', 
      { dto: dto, __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val() });
}

就是这样！现在，它可以将JavaScript对象与pagemodel中的类正确映射：)希望这对其他人有帮助！