Компонент React / javascript для отправки данных обратно в aspx

#javascript #c# #asp.net #reactjs

#javascript #c# #asp.net #reactjs

Вопрос:

У меня есть наследие 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?

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

Комментарии:

1. Вы смешиваете веб-формы, jQuery и React? Вы жаждете наказания? Вы хотите заставить себя и всех тех, кто должен работать над вашим кодом после нескольких лет пыток? Пожалуйста, остановитесь. По крайней мере, удалите jQuery из уравнения. И прочитайте о том, как реализовать конечные точки веб-службы, использующие JSON, в ASMX. Попытка сохранить тот же шаблон веб-форм PRG с React вызывает проблемы.

2. @HereticMonkey, спасибо за ваше понимание. Не могли бы вы дать мне немного больше деталей? Мне нужно заменить пользовательский элемент управления компонентом react и хочу отправить событие на соответствующую страницу aspx.cs, где он встроен.

Ответ №1:

Добавьте стандартный 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 () для запуска (нажатия) кнопки для вас))

Комментарии:

1. @albert-d-kallal, твоя идея звучит неплохо! но как бы я передал данные ‘e’ из onUploadSucceeded(e) через document.getElementById(‘<%= btnOkUpLoad. ClientID %>’).click(); к обработчику button’n C #, пожалуйста?

2. Это действительно зависит от того, что в e вам нужно и хотите извлечь? Не знаю, какой элемент управления загрузчиком и т.д. вы используете. Если бы мне пришлось захватить (отправить) значение e для щелчка (код, лежащий в основе процедуры). Я бы поместил текстовое поле asp прямо под скрытым окном (style =»display: none») точно так же, как вы скрыли кнопку. Итак, прямо перед событием js click просто вставьте e в следующее поле. С помощью скрытого текстового поля вы можете в коде позади меня. MyTextBox. Текст, чтобы получить любое значение, которое вы ввели перед щелчком js. Вы все равно не упомянули, что или где вы делаете в своем сообщении. но использование скрытого текстового поля работает хорошо.

3. Разве событие на стороне сервера, которое запускается после загрузки, не содержит этой информации? Проблема в том, что событие на стороне сервера, вызванное событиями загрузки, НЕ отправляется обратно. Таким образом, ОЧЕНЬ вероятно, что в событии загрузки вы также можете получить переданные значения. Как уже отмечалось, хитрость / проблема / неудобство / проблема заключается в том, что, когда все сказано и сделано, вам, как правило, требуется ответная публикация — и вы не можете использовать для этого побочные события sever — поэтому окончательное событие на стороне клиента с щелчком мыши даже довольно хорошо решает эту проблему. Я предположил, что событие загрузки на стороне сервера проходит e или что-то еще, но приведенные выше комментарии должны сработать.