Question

I add a link dynamically to a page, and I want the “name” property to be a value that is sent back from server.

This is the code I have for adding a song to the server and then I dynamically append link to my song with a delete button, and I want that button to have a name equal to the songID evaluated on the server side.

  $.ajax({
            url: "/Home/AddSong",
            type: "POST",
            data: $("#AddTopTenFavForm").serialize(),
            success: function () { ShowMsg("Song Added Successfully"), $(container).find('ul').append('<li><a class="topTenFavLinks" href="#" name="' + substr + '" >' + name + '</a> <span name= @item.SongId class="btnDeleteSong dontDoAnything">x</span></li>'); },
            error: function () { ShowMsg("There was an error therefore song could not be added, please try again") }
        });

here is my mvc action:

    [HttpPost]
    public ActionResult AddSong(HomeViewModel songModel)
    {
        var song = new Song();
        song.GenreId = songModel.topTenFav.Rank;
        song.Date = DateTime.Now;
        song.UserName = User.Identity.Name;
        song.Title = songModel.topTenFav.Title;
        song.YoutubeLink = songModel.topTenFav.YoutubeLink;
        repository.AddSong(song);
        repository.Save();
        return RedirectToAction("Index");

    }

How would I solve this issue in a single ajax request?

Answer 1

You need to return your song ID from the action

[HttpPost]
public ActionResult AddSong(HomeViewModel songModel)
{
    //code goes here
    return this.Content(song.Id.ToString());

}

and in the javascript success callback you will receive data in arguments:

success: function (data) { /* use data here for anchor name */ },