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

Posted 2023-03-27

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

【英文标题】：How can I access a JsonResult variable in my code behind file from the javascript of my view? Razor Pages. C#

【发布时间】：2020-12-09 23:09:26

【问题描述】：

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

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

【参考方案1】：

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

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

解决方案：

将 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>

让 .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();

在视图中的 .js 中使用 @Json.Serialize(object) 访问 JsonResult 类型变量背后的代码。

function getJsonData() 
    jsonData = @Json.Serialize(Model.ConvertedDataNeededAsJsonObject);
    console.log(jsonData);

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