Using ASP MVC URL Action in JavaScript for dynamic URL generation

Question

Using ASP MVC URL Action in JavaScript for dynamic URL generation

I have this on my Razor page

Index.cshtml

 @for (int i = 0; i < Model.Count(); i++)
 {
 var cars = Model.ElementAt(i); 
 <a href="@Url.Action("Cars","Home", new { id = cars.Id })">
 }

Now, I am looking to achieve the same functionality using jQuery Ajax in JavaScript.

$.ajax({
    type: "Get",
    url: '/Cars/Home',
    data: {
        id: $(this).attr("id")
    },
    dataType: "json",
    success: function (data) {             
        for (var i = 0; i < data.length; i++) {

            html1.push("<a href='Cars/Home', new { id = cars.Id })>");
            html1.push("</a>");
        }
        $("#wraps").html(html1.join(""));
    }
})

Despite encountering an error with the current approach, I am determined to figure out how to make it work. Any suggestions on how to tackle this issue would be greatly appreciated.

javascript asp.net ajax

Answer 1

Answer №1

The ajax request in your code seems a bit unusual. You are requesting /Cars/Home/{id}, but then you generate links to /Cars/Home/{someId} based on the length of the data array without actually using the data content.

If I understand correctly, you intend to make an HttpGet request to /Cars/Home/ (without specifying an id), expecting it to return an IEnumerable of a type like Car. Then, using JavaScript, you want to create links to the details page for each car. You can achieve this with the following code:

$.ajax({
    type: 'GET',
    url: '/Cars/Home',
    dataType: 'json',
    success: function (data) {             
        var links = [];
        for (var i = 0; i < data.length; i++) {
            var car = data[i];                
            links.push("<a href='/Cars/Home/" + car.Id + "'>Link to Car Id " + car.Id + "</a>");
        }
        $("#wraps").html(links.join(''));
    }
})

Answer 2

The ajax request in your code seems a bit unusual. You are requesting /Cars/Home/{id}, but then you generate links to /Cars/Home/{someId} based on the length of the data array without actually using the data content.

If I understand correctly, you intend to make an HttpGet request to /Cars/Home/ (without specifying an id), expecting it to return an IEnumerable of a type like Car. Then, using JavaScript, you want to create links to the details page for each car. You can achieve this with the following code:

$.ajax({
    type: 'GET',
    url: '/Cars/Home',
    dataType: 'json',
    success: function (data) {             
        var links = [];
        for (var i = 0; i < data.length; i++) {
            var car = data[i];                
            links.push("<a href='/Cars/Home/" + car.Id + "'>Link to Car Id " + car.Id + "</a>");
        }
        $("#wraps").html(links.join(''));
    }
})

Using ASP MVC URL Action in JavaScript for dynamic URL generation

Answer №1

Similar questions

Exploring the world of Node.js with fs, path, and the

The year slider on d3 showcases the specific regions between each incremental step

Issues with onfocus and onclick events not functioning as expected in HTML

I am encountering issues with the text box summing as it is providing me with

Enhance Your Search Bar with Ajax and JQuery for Dynamic Content Updates

Surprising Regex Match of ^ and special character

Result of jQuery Ajax responseText: "An issue occurred while processing your request."

Looking for a JavaScript code to create a text link that says "submit"?

Obtain a custom token after next authentication through Google login

What is the process for establishing a dependency on two distinct JavaScript files, similar to the depends-on feature found in TestNG?

Tips for preserving page index data, like radiobuttonlist, when moving to the following page

Saving JSON data as a file on server

Is there a universal method to disregard opacity when utilizing jQuery's clone() function across different web browsers?

The `await` keyword can only be used within an `async` function in

What are the steps to clipping a canvas using CSS clip-path?

Issue with Stack Divider not appearing on Chakra UI card

Require checkboxes in AngularJS forms

Cookie Consent has an impact on the performance of PageSpeed Insights

Is it possible to view the register form without being redirected?

Can the submit ID value be utilized in PHP?