JS-функция против C#

Помимо перемещения ваших сценариев в тег HEAD вместо того, чтобы помещать их в конец BODY, вы можете захотеть отложить выполнение кода, поступающего из C#, после завершения загрузки.

Что-то вроде:

window.onload = () => { const event = new Event("dummy"); setTimeout(() => { updateGaugeValue(5, event) }, 0) };

Поместите это в вызов Page.ClientScript.RegisterStartupScript(....

Что оно делает:

// appending to the queue of onload functions ensures any other variables and functions, that were declared in main template's scripts, will be defined already.
window.onload = () => {
  const event = new Event("dummy"); // We want some event so that we can call .preventDefault() upon something.
  // There are better ways around it though.

  setTimeout(() => { 
    updateGaugeValue(5, event) 
  }, 0); // setting timeout to 0 effectively means, execute immediately after next round of UI updates
};

Таким образом, проблема заключается в том, что мы используем страницу onload/onready для настройки, создания и отображения датчика.

Но нам нужна простая кнопка asp.net, скажем, текстовое поле, а затем некоторый код для установки значения.

Проблема в загрузке окна. Если мы «внедряем» вызов этой процедуры, мы не можем (очень хорошо) контролировать, когда запускается сценарий запуска нашего реестра, в отличие от существующего кода для настройки + создания датчиков.

Итак, что нам нужно сделать, так это «заставить» наш сценарий запуска ждать. Одним из отличных способов является использование setTimeout, и это фактически «подтолкнет» наш код к подпрограмме в «стеке выполнения» движка JavaScript, чтобы дождаться, отобразить страницу, запустить этот код настройки датчика, а ЗАТЕМ запустить желаемый код.

Еще хуже? Немного протестировав это, event.prevent, кажется, все испортил.

Итак, вот рабочее доказательство концепции:

Сверху размещаем код библиотеки скриптов, например:

<title></title>
<script src = "../Scripts/jquery-1.12.4.js"></script>
<link href = "../Content/bootstrap.css" rel = "stylesheet" />
<script src = "../Scripts/bootstrap.js"></script>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.9/justgage.min.js"></script>

но для НАШЕГО кода мы хотим, чтобы этот материал был размещен внизу - после того, как DOM будет создан, настроен и отрендерен.

Итак, теперь этот код:

    <div style = "padding:35px">

        <div style = "border: solid 1px; float: left; padding: 8px">
            <legend>Client side buttons</legend>
            <button style = "float: left" onclick = "updateGaugeValue(4, event)">Click me</button>
            <button style = "float: left; margin-left: 25px" onclick = "updateGaugeValue2(6, event)">Click me</button>

        </div>

        <div style = "float: left; margin-left: 30px; padding: 8px; border: solid 1px">
                <legend>Server side buttons</legend>

            <div style = "float:left">
                Enter value 1-10 for gauage1:
                <br />
                <asp:TextBox ID = "TextBox1" runat = "server" Width = "50px">
                </asp:TextBox>
                <asp:Button ID = "cmdGauge1" runat = "server"
                    Text = "set guage 1"
                    CssClass = "btn"
                    OnClick = "cmdGauge1_Click" />
            </div>

            <div style = "float: left; margin-left: 30px">
                Enter value 1-10 for gauage2:
                <br />
                <asp:TextBox ID = "TextBox2" runat = "server" Width = "50px">
                </asp:TextBox>
                <asp:Button ID = "cmdGauge2" runat = "server"
                    Text = "set guage 2"
                    CssClass = "btn"
                    OnClick = "cmdGauge2_Click" />
            </div>
        </div>

        <div style = "clear: both; height: 50px">
        </div>

        <div id = "gauge1" style = "float:left;width:250px;"></div>

        <div id = "gauge2" style = "width:200px;float:left; margin-left:40px; width: 250px"></div>

    </div>


<script>
    var gauge1;
    var gauge2;


    window.onload = function () {

        gauge1 = new JustGage({
            id: "gauge1",
            value: 0,
            min: 0,
            max: 10,
            title: "Files Uploaded",
            label: "Zip Files Uploaded",
            showInnerShadow: true,
            shadowOpacity: 2,
            shadowSize: 5,
            textRenderer: function () {
                return "144 / 400"
            }
        });

        gauge2 = new JustGage({
            id: "gauge2",
            value: 0,
            min: 0,
            max: 10,
            title: "My Gauge",
            label: "Pdf Files uploaded",
            showInnerShadow: true,
            shadowOpacity: 2,
            shadowSize: 5,

        });
    };

    function updateGaugeValue(newValue, event) {
        // event.preventDefault();
        // alert('START')
        gauge1.refresh(newValue);
    }
    function updateGaugeValue2(newValue, event) {
        // event.preventDefault();
        gauge2.refresh(newValue);
    }


</script>

Итак, мы завернули наш скрипт запуска в функцию тайм-аута. Даже с задержкой «1» это работает, поскольку тайм-аут поместил наш код в программный стек движка Java, и, таким образом, он запускается после всего остального на этой странице.

код позади:

    protected void cmdGauge1_Click(object sender, EventArgs e)
    {
        string jscode =
            $@"updateGaugeValue({TextBox1.Text},event)";

        jscode = "setTimeout(function () {" + jscode + "},1)"; 
        ClientScript.RegisterStartupScript(Page.GetType(), "myfunc", jscode, true);
    }

    protected void cmdGauge2_Click(object sender, EventArgs e)
    {

    }

и результат:

Однако на самом деле нет особой необходимости «вызывать» ту существующую JS-подпрограмму, которая у вас есть, поскольку JS-объект существует (или мы предполагаем, что он будет).

Итак, тогда этот код:

    protected void cmdGauge1_Click(object sender, EventArgs e)
    {
        string jscode =
            $@"gauge1.refresh({TextBox1.Text})";

        jscode = "setTimeout(function () {" + jscode + "},1)"; 
        ClientScript.RegisterStartupScript(Page.GetType(), "myfunc", jscode, true);
    }

Итак, теперь мы даже не вызываем эту JS-процедуру, а используем метод обновления графического объекта.

Итак, теперь мы можем вернуть (раскомментировать) event.preventDefault(), и, таким образом, обе кнопки на стороне клиента и на стороне сервера в приведенном выше примере теперь будут работать.

Я также должен указать, что я использовал задержку 1 (1 миллисекунда). Эта задержка (количество) на самом деле не требуется, но СИЛА подпрограммы, которая должна быть помещена в стек выполнения механизма Java, является важной частью здесь.