如何在Web表单的模态弹窗中显示Ping响应类错误信息

1. 修改前端JS函数，支持接收错误参数 #

改造原有的openModal函数，新增错误信息入参，调用前先替换模态框body的文本内容：

<script type='text/javascript'>
    function openModal(errorMsg) {
        // 动态替换模态框body内的文本
        $('#myModal .modal-body p').text(errorMsg);
        $('#myModal').modal('show');
        // 3秒后自动关闭
        setTimeout(function () {
            $('#myModal').modal('hide');
        }, 3000);
    }
</script>

如果担心选择器不准确，可以给模态框内的p标签加id属性，比如<p id="modalErrTip"></p>，然后JS改为$('#modalErrTip').text(errorMsg)即可

2. 改造后端C#代码，传递错误信息到前端 #

修改原有Ping检测逻辑，在触发弹窗时把获取到的错误信息传递给JS函数，注意要转义错误信息中的单引号，避免前端JS语法报错：

string destIP = GridView3.DataKeys[row.RowIndex].Value.ToString();
try
{
    Ping p = new Ping();
    PingReply reply = p.Send(destIP);
    if (reply.Status == IPStatus.Success)
    {
        if (reply.RoundtripTime > 50)
        {
            Image2.ImageUrl = "../Images/yellow.png";
            serverPanel.Controls.Add(Image2);
            Image2.ToolTip = Convert.ToString("RoundTripTime: " + reply.RoundtripTime + "ms");
        }
        else
        {
            Image3.ImageUrl = "../Images/green.png";
            serverPanel.Controls.Add(Image3);
            Image3.ToolTip = Convert.ToString("RoundTripTime: " + reply.RoundtripTime + "ms");
        }
    }
    else
    {
        Image4.ImageUrl = "../Images/red.png";
        serverPanel.Controls.Add(Image4);
        string errorMsg = reply.Status.ToString();
        Image4.ToolTip = errorMsg;
        // 传递错误信息到前端JS函数，转义单引号避免语法错误
        ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "Pop", $"openModal('{errorMsg.Replace("'", "\\'")}');", true);
    }
}
catch (PingException err)
{
    Image4.ImageUrl = "../Images/red.png";
    serverPanel.Controls.Add(Image4);
    string errorMsg = err.Message.ToString();
    Image4.ToolTip = errorMsg;
    // 如果异常场景也需要弹出提示，保留下面这行即可
    ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "Pop", $"openModal('{errorMsg.Replace("'", "\\'")}');", true);
}

可选优化 #

如果需要展示更友好的中文错误提示，可以提前做枚举值映射，比如把DestinationHostUnreachable转换为「目标主机不可达」，TimedOut转换为「请求超时」再传递到前端。

内容的提问来源于stack exchange，提问作者Allrounder