Блог

У меня есть наследие ASP.NET приложение, которое я пытаюсь модернизировать. У меня есть страница

MyPage.aspx и его кодовая ссылка MyPage.aspx.cs

Я заменил пользовательский пользовательский элемент управления (который выполняет загрузку файлов) пользовательским компонентом react. Компонент react работает должным образом. У старого пользовательского контроллера ascx был обработчик событий, который определен в ‘MyPage.aspx.cs’ следующим образом.

 protected void asyncFile_FileUploaded(object sender, FileUploadedEventArgs e)
  //logic to set the uploaded file's name etc for saving.
}
  

Теперь, когда пользовательский элемент управления заменен пустым DIV, куда монтируется компонент react, у меня не остается возможности вызвать мою логику C # в файле ‘MyPage.aspx.cs’ codebehind.

Я создал ‘CreateProperty.aspx.js ‘ файл, который отвечает за инициализацию моего компонента react на странице .aspx, и ниже приведено содержимое этого файла.

 $(document).ready(function () {

    if ($('#Myupload').length) {

        ReactDOM.render(
            <Upload id="pictureupload2"
                onChange={onChange}
                setBusyState={onBusy}
                onUploadSucceeded={onUploadSucceeded}
            />,
            document.getElementById("Myupload")
        );
    }
});


function onChange(e) {
    console.log(e);
}

function onBusy(e) {
    console.log(e);
}

function onUploadSucceeded(e) {
    console.log(e);
}
  

Как только компонент react выполнил загрузку, он вызывает функцию onUploadSucceeded() с моими требуемыми параметрами. Но как я передам это значение обратно в мой файл MyPage.aspx.cs?

Пожалуйста, помогите.

Добавьте стандартный asp.net кнопка в форме.

Переместите код, который у вас есть / был для предыдущего события, в эту заглушку кода кнопки, например:

  protected void asyncFile_FileUploaded(object sender, FileUploadedEventArgs e)
//logic to set the uploaded file's name etc for saving.
}
  

Итак, переместите приведенный выше код на кнопку (style =»display:none), чтобы скрыть его.
И, КОНЕЧНО, не копируйте код заглушки события !!!.

Теперь в вашей функции js сделайте что угодно и просто «нажмите» на эту кнопку.

Бонус здесь в том, что вы получаете крайне необходимый post обратно при запуске js / ajax на стороне клиента. Итак, у вас есть это:

 function onUploadSucceeded(e) {
   console.log(e);
   document.getElementById('<%= btnOkUpLoad.ClientID %>').click();
  

Итак, вышесказанное приятно. Я имею в виду, что вы могли бы выполнить js __doPostBack(); в js, но тогда вам нужно передать некоторые параметры, а затем на стороне клиента в событии загрузки страницы определить параметры (что является проблемой для записи).

Итак, в любое время, когда я хочу запустить код из js? Просто введите кнопку asp, напишите заглушку кода для этой кнопки, а затем на стороне клиента используйте приведенный выше «.click ()» для запуска этого кода. Как уже отмечалось, в БОЛЬШИНСТВЕ случаев вы все равно хотите отправить сообщение обратно — что и asp.net кнопка делает за вас.

Редактировать: теперь я сказал, что в большинстве случаев мы хотим вернуть post? Ну, я имею в виду, когда мы все сказали и сделали — и, следовательно, это нажатие кнопки имеет смысл. Мы, конечно, не хотим ненужных обратных отправлений — но когда вы это делаете, и когда вы хотите запустить вызвать заглушку кода, трюк с этой кнопкой хорош. Просто используйте style =»display: none», чтобы скрыть их от просмотра, но js-код все равно может использовать .click () для запуска (нажатия) кнопки для вас))