Привязка свойства модели к списку <SelectListItem>в сообщении

Question

Я пытаюсь опубликовать значение текстового поля, которое щелкнуло, обратно в контроллер. Моя проблема в том, что независимо от того, в каком текстовом поле нажата кнопка, форма отправляет только первый элемент в списке. Я знаю, что мог бы вместо этого использовать выпадающий список, но в конечном итоге решил против него.

У меня есть вид, где я перебираю List<SelectListItem>. В этом цикле я создаю текстовое поле для другого свойства модели (string) и устанавливаю значение свойства для элемента в пределах List<SelectListItem>. Я установил текстовые поля как доступные только для чтения и добавил jquery для отправки формы при нажатии на текстовое поле.

JQuery с комментариями, который отправляет значение текстового поля в консоль, работает нормально. Это отправка обратно в контроллер, где у меня возникла проблема. Я думаю, что проблема может быть в том, что постбэк JQuery не распознает каждое отдельное текстовое поле и вместо этого публикует первый элемент в списке - я могу ошибаться.

Любая помощь будет принята с благодарностью

Вот вид:

 @model TheConnector.ViewModel.SelectAHero
    @{
        ViewBag.Title = "Heroes";
        ViewBag.Message = "Here are the Heroes that are currently registered with your account";
    }
    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
        <script type="text/javascript">

            $(document).ready(function () {
                $('.postHeroSelection').click(function () {
                    $(this).closest('form').submit();
                });
            });


    //        $(document).ready(function () {
    //            $('.postHeroSelection').click(function () {
    //                console.log($(this).val());
    //            });
    //        });


        </script>
    }
    <noscript>
        <style>
            body
            {
                display: none;
            }
        </style>
        <meta http-equiv="refresh" content="0;url=javascript-error.htm" />
    </noscript>
    <div class="full grey_bg auto-height">
        <!-- Full -->
        <div class="content">
            <!-- Content -->
            <div class="container" style="background-color: #ddd">
                <div style="padding: 0px; border: 0px solid black; height: 100px; margin: 0; padding: 10px;">
                    <div style="float: left; border: 0px solid black; padding: 0 0; height: 100%; display: table;">
                        <h2>@ViewBag.Message</h2>
                    </div>
                </div>
                @Html.ValidationMessageFor(m => m)
                <div id="RegisterNewHero">
                    @using (Html.BeginForm("Heroes", "User", FormMethod.Post))
                    {

                        <h3>
                            Please click on one of the following to load a Hero:</h3>
                        <br />

                        for (var i = 0; i < Model.ListOfHeroes.Count; i++)
                        { 
                        @Html.TextBoxFor(m => m.chosenHero, new { @class = "postHeroSelection", onclick = "return false", @Value = Model.ListOfHeroes[i].Value.ToUpper(), @readonly = "readonly", @id = Model.ListOfHeroes[i].Value })
                        <br />
                        <br />
                        }

                        <br />
                        <br />
                        <br />

                    }
                </div>
                <!-- Register -->
                <div class="clear">
                </div>
            </div>
            <!-- / Content -->
        </div>
        <!-- Full  -->
    </div>

Вот контроллер:

            [Authorize]
            [HttpPost]
            public ActionResult Heroes(SelectAHero model) {

             if(ModelState.IsValid){

                return RedirectToAction("Index", "User");
    }
        else
{     
                 ModelState.AddModelError("","An error has occurred");

             return View(model);
             }
}

Answer 1

У вас есть только одна форма, так что это "$ (this) .closest ('form'). Submit ();" не нужно Вы можете увидеть, что вы публикуете, заглянув в раздел сети браузера (инструмент разработчика).

Вы можете использовать <a href="Heroes?id=@yourHeroId"> для передачи выбранных данных без использования формы или js.

А ваш контроллер выглядит как

[HttpGet]
public ActionResult Heroes(string id){ //whatever you do}

Answer 2

Всегда будет публиковать первый элемент с соответствующим именем формы на сервере.Вам понадобится вспомогательный элемент (возможно, скрытый) для хранения значения, по которому щелкнули.

В моем личном мнении предпочтительнее использовать DropDownListFor, который был создан для этой цели.

Answer 3

Извините, теперь я понимаю ваш код. Вам нужно добавить этот код в форму.

            @Html.HiddenFor(m=>m.chosenHero)

и измените ваш скрипт на

            $('.postHeroSelection').click(function () {

                document.getElementById("chosenHero").value = $(this).val();// add this line 
                $(this).closest('form').submit();
            });

теперь вы можете получить доступ к model.chosenHero.

и измените список текстовых полей на

@Html.TextBoxFor(m => m.ListOfHeroes[i].Value
                                        , new {
                                            @class = "postHeroSelection"
                                            , onclick = "return false"
                                            , @readonly = "readonly"
                                            , @id = Model.ListOfHeroes[i].Value
                                        })