How to pass textbox value using @Url.Action in ASP.NET MVC Core 2.2

Question

In my View i have the following code:

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

In my Control i have de following code:

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

In this particular case, i want to pass the createdDate value that is inside the textbox (createdDate) to my Url.Action(...), so it could be passed as a queryString in my URL. This action is invoked as a GET request, and in GetRoomAccessHistory control method, i should get my createdDate.

Thank you.

PS

I think the solution should be something like this:

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

Answer 1

I have got a possible answer:

<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>

This does exactly what i want and it works, but i was trying to find a more nice solution because my experience in ASP.NET MVC is low.

Answer 2

For Get request,try to use 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>

And your solution could be simplified to

<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>

Answer 3

You're using the wrong tool for the job.

Since the Url.Action() helper runs on the server-side, it has already executed when the page was first loaded, and generated a fixed URL which is inserted into the page's HTML. It cannot know what the user later enters into the textbox.

If you want to capture data which a user has entered, it makes more sense to use a form. In this case I've used the BeginForm tag helper to generate a suitable HTML <form> tag:

<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>

When submitted, this will generate a GET request to the GetRoomAccessHistory action's URL, and append createdDate as a querystring variable, using the value from the textbox.