將模型屬性綁定到列表 <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

對不起，現在我了解您的代碼了。 您需要在表單中添加此代碼。

            @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
                                        })

Answer 2

您只有一種形式，因此該“ $（this）.closest（'form'）。submit（）;” 沒必要。 通過查看瀏覽器網絡部分（開發人員工具），可以查看發布的內容。

您基本上可以使用<a href="Heroes?id=@yourHeroId">來傳遞所選數據，而無需使用表單或js。

你的控制器看起來像

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

Answer 3

它將始終將帶有表單對應名稱的第一項發布到服務器。 您將需要一個輔助元素（可能是“隱藏”）來存儲單擊的值。

在我個人看來，最好使用為此目的而創建的DropDownListFor。