ArcGIS JavaScript API 4.11 - Print causes Postback Issue in asp.net

Question

I am new to ESRI and the javascript API. I am trying to implement the print task as seen here: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Print.html

I am using the following code to create the Print functionality and it is appearing correctly as seen in the image:

require(["esri/widgets/Print"], function (Print) {
  var print = new Print({
    view: view,
    printServiceUrl: "https://printserviceurl/services/PrintService/GPServer/Export%20Web%20Map"
  });

    // Adds widget below other elements in the top left corner of the view
    view.ui.add(print, {
      position: "bottom-left"
    });
});

The issue I am experiencing is clicking the "Advanced Options", "Export", or some other functionality causes a postback. This is an asp.net web application and the map is within an asp.net Master Page form control. This is causing the whole page to postback. Does anyone have a recommendation to prevent the full page postback and keep the print functionality? It does work correctly if I move it outside the tag but to position it properly in the page the content area has to stay within the form.

Answer 1

I was having a similar issue with the sketch widget. It appears that the issue is that the buttons for all of the API's widgets are not created with the type="button" attribute, this causes the browser to assume its type="submit" and thus causes the Postback. See here on ESRI Forum. To get around this for any of the ArcGIS API v 4.x widgets I have been adding the attribute after the widget renders:

var esriWidget = new Widget({
    view: this.view,
    container: 'widgetDiv',
});

$.each($('#widgetDiv').find("button"), function (i, btn) {
    $(btn).attr("type", "button");
});

This allows the widget to work as intended without causing a Postback.