Passing parameter to action via javascript does not pass an integer value

Question

I'm working on an asp.net mvc application that needs to pass parameters to an action. I'm passing the parameter through the url. The action is called but the parameter value is broken. Example, if I have a string "This is the example of a string passed by parameter", when it arrives in the action it arrives like "This is the", ie it takes only a part.

I don't know if this is due to the fact that this string is in json format and some character may be causing this information break. In the analysis I noticed that when there is a "#" the string is broken and only what is on the left is passed. I tried replacing the "#" with the "$" using replace, but that didn't work. The string that arrives from the other side is different from the original that was generated by javascript.

async function GravarPlayList() {
    var listaDeVideos = [];
    for (var i = 0; i < listaDeIds.length; i++) {
        var videos = await executeSearch(listaDeIds[i], maxResult);

        for (var j = 0; j < videos.length; j++) {
            listaDeVideos.push(videos[j]);
        }
    }

    var jsonVideos = JSON.stringify(listaDeVideos);

    var url = "/Playlist/CreatePlaylist?pListaIds=" + jsonVideos;
    var novaUrl = url.replace('#', '$');
    window.location.href = novaUrl;
}

[HttpGet]
public ActionResult CreatePlaylist(string pListaIds)
{
      var pcustom = pListaIds.Replace('$', '#');
      AppCache.Instance.VideoPesquisa = JsonConvert.DeserializeObject<IEnumerable<VideoItem>>(pcustom);
      PlaylistModel playlistModel = new PlaylistModel() { VideosPesquisa = AppCache.Instance.VideoPesquisa };
      return View(playlistModel);
}

example of a string passed by parameter

[
    {
        "kind":"youtube#playlistItem",
        "etag":"vINbNEDWl2kOPwB7uZNfjznpqic",
        "id":"UExCbG5LNmZFeXFSZ2daWmdZcFBNVXhkWTFDWWtadEFSUi41NkI0NEY2RDEwNTU3Q0M2",
        "snippet":{
            "publishedAt":"2018-06-24T07:24:38Z",
            "channelId":"UCQYMhOMi_Cdj1CEAU-fv80A",
            "title":"C Programming – Features & The First C Program",
            "description":"Programming & Data Structures: C Programming – Features & The First C Program\\nTopics discussed:\\n1. Features of C programming.\\n2. High-level language Vs Low-level language.\\n3. Explanation of a…vi/Wslbb1UQUSc/hqdefault.jpg",
            "width":480,
            "height":360
        },
        "standard":{
            "url":"https://i.ytimg.com/vi/Wslbb1UQUSc/sddefault.jpg",
            "width":640,
            "height":480
        },
        "maxres":{
            "url":"https://i.ytimg.com/vi/Wslbb1UQUSc/maxresdefault.jpg",
            "width":1280,
            "height":720
        }
    },
    "channelTitle":"Neso Academy",
    "playlistId":"PLBlnK6fEyqRggZZgYpPMUxdY1CYkZtARR",
    "position":168,
    "resourceId":{
        "kind":"youtube#video",
        "videoId":"Wslbb1UQUSc"
    },
    "videoOwnerChannelTitle":"Neso Academy",
    "videoOwnerChannelId":"UCQYMhOMi_Cdj1CEAU-fv80A"
}
}
]

string when it arrives in action

[{"kind":"youtube"

How can I solve this? I don't want to use ajax as I need to redirect to another page.

score 0 · Accepted Answer · answered Sep 25 '21 at 02:35

You have a few things that are off:

Normally, JSON is sent via a request body and not a query parameter.
Your JSON seems a bit off syntax-wise.
Your API endpoint is a GET when it should (probably?) be a POST, seeing that your controller method name is CreatePlaylist.

ASP.NET can bind request bodies to class objects. You should create a class object to represent the request JSON - converters exist online to make this easier, such as this one. Assuming I corrected the mistakes in the JSON properly, it yields the following classes:

public class Snippet
{
    public DateTime publishedAt { get; set; }
    public string channelId { get; set; }
    public string title { get; set; }
    public string description { get; set; }
    public int width { get; set; }
    public int height { get; set; }
}

public class Standard
{
    public string url { get; set; }
    public int width { get; set; }
    public int height { get; set; }
}

public class Maxres
{
    public string url { get; set; }
    public int width { get; set; }
    public int height { get; set; }
}

public class ResourceId
{
    public string kind { get; set; }
    public string videoId { get; set; }
}

public class Video
{
    public string kind { get; set; }
    public string etag { get; set; }
    public string id { get; set; }
    public Snippet snippet { get; set; }
    public Standard standard { get; set; }
    public Maxres maxres { get; set; }
    public string channelTitle { get; set; }
    public string playlistId { get; set; }
    public int position { get; set; }
    public ResourceId resourceId { get; set; }
    public string videoOwnerChannelTitle { get; set; }
    public string videoOwnerChannelId { get; set; }
}

You can then change your controller method to:

[HttpPost]
public ActionResult CreatePlaylist(Video pListaIds)
{
      var pcustom = pListaIds.Replace('$', '#');
      AppCache.Instance.VideoPesquisa = JsonConvert.DeserializeObject<IEnumerable<VideoItem>>(pcustom);
      PlaylistModel playlistModel = new PlaylistModel() { VideosPesquisa = AppCache.Instance.VideoPesquisa };
      return View(playlistModel);
}

As for the javascript side, are you sure you don't want to use Ajax? There seems to be a fairly good solution here that you can try. It will make supplying a request body much easier to your backend.

As a note, you don't need to do the string replacement anymore, or the extra deserialization. You can simply set `VideosPesquisa` of your model to a new List containing `pListaIds` I believe, assuming VideosPesquisa is of type `List — Timothy G., Sep 29 '21 at 11:54

Passing parameter to action via javascript does not pass an integer value

1 Answers1