时间戳

首页 > 解决方案 > 如何从我的视图的 javascript 访问我的代码隐藏文件中的 JsonResult 变量？剃刀页面。C＃

javascript - 如何从我的视图的 javascript 访问我的代码隐藏文件中的 JsonResult 变量？剃刀页面。C＃

问题描述

上下文：我正在尝试将嵌套的 JSON 对象从我的代码隐藏页面传递到我认为的 .js 中的方法。

UI 流程：用户从 ddl 中选择一个组织，然后调用 ddl 的 onchange 函数，onchange 函数单击隐藏的提交按钮，调用 code behind 方法，该方法使用所需的组织数据创建嵌套的 json 对象。

标签： javascriptasp.net-corerazor-pages

解决方案

经验教训：我浪费了太多时间试图通过 ajax 实现这一点。有可能（也许是首选）使用 ajax 来实现我的目标。如果我的页面处理程序是一个 get 方法，那么 ajax 将是一个快速的解决方案。但是，razor 页面中的 ajax 需要一个隐藏字段来包含 ajax 帖子的防伪令牌。那么为什么不使用剃刀页面表单来完成同样的事情呢？这使我可以在整个应用程序中保持一致性。

注意：如果有更好的方法，请发表评论。我使用带有隐藏提交按钮的表单，因为这是我可以快速完成的。

解决方案：

  1. 将ddl放入表格中。
<form asp-page-handler="DdlValueSelected">
    <div class="form-group">
        <label>Select Me</label>
        <select class="form-control" onchange="ddlChanged()" asp-for="@Model.blah" asp- 
        items="@Model.blah"> 
        </select>        
    </div>
    <button hidden type="submit" id="ddlSubmitButton"></button>
</form>
  1. 让 .js 中的 onchange 方法单击表单中隐藏的提交按钮。
function ddlChanged() {
    $('#ddlSubmitButton').click();
}

3a。在您的方法代码中，进行服务调用以返回您需要的对象。3b。将对象转换为 JsonResult 的对象类型。

public async Task<IActionResult> OnPostDdlValueSelected(string ddlValue) 
{
   DataNeededAsJsonObject = await _service.GetDataNeededAsJsonObject(ddlValue);
   ConvertedDataNeededAsJsonObject = new JsonResult(DataNeededAsJsonObject);
   return Page();
}
  1. 通过在视图中的 .js 中使用 @Json.Serialize(object) 来访问 JsonResult 类型变量后面的代码。
function getJsonData() {
    jsonData = @Json.Serialize(Model.ConvertedDataNeededAsJsonObject);
    console.log(jsonData);
}

我欢迎反馈，这样我下次可以做得更好。

推荐阅读