Получить выбранный элемент из выпадающего списка и передать его на событие onClick

Question

Я пытаюсь получить Выбранный элемент из выпадающего списка, заполненного базой данных SQL, и передать его событию onclick кнопки

<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

Итак, подпись AssignPlayertoClub (ID, Club) это.Я прочитал много ответов на этот вопрос, но ничего не могу исправить, поскольку большинство из них использует Viewbag

Это мой метод в Controller Метод, который будет вызываться onClick

 [HttpPost]
    public async Task<ActionResult> AssignPlayertoClub(int ID,Club club)
    {
        await playerRepo.AssignPlayer(ID, club);
        return RedirectToAction("Index");
    }

Я использую JQuery Ajax для вызова метода контроллера следующим образом:

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"));
}

Если требуется какой-либо другой код.Дайте мне знать

Answer 1

Не уверен, как выглядит ваш Club. Предположим, мы определили Club как показано ниже:

public class Club
{
    public int Id{get;set;}
    public string Name {get;set;}
}

Во-первых, я бы предложил вам использовать Club.Id для идентификации option:

<td>
    @Html.DropDownList("Clubs", new SelectList(Model.Clubs,"Id","Name"), "Select Club")
</td>

Теперь нам нужно получить текущее выбранное значение при нажатии кнопки отправки. В соответствии с MDN мы могли бы получить текущий идентификатор клуба следующим образом:

<input type="button" onclick="var selected=Clubs.options[Clubs.selectedIndex].value;AssignPlayertoClub(@Model.Player.ID,selected)"/> //<-- Selected Value here

Наконец, ваш сервер ожидает экземпляр Club со стороны клиента. Это не безопасно. Возможно, что пользователь подделывает название клуба, а затем наносит вред вашей системе. Безопасный способ - получить Club.Id вместо всего экземпляра Club. Чтобы исправить это, заставьте метод принимать параметр 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");
}

---

[Другой подход] : отправьте экземпляр клуба вместо идентификатора клуба ( НЕ БЕЗОПАСНО )

    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"));
    }

Способ действия на стороне сервера такой же, как у вас:

[HttpPost]
public async Task<ActionResult> AssignPlayertoClub(int ID,Club club)
{
    ...
}