Блог

Контекст: я пытаюсь передать вложенный объект JSON с моей страницы code behind в метод в .js в моем представлении.

Поток пользовательского интерфейса: пользователь выбирает организацию из ddl, затем вызывается функция onchange ddl, функция onchange нажимает скрытую кнопку отправки, вызывается метод code behind, который создает вложенный объект json с необходимыми организационными данными.

Извлеченные уроки: я потратил слишком много времени, пытаясь реализовать это через ajax. Возможно (возможно, предпочтительнее) использовать ajax для достижения моей цели. Если бы мой обработчик страницы был методом get, ajax был бы быстрым решением. Однако для ajax в razor pages требовалось скрытое поле, содержащее маркер защиты от подделки для сообщений ajax. Так почему бы не использовать форму страницы razor для выполнения того же самого? Это позволяет мне поддерживать согласованность во всем моем приложении.

Примечания: Пожалуйста, прокомментируйте, есть ли лучший способ сделать это. Я использовал форму со скрытой кнопкой отправки, потому что это то, что я мог сделать быстро.

Решение:

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>
  

2. Используя метод onchange в вашем .js, нажмите скрытую кнопку отправки в форме.

 function ddlChanged() {
    $('#ddlSubmitButton').click();
}
  

3a. В вашем методе code behind выполните вызов service, чтобы вернуть нужный вам объект.
3b. Преобразовать объект в объектный тип JsonResult.

 public async Task<IActionResult> OnPostDdlValueSelected(string ddlValue) 
{
   DataNeededAsJsonObject = await _service.GetDataNeededAsJsonObject(ddlValue);
   ConvertedDataNeededAsJsonObject = new JsonResult(DataNeededAsJsonObject);
   return Page();
}
  

4. Получите доступ к вашей переменной code behind типа JsonResult с помощью @Json.Сериализуйте (объект) в вашем .js в вашем представлении.

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

Я приветствую обратную связь, чтобы в следующий раз я мог сделать это лучше.