c# asp.net mvc - how to pass parameter into Url.Action

Question

I've created a basic weather forecast app. What im struggling to do is get the citys value from the input field, into my script. This is on my View:

So if the user types the city 'London' for example, script code passes 'London' as a parameter. How can i achieve this? I understand I must construct the URL using JavaScript but unsure how to.

     ViewBag.Title = "WeatherOrNot";
}

<h2>WeatherJS</h2>


<p id="reply"></p>
<p id="temp"></p>
<p id="humidity"></p>
<form>
   City:<br>
    <input id="city" type="text" name="city"><br>

</form>
<button>Get Weather</button>



<script>

    $(document).ready(function () {

        $("button").click(function () {
            $.get("@Url.Action("GetWeather","Home",new {City = "Mumbai" })", function (response) {
                //response
                $("#reply").text(response.name);
                $("#temp").text(response.main.temp);
                $("#humidity").text(response.main.humidity);

                //$("#city").get("city");
                console.log(response);

            });

        });

    });

I'm fairly new to MVC so apologies if this is very simple!

Thanks

You cant mix Razor and JS like that. Get the url, then add your input value as a query parameter in JS — maccettura
– maccettura, Commented Feb 1, 2018 at 20:32
How do you mean 'get the URL'. If i'm trying to call the URL.Action method how could i get that url? — Metzer
– Metzer, Commented Feb 1, 2018 at 20:38

RAHUL S R · Accepted Answer · 2018-02-01 20:51:23Z

1

try this work around

var enteredCity = $('#city').val();

$.get("@Url.Action("GetWeather","Home")"+"?City="+enteredCity, function (response) {

edited Feb 1, 2018 at 20:51

answered Feb 1, 2018 at 20:34

RAHUL S R

1,5891 gold badge12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Metzer Over a year ago

Hi Rahul, what im trying to do is get the city, in this case Mumbai from the input box. So if the user types London, then in my Url.Action id pass in the City something like $(#city).val() but thats not working.

RAHUL S R Over a year ago

changed my answer take a look now

Metzer Over a year ago

thanks, I see what you did there, so we need to get the value into a variable and then pass it. makes sense!

JamieD77 · Accepted Answer · 2018-02-01 21:59:47Z

1

ajax calls usually have a data property.. you can use this to set your query string values. $.get(url, data, function)

var city = $('#city').val();
$.get("@Url.Action("GetWeather","Home")", new {City = city}, function (response) {

another way that might make more sense would be to use the full ajax syntax.

var city = $('#city').val();
$.ajax({
    url: "@Url.Action("GetWeather","Home")",
    data: {City: city},
    type: "GET"
}).done(function(response){
    $("#reply").text(response.name);
    $("#temp").text(response.main.temp);
    $("#humidity").text(response.main.humidity);
    //$("#city").get("city");
    console.log(response);
});

edited Feb 1, 2018 at 21:59

answered Feb 1, 2018 at 21:54

JamieD77

14k1 gold badge19 silver badges27 bronze badges

Comments

Reece Russell · Accepted Answer · 2020-09-02 10:37:08Z

1

@Url.Action is server-side, whereas javascript is client-side.

So you cannot change a server-side element (e.g. @Url.Action) with javascript, you'll have to use a form.

$.get("@Url.Action("GetWeather","Home")"+"?City=" + $("#city").val(), function (response)

edited Sep 2, 2020 at 10:37

answered Feb 1, 2018 at 20:56

Reece Russell

3661 silver badge12 bronze badges

Collectives™ on Stack Overflow

c# asp.net mvc - how to pass parameter into Url.Action

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related