如何在 ASP.NET MVC Core 2.2 中使用 @Url.Action 传递文本框值答案

【问题标题】：How to pass textbox value using @Url.Action in ASP.NET MVC Core 2.2如何在 ASP.NET MVC Core 2.2 中使用 @Url.Action 传递文本框值
【发布时间】：2019-05-23 11:15:16
【问题描述】：

在我看来，我有以下代码：

<input type="text" id="createdDate" placeholder="dd/mm/yyyy" />
<a href="@Url.Action("GetRoomAccessHistory")">Download</a>

在我的控件中，我有以下代码：

[HttpGet]
public async Task<IActionResult> GetRoomAccessHistory(DateTime createdDate)
{ 
    // TO DO
}

在这种特殊情况下，我想将文本框内的 createdDate 值 (createdDate) 传递给我的 Url.Action(...)，因此它可以作为我的 URL 中的 queryString 传递。此操作作为 GET 请求调用，在 GetRoomAccessHistory 控制方法中，我应该获取我的 createdDate。

谢谢。

我认为解决方案应该是这样的：

<a href="@Url.Action("GetRoomAccessHistory", "Files", new { createdDate = ??? })" >Download</a>

【问题讨论】：

你希望如何在服务器端知道一个未知的客户端字段的值？您需要 <form>（发布）或 JavaScript
Tl;dr javascript
我可以传递一个字符串，然后解析为一个日期时间。在这种情况下，我不能像往常一样使用提交表单（POST）。

标签： c# asp.net-core-mvc

【解决方案1】：

我有一个可能的答案：

<form method="post" enctype="multipart/form-data" asp-action="GetRoomAccessHistory" id="formGetRoomAccessHistory">
    ...
    <button type="button" id="downloadRoomAccessHistory"</button>
</form>

<script>
    var form = document.getElementById("formGetRoomAccessHistory");

    document.getElementById("downloadRoomAccessHistory").addEventListener("click", function () {
        form.submit();
    });
</script>

这正是我想要的，它可以工作，但我试图找到一个更好的解决方案，因为我在 ASP.NET MVC 方面的经验很低。

【讨论】：

enctype="multipart/form-data" 在这里不是必需的。您只需要在表单中上传文件，而不需要下载。
是的，您是对的，这是由上传表单的复制/粘贴造成的错误。谢谢。

【解决方案2】：

你使用了错误的工具来完成这项工作。

由于Url.Action() helper 在服务器端运行，它在页面第一次加载时已经执行，并生成了一个固定的 URL，该 URL 插入到页面的 HTML 中。它无法知道用户后来在文本框中输入了什么。

如果您想捕获用户输入的数据，使用表单更有意义。在这种情况下，我使用了 BeginForm 标签助手来生成合适的 HTML <form> 标签：

<form asp-action="GetRoomAccessHistory" asp-controller="Files" method="get">      
  <input type="text" id="createdDate" name="createdDate" placeholder="dd/mm/yyyy" />
  <input type="submit" value="Download"/>
</form>

提交后，这将生成对 GetRoomAccessHistory 操作 URL 的 GET 请求，并使用文本框中的值附加 createdDate 作为查询字符串变量。

【讨论】：

在这种情况下，我不能使用提交类型的输入。
为什么不呢？它将生成与原始代码中的超链接相同类型的 GET 请求。如果你想让它看起来像一个超链接，那么使用一些 CSS
那是因为我有一个 jQuery.fn.preventDoubleSubmission，我想通过单击一个按钮来下载一个文件，但是当我的控件返回一个操作时，它是一个简单的文件而不是任何类型的视图.然后我的按钮仍然禁用，我想再次点击它。
那么为什么不从您的自定义提交规则中排除这个表单/按钮呢？我以前从未遇到过此 preventDoubleSubmission 插件，但在大约 10 秒的谷歌搜索后，我发现this 在答案的末尾提出了一种从规则中排除特定表单的方法。如果你发挥你的想象力（和你的搜索引擎），一切皆有可能:-)
由于 MVC 是一种服务器端技术，它永远不会帮助您读取客户端中输入的值。一旦页面被加载，则在新请求到达服务器之前不会再次使用 mvc。在此之前您想做的任何事情，当页面仍在浏览器中时，都必须使用 JavaScript 或通过标准 HTML 功能（例如表单）来完成

【解决方案3】：

对于Get 请求，请尝试使用window.location.href。

 <input type = "text" id="createdDate" placeholder="dd/mm/yyyy" />
<a onclick = "navigate()" >
    < input type="button" value='Download' />
</a>

<script type = 'text/javascript' >
    function navigate()
    {
        var createdDate = document.getElementById('createdDate').value;
        var url = "/Files/GetRoomAccessHistory?createdDate=" + createdDate;
        window.location.href = url;
    }
</script>

您的解决方案可以简化为

<form method = "get" asp-controller="Files" asp-action="GetRoomAccessHistory" id="formGetRoomAccessHistory">
    <input type = "text" name="createdDate" placeholder="dd/mm/yyyy" />
    <button type = "button" onclick="myFunction()">Download</button>
</form>

<script>
    function myFunction()
    {
        document.getElementById("formGetRoomAccessHistory").submit();
    }
</script>

【讨论】：

感谢您的回答。其实代码更简单。