Url action parameters using Ajax

Question

I am trying to pass data from a view to a controller using parameters. Now I am running a few difficulities. I am trying to pass those parameters once I select a row from a table and press on a button which has a onclick method to ShowTasks()

The C# controller:

     [Route("/service/delivery/{id}/{shopdoccode}/{regdate}")]
     public ActionResult Delivery(string id, string shopdoccode, string regdate)
     {
        //do stuf
     }

The Javascript function when user clicks on button:

function ShowTasks() {
    //Dear Stackoverflow > This works, this is for selecting a row in the table
    var $selectedRow = $(".highlight");
    if ($selectedRow.length == 1) {
        var dcColumn = 0;
        var rdColumn = 1;
        var shopdoccodeColumn = 3;

        //assigning name to the colomn value 
        var id = $selectedRow[0].children[dcColumn].innerText.trim();
        var regdate = $selectedRow[0].children[rdColumn].innerText.trim();
        var shopdoccode = $selectedRow[0].children[shopdoccodeColumn].innerText.trim();

        //ajax 
        if (id && regdate && shopdoccode) {
            $.ajax({
                type: 'POST',
                url: '@Url.Action("service", "delivery" ,new { id = "id", shopdoccode = "shopdoccode", regdate = "regdate" })',
                data: { id, regdate, shopdoccode },
                success: function (data) {
                    if (data.success) {
                        console.log("Succes");
                    }

                },
                error: function (data) {
                    console.log("Error");
                }
            });
        }
    }
}

What have I done so far? Sitting for hours trying to find a way to give the parameters to my controller so I can invoke a SQL stored procedure. Unforntunately I can not simply use a hidden form for this.

Also this was quite helpful: Url.Action parameters?

@sleeyuen

Just `url: '@Url.Action("service", "delivery")',` - you already sending the values in the `data` parameter (and your quoting the values of `id`, `shopdoccode` etc, but you cannot razor (server side code) and javascript variable (client side code) like that anyway) — , Apr 11 '17 at 22:01
And based on your error message - your script is in a separate file - razor code is not parsed in external files. — , Apr 11 '17 at 22:02

score 3 · Answer 1 · answered Apr 11 '17 at 21:19

3

Looks to me like your Url.Action has its parameters in the wrong order. Change it to:

url: '@Url.Action("delivery", "service", new { id = "id", shopdoccode = "shopdoccode", regdate = "regdate" })',

Here's the appropriate overload that you want:

Action(String, String, Object) with actionName, controllerName, and routeValues, in that order.

answered Apr 11 '17 at 21:19

sleeyuen

923
6
10

Thanks, but when I run the application and inspect what happens when I press the button: jquery-1.12.4.js:10254 POST http://localhost:63061/@Url.Action(%22delivery%22,%20%22service%22,%20new%2…0shopdoccode%20=%20%22shopdoccode%22,%20regdate%20=%20%22regdate%22%20%7D) 404 (Not Found) – Катерина Apr 11 '17 at 21:23
Maybe post a screenshot, because that doesn't make much sense. – sleeyuen Apr 11 '17 at 21:30
done ;) this happens when I inspect the browser and click on the buton – Катерина Apr 11 '17 at 21:48
Is this javascript in the razor file? Or in a .js file? I'm guessing the latter because it doesn't make sense as to why `@Url.Action` would still be a part of the generated url. – sleeyuen Apr 11 '17 at 21:59

score 2 · Answer 2 · answered Apr 11 '17 at 22:00

2

test with Url.RouteUrl instead of Url.Action

answered Apr 11 '17 at 22:00

deicode

53
1
6

score 2 · Accepted Answer · answered Apr 12 '17 at 01:11

2

You can not *.js or *.html file wrtie razor code.

@Url.Action(string actionName,string controllerName,object routeValues)

The above code can only be used *.cshtml file.

answered Apr 12 '17 at 01:11

Zony

71
2

When I put it in my cshtml I get an error from new { id = "id", shopdoccode = "shopdoccode", regdate = "regdate" })', argument 3:cannot convert from ' – Катерина Apr 12 '17 at 07:21
Because you have submitted parameters in ajax inside, so do not need to set objectValue in Action – Zony Apr 12 '17 at 07:31
Similar to @Url.Action("ArticleDetail", "Article", new { id = item.ID }),The item.ID here is not from js. – Zony Apr 12 '17 at 07:45

Url action parameters using Ajax

3 Answers3

Linked