Get Selected Item from dropdown and pass it to an onClick event - asp.net-core-mvc

Question

I'm trying to get Selected Item from drop down list populated by SQL db and pass it to an onclick event of a button
<th>Select Club</th>
<td>#Html.DropDownList("Clubs", new SelectList(Model.Clubs.Select(x => x.Name)), "Select Club")</td>
<input type="button" onclick="AssignPlayertoClub(#Model.Player.ID,"Clubs.SelectedValue")"/> //<-- Selected Value here
So signature of AssignPlayertoClub(ID,Club) is this. I read a lot of answers on this issue but nothing fixes mine as most of them use Viewbag
This is my method in Controller Method to be called onClick
[HttpPost]
public async Task<ActionResult> AssignPlayertoClub(int ID,Club club)
{
await playerRepo.AssignPlayer(ID, club);
return RedirectToAction("Index");
}
I'm using JQuery Ajax to call the controller method like this
function AssignPlayertoClub(Id, club) {
$.ajax({
url: '/Player/AssignPlayertoClub',
type: 'POST',
data: { Id: Id, club: club },
success: function (data) {
window.location.href = data;
}
}).done(() => alert("Player Assigned"));
}
If any other code is required. Let me know

Answer 1

Not sure what your Club looks like. Suppose we define the Club as below :
public class Club
{
public int Id{get;set;}
public string Name {get;set;}
}
Firstly, I would suggest you using a Club.Id to identity the option:
<td>
#Html.DropDownList("Clubs", new SelectList(Model.Clubs,"Id","Name"), "Select Club")
</td>
Now we need to get the current selected value when clicking the submit button. According to the MDN, we could get the current club's Id in the following way:
<input type="button" onclick="var selected=Clubs.options[Clubs.selectedIndex].value;AssignPlayertoClub(#Model.Player.ID,selected)"/> //<-- Selected Value here
Lastly, your server is expecting an instance of Club from client side. That's not safe. It's possible that an user fakes a club name and then harm your system. A safe way is to receive an Club.Id instead of the whole Club instance. To fix that, make the method accept a parameter of Club.Id:
[HttpPost]
public async Task<ActionResult> AssignPlayertoClub(int ID,Id club)
{
var club = await clubRepo.FindAsync(Id);
await playerRepo.AssignPlayer(ID, club);
return RedirectToAction("Index");
}
[Another approach]: send an instance of club instead of club's Id (NOT SAFE)
function getClubs(){
var x = document.querySelectorAll("#Clubs option");
var clubs = [];
x.forEach(i => {
var value = i.getAttribute("value");
var text = i.textContent;
if(value !="") { clubs.push({id: value, name: text}); }
});
return clubs;
}
function AssignPlayertoClub(Id, clubId) {
var clubs = getClubs();
$.ajax({
url: '/Player/AssignPlayertoClub',
type: 'POST',
data: { Id: Id, club :clubs[clubId]},
success: function (data) {
window.location.href = data;
}
}).done(() => alert("Player Assigned"));
}
The server side action method is the same as yours :
[HttpPost]
public async Task<ActionResult> AssignPlayertoClub(int ID,Club club)
{
...
}