Question

我正试图从由SQL db填充的下拉列表中获取 Selected Item ，并将其传递给按钮的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>

现在，我们需要在单击“提交”按钮时获取当前选定的值。根据{{3}}，我们可以通过以下方式获取当前俱乐部的ID：

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

[另一种方法] ：发送俱乐部实例而不是俱乐部ID（不安全）

    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)
{
    ...
}

从下拉列表中获取所选项目并将其传递给onClick事件

1 个答案: