如何在.cshtml中实现支持多行输入的弹窗替代单行prompt()

你当前已经引入了Bootstrap样式（代码中用到了btn、btn-outline-dark类），直接用Bootstrap内置模态框内嵌多行文本域是最优方案，无需额外引入依赖，也不会跳转新页面。

步骤1：在.cshtml中添加模态框DOM结构 #

你可以把这段代码放在页面任意位置（比如</body>标签之前）：

<!-- 路线输入模态框 -->
<div class="modal fade" id="routeModal" tabindex="-1" aria-labelledby="routeModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="routeModalLabel">输入路线内容</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 内嵌15行的多行文本域 -->
        @Html.TextArea("routeInput", new { rows = 15, cols = 40, @class = "form-control", @id = "routeInput" })
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="confirmRouteBtn">确认</button>
      </div>
    </div>
  </div>
</div>

步骤2：替换原有js逻辑 #

把原来的rRoute函数替换为如下逻辑：

// 点击Draw Route按钮触发模态框显示
function rRoute() {
  // 每次打开清空之前的输入内容
  document.getElementById('routeInput').value = '';
  // 显示模态框，如果你用的是Bootstrap 4.x，语法对应调整即可
  const routeModal = new bootstrap.Modal(document.getElementById('routeModal'));
  routeModal.show();
}

// 确认按钮点击逻辑
document.getElementById('confirmRouteBtn').addEventListener('click', function() {
  const inputContent = document.getElementById('routeInput').value.trim();
  if (inputContent) {
    // 按换行符分割为字符串数组，自动兼容Windows和Unix换行格式
    const routeArr = inputContent.split(/\r?\n/);
    // 此处替换为你自己的业务逻辑
    alert("路线输入完成，共" + routeArr.length + "行");
    // 处理完关闭模态框
    bootstrap.Modal.getInstance(document.getElementById('routeModal')).hide();
  } else {
    alert("请输入路线内容");
  }
})

其他可选方案说明 #

如果你不需要依赖Bootstrap，也可以自己用CSS写一个固定定位的弹窗，默认设置display: none隐藏，点击按钮时修改display属性显示即可，文本域读取、转数组的逻辑和上面完全一致。

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