Мульти радио кнопка с тем же именем требуется архитектура - PullRequest
Новая
       25

Мульти радио кнопка с тем же именем требуется архитектура

0 голосов
/ 19 октября 2018

У меня есть форма, в которой есть неизвестное количество входов типа радио.Поэтому я должен использовать массив для него в части модели.

Это моя форма 

<form method="post" action="/File/Validate">
    <input type="number" name="fileId" value="@file.ID" class="hidden" />
        @Html.AntiForgeryToken()
        @foreach (var item in file.LABEL)
        {
            string id = item.KLASS.KLASS_NAME + i;
            <div id="@id">
                <input name="klassId[]" value="@item.KLASS.ID" class="hidden"/>
                <p>Class name : @item.KLASS.KLASS_NAME</p>
                <input type="radio" name="result" value="true" />Correct<br />
                <input type="radio" name="result" value="false" />Wrong/Unsure<br />
            </div>
            i++;
                    }
            <button type="submit" class="btn btn-default">Save</button> 
</form>

Это модель 

public class Validator
{
    public int fileId { get; set; }
    public int[] klassId { get; set; }
    public bool[] result { get; set; }
}

и это часть контроллера 

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Validate(Validator validator)
{}

Моя проблема в том, чтокогда я нажимаю на переключатели, только один из ответов отправляется на сервер, однако количество KLASS всегда неизвестно.Так что мне делать, какое решение вы предлагаете?Спасибо вам, ребята.

1 Ответ

0 голосов
/ 19 октября 2018

Причина в том, что вы транслируете все радио с одинаковым именем: 

<div id="id-1">
    ...
    <input type="radio" name="result" value="true" />Correct<br /> 
    ...
    <input type="radio" name="result" value="false" />Wrong/Unsure<br />
    ...
</div>
<div id="id-2">
    ...
    <input type="radio" name="result" value="true" />Correct<br /> 
    ...
    <input type="radio" name="result" value="false" />Wrong/Unsure<br />
    ...
</div>
<div id="id-3">
    ...
    <input type="radio" name="result" value="true" />Correct<br /> 
    ...
    <input type="radio" name="result" value="false" />Wrong/Unsure<br />
    ...
</div>

Видите это?Здесь у вас есть 3 группы радиостанций, но все радиостанции имеют одинаковое название.Другими словами, будет выбрана только одна из радиостанций, и только одна из них будет отправлена ​​на сервер .

Еще одна вещь, которую я должен сказать, это то, что я не думаю, что этохорошая идея разместить result[] и klassId[] как отдельные массивы.Если кто-то не проверил вторую группу радиостанций, вы получите 3 klassId и 2 result на стороне сервера, поэтому не будете знать, какие две радиостанции выбраны.

Лучшим способом является создание нового DTO для хранения группы klassId-result, назовем его ValidatorDetail: 

public class ValidatorDetail
{
    public int klassId { get; set; }
    public bool result { get; set; }
}

Чтобы отправить их в виде массива, вы можетевизуализируйте поля с индексом на странице просмотра: 

<form method="post" action="/Home/Validate">
    <input type="number" name="fileId" value="@file.ID" class="hidden" />
    @Html.AntiForgeryToken()
    @{ var i = 0;}
    @foreach (var item in file.LABEL)
    {
        string id = item.KLASS.KLASS_NAME + i;
        <div id="@id">
            <input name="details[@i].klassId" value="@item.KLASS.ID" class="hidden"/>
            <p>Class name : @item.KLASS.KLASS_NAME</p>
            <input type="radio" name="details[@i].result" value="true" />Correct<br />
            <input type="radio" name="details[@i].result" value="false" />Wrong/Unsure<br />
        </div>
        i++;
    }
    <button type="submit" class="btn btn-default">Save</button> 
</form>

Наконец, измените действие контроллера, как показано ниже: 

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Validate(int fileId,[FromForm]ValidatorDetail[] details)
{
    return new JsonResult(details);
}

Это будет работать так, как ожидалось.

...