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>

How do you expect to know at server-side the value of a yet unknown client-side field? You need either a `
` (to POST it) or JavaScript — Camilo Terevinto, May 22 '19 at 14:40
I could pass has a string and then parse to a datetime. In this case i could not use submit form (POST) as usual. — Pl4tinum, May 22 '19 at 14:46

score 1 · Answer 1 · answered May 22 '19 at 15:19

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.

answered May 22 '19 at 15:19

Pl4tinum

123
15

1

`enctype="multipart/form-data"` is not necessary here. You only need that for **uploading** files in the form, not for downloading. – ADyson May 23 '19 at 08:53
Yes you are right this is an error created by a copy/paste from a form with an upload. Thank you. – Pl4tinum May 23 '19 at 12:47

ADyson · Answer 2 · 2019-05-22T14:59:06.300

0

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.

edited May 22 '19 at 14:59

answered May 22 '19 at 14:49

ADyson

57,178
14
51
63

In this case i can't use input of type submit. – Pl4tinum May 22 '19 at 14:56
Why not, exactly? It will generate the same kind of GET request as the hyperlink in your original code. If you want to make it look like a hyperlink, then use some CSS – ADyson May 22 '19 at 14:57
That is because i have a jQuery.fn.preventDoubleSubmission, and i want to download a file by clicking on a button, but when my control returns a Action its a simple file and not any kind of View. Then my button remains disabled, and i want to click again on it. – Pl4tinum May 22 '19 at 15:06
1

So why not just exclude this form/button from your custom submission rules? I've never come across this preventDoubleSubmission plugin before, but in about 10 seconds googling I found [this](https://stackoverflow.com/a/4473801/5947043) which at the end of the answer suggests a way to exclude a specific form from the rule. If you use your imagination (and your search engine), anything is possible :-) – ADyson May 22 '19 at 15:11
Thanks for your reply, i have already thought about that, but i was with hope that asp.net mvc could give me other good answer. – Pl4tinum May 22 '19 at 15:35
1

Since MVC is a server side technology it was never going to help you with reading values entered in the client. Once the page is loaded then mvc is not used again until a new request goes to the server. Anything you want to do before that, while the page is still in the browser, has to be done using JavaScript or via standard HTML features such as forms – ADyson May 22 '19 at 15:43

score 0 · Answer 3 · answered May 23 '19 at 03:15

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>

Thank you for your ansmwer. In fact that code is more simple. — Pl4tinum, May 23 '19 at 12:58

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

3 Answers3