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。

将模型属性绑定到Post

3 个答案: