c# - 获取复选框 Item Asp.net core 的 Id

Question

我想创建一个视图，在其中选择“复选框”一个项目，然后单击“下一步”按钮，该按钮将发送带有所选项目 ID 的发布请求，以便我可以使用其 ID 重定向到需要 ID 的操作

这是视图

@model IEnumerable<Game>;
@{
    ViewBag.Title = "Game Select List";
}
<form method="post">
    <div class="card-body sm">
        <div class="card-deck">
            @foreach (var game in Model)
            {
                var photoPath = "~/image/" + (game.PhotoUrl ?? "noImage.png");
                <div id="crta" class="card m-3" style="min-width: 18rem; max-width:30%;">
                    <div class="card-header">
                        <h3>@game.Name</h3>
                        <h1 hidden>@game.Id</h1>
                    </div>
                    <img class="card-img-top " height="400" title="@game.Name"
                         src="@photoPath" asp-append-version="true">
                    <div class="card-footer">
                        <label asp-for="@game.IsSelected"></label>
                        <input type="checkbox" value="@game.IsSelected" asp-for="@game.IsSelected"/>
                    </div>
                </div>
            }
        </div>
        <button type="submit">Next</button>
    </div>
</form>

这就是行动

        [HttpGet]       
        public IActionResult SelectGame()
        {
            var model = gameRepository.GetAllGames();           
            return View(model);
        }

        [HttpPost]       
        public IActionResult SelectGame(int id)
        {
            var game = gameRepository.GetById(id);
            if(game==null)
            {
                return View("NotFound");
            }
            if(ModelState.IsValid)
            {
                if(game.IsSelected==true)
                {
                    return RedirectToAction("details", new { id = game.Id });
                }

            }
            return View(game);
        }

它返回空值。

我试过了

<a asp-controller="home" asp-action="details" asp-route-id="@game.id">Select</a>

但是我不喜欢每个项目如何获得它的“选择按钮” 我不知道如何在 foreach 循环之外调用game.id来使用它而不是发布请求！

最终结果是这样的：您单击一个按钮，然后将调用带有游戏列表的模式，然后从中选择一个游戏，然后单击下一步，这会将您重定向到下一个模式（<=此视图需要一个 id )

标签： c#asp.net-core.net-coreasp.net-core-mvc

Answer 1

我想创建一个视图，在其中选择“复选框”一个项目，然后单击“下一步”按钮，该按钮将发送带有所选项目 ID 的发布请求，以便我可以使用其 ID 重定向到需要 ID 的操作

对于这种情况，可以在点击提交按钮的时候触发一个js事件。在这种情况下，您可以添加一个隐藏的输入控件，将名称分配给id（与 SelectGame 动作中的参数名称相同），并将值分配给当前所选图片的 idId。

我不知道如何在 foreach 循环之外调用 game.id 来使用它而不是发布请求！

您可以为每个复选框添加自定义属性data-id并将其分配给@game.Id，以便在 jquery 中，您可以循环遍历所有复选框以确定选中哪个复选框，并从选中的复选框data-id属性中获取 id 值以隐藏输入控件值。

并且需要注意的是，要保证用户只能选择其中一个复选框，不能多选，否则会一直通过选中图片中最后一个id。

在你的postSelectGame动作中，最后一句return View(game);会报错，因为游戏当前是Game对象的单个数据，而SelectGame对应模型接收到的view是一个list对象：IEnumerable<Game>。

只需尝试以下代码，即可解决所有这些问题：

       [HttpPost]       
        public IActionResult SelectGame(int id)
        {
            var game = gameRepository.GetById(id);
            if(game==null)
            {
                return View("NotFound");
            }
            if(ModelState.IsValid)
            {
                if(game.IsSelected==true)
                {
                    return RedirectToAction("details", new { id = game.Id });
                }

            }
            List<Game> games = new List<Game>() { game };
            return View(games);
        }

看法：

@model IEnumerable<Game>;
@{
    ViewBag.Title = "Game Select List";
}
<form method="post">
    <div class="card-body sm">
        <div class="card-deck">
            @foreach (var game in Model)
            {
                var photoPath = "~/OrderImage/" + (game.PhotoUrl ?? "noImage.png");
                <div id="crta" class="card m-3" style="min-width: 18rem; max-width:30%;">
                    <div class="card-header">
                        <h3>@game.Name</h3>
                        <h1 hidden>@game.Id</h1>
                    </div>
                    <img class="card-img-top " height="400" title="@game.Name"
                         src="@photoPath" asp-append-version="true">
                    <div class="card-footer">
                        <label asp-for="@game.IsSelected"></label>
                        <input type="checkbox" asp-for="@game.IsSelected" data-id="@game.Id" />
                    </div>
                </div>
            }
        </div>
        <button type="submit" onclick='submitform()'>Next</button>
    </div>
</form>

@section Scripts{
    <script>
        $('input[type="checkbox"]').on('change', function () {
            if ($(this).is(':checked')) {
                $('input[type="checkbox"]').not(this).prop('checked', false);//allow only one checkbox can be selected.
            }
        });
        function submitform() {
            var id = 0;
            $('input[type="checkbox"]').each(function () {
                if ($(this).is(':checked')) {
                    id = $(this).attr("data-id");// get selected image Id to variable id.
                }
            });
            $('<input type="hidden" name="id"/>').val(id).appendTo('form'); // add hidden input to form to pass selected image Id.
            $("form").submit();
        }
    </script>
}

这是测试结果：