Styjun

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

Not sure what your Club looks like. Suppose we define the Club as below :

public class Club

 public int Idget;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)

 ...