.cshtml 文件的文本编辑框比 prompt() 大

Question

在我的 .cshtml 中有以下代码：

 (as part of <div id="buttons")
  <button id="Route" class="btn btn-outline-dark" onclick="rRoute()">Draw Route</button>


  function rRoute() {        
            var route = prompt("Please paste in the route.");
            if (route != null && route != "") {
                alert("route is not implemented yet.");
            }
        }

提示只给出一行，有什么东西可以用来得到一个更大的框，它需要多行（大约 15 行），（然后我可以读入一个字符串 list/array ).我在 TextArea 上看到过使用 @Html.TextArea("Message", new { rows = 10, cols = 40}) 的帖子但是如何将它合并到我的 .cshtml 文件中，或者有更好的选择吗？我仍然希望它是页面上的弹出窗口而不是新页面。

谢谢！

Answer 1

你可以试试用modal，把TextArea放到it.Here是一个demo:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Draw Route
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <label>Please paste in the route.</label>
                @Html.TextArea("Message", new { rows = 15, cols = 40 })
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

结果：

Answer 2

用上面的代替我用的@Html

<textarea id="naipsData" class="form-control"></textarea>

因为布局对我来说好看多了。但如果没有 Yiyi You 的帮助就无法完成模态部分。

.cshtml 文件的文本编辑框比 prompt() 大

Larger text edit box for .cshtml file than a prompt()

javascript

razor

asp.net-core