Add Javascript Variable into asp-route-data

Question

I have an asp action that has multiple parameters that need to be passed to the controller. Some of the variables can change based on actions on the page, for instance I have a date picker so the user can choose what date they want.

When they change the date that date is saved as a Javascript variable.

<script>
     $('#pvHistoricalDates').on('change', '#date', function (ev, picker) {
            date = $(this).find("option:selected").val();
     });
</script>

Is there anyway for me to insert that variable value into the following asp-action without creating just creating a URL. I am aware of that solution but I am curious if I can just insert it directly as a variable.

<a asp-action="LoadData" asp-route-account="@Model.Account" asp-route-date="???">Button</a>

You can pass it as a `query string parameter` in your `url` if that is what you are asking. — Ryan Wilson, Dec 10 '18 at 20:42
Yeah, I might end up doing that I was just wondering if I can stick with the `asp-action` and not have to build the `url` myself. — A. Hasemeyer, Dec 10 '18 at 20:44
What is it you want to accomplish here? Are you trying to post a lot of data back to the server for a data entry? If so, why not wrap these values in a form? If this is just a quick update, you could use `ajax` — Ryan Wilson, Dec 10 '18 at 20:46
Kind of just a general question, I have a page with several different options that you can choose which update some variables while many will stay the same but might not all need to be submitted at the same time. Looks like you can't get JQuery or JS variables into the Razor page so I will just do the `ajax` call as you mentioned. — A. Hasemeyer, Dec 10 '18 at 20:51
Looks like this issue answers my question. https://stackoverflow.com/questions/28317182/how-to-pass-a-value-to-razor-variable-from-javascript-variable — A. Hasemeyer, Dec 10 '18 at 20:54

score 4 · Accepted Answer · answered Dec 10 '18 at 22:14

The tag helpers in razor view gets executed on server and the result of that (HTML markup) will be send to browser and browser will render it. So at this time, the anhcor tag helper already generated the href attribute value of the link.

What you can do is, override the normal link click behavior using JavaScript, read the input element value from your page and use that to build a new URL and navigate to that.

You can give a dummy value for your date param. I am also giving an Id attribute to the anchor tag which I will use later for my jQuery selector.

<a  id="btn" asp-action="LoadData" asp-route-account="@Model.Account" 
                                   asp-route-date="dummyDate">Button</a>

and in your JavaScript (Here I am using jQuery, but you can do the same in JavaScript)

$(function (){

    $("#btn").click(function (e) {
        // Stop the normal navigation
        e.preventDefault(); 

        //Build the new URL
        var url = $(this).attr("href");
        var date = $("#date").val();
        url = url.replace("dummyDate", date);

        //Navigate to the new URL
        window.location.href = url;

    });
});

Add Javascript Variable into asp-route-data

1 Answers1