Question

我的观点包含

        <div class="col-md-3 ">
            @{
                List<SelectListItem> deformitylevel = new List<SelectListItem>();
                deformitylevel.Add(new SelectListItem { Value = "hip", Text = "Hip" });
                deformitylevel.Add(new SelectListItem { Value = "knee", Text = "Knee" });
                deformitylevel.Add(new SelectListItem { Value = "ankle", Text = "Ankle" });
                deformitylevel.Add(new SelectListItem { Value = "other", Text = "Other" });
            }
                @Html.DropDownListFor(model => model.DeformityLevel, deformitylevel, "--Select Level -", new { @class = "form-control", @onchange = "showdeformitytextbox()", id = "deformitydropdown" })
                @Html.ValidationMessageFor(model => model.DeformityLevel, "", new { @class = "text-danger" })
        </div>
        <div class="col-md-3">
            @Html.EditorFor(model => model.DeformityLevel, new { htmlattributes = new { @class = "form-control", id = "deformitytextbox" ,style= "display:none"} })
        </div>

我的功能是

function showdeformitytextbox() {
        if ($("#deformitydropdown option:selected").text() == 'Other') {
            $("#deformitytextbox").show();

        }
        else {
            $("#deformitytextbox").hide();
        }
    }

当我选择＆＃34;其他＆＃34;在下拉列表中，它存储了其他＆＃39;在数据库中而不是存储在@ Html.EditorFor。

中输入的值

我忘记了帮助!!

Answer 1

正如其他人所提到的，为了使这个更干净，最好是将下拉菜单和文本框的模型字段分开。即使你使用下面的代码让它工作，如果你必须返回到选择了其他值的页面，它将导致更多的工作。也就是说，以下内容在文本框中正确提交了预期值。关键概念是在提交时将下拉列表设置为禁用。

假设您的表单的ID为submitForm，具体如下：

@using (Html.BeginForm("someActionName", "someControllerName", FormMethod.Post, new { @id="submitForm"}))

然后，以下代码将确保下拉列表不会通过拦截表单提交来提交其值：

   $("#submitForm").submit(function () {
      if ($("#deformitydropdown option:selected").text() === "Other") {
         $("#deformitydropdown").attr("disabled", true);
      } else {
         $("#deformitydropdown").removeAttr("disabled");
      }
   });

Answer 2

我会更改当前控件的名称，并为DeformityLevel创建一个隐藏的表单元素。然后根据DropdownList和文本框更改事件在javascript中设置其值。

***像这样（jq未经过验证，只是为了说明）

<select id="DeformityLevel_DDL">
        <option></option>
        <option></option>
        <option></option>
    </select>
    <input type="text" id="DeformityLevel_TB" />
    <input type="hidden" id="DeformityLevel" name="DeformityLevel" />
    <script>
        $(document).ready(function () {
            $('#DeformityLevel_DDL').change(function () {
                if ($(this).val() != 'other') {
                    $('#DeformityLevel').val(this.val());
                }
            });

            $('#DeformityLevel_TB').on('change', function () {
                $('#DeformityLevel').val($(this).val());
            });
        });
    </script>

Answer 3

嗯，您的函数只显示bower update输入，当输入的值发生变化时，您还应该更新模型属性。如果表单在选择更改时自动提交，则应使用preventDefault。

Answer 4

现在尝试使用TextBox，您的htmlAttributes参数不正确。尝试：

<div class="col-md-3 ">

        @Html.DropDownList("DeformityLevel", deformitylevel, "--Select Level -", new { @class = "form-control", @onchange = "showdeformitytextbox()", id = "deformitydropdown" })
        @Html.ValidationMessage("DeformityLevel", "", new { @class = "text-danger" })
    </div>
    <div class="col-md-3">
        @Html.TextBox("DeformityLevel", null, new { @class = "form-control", id = "deformitytextbox", style = "display:none;" })
    </div> 

    <script>
        function showdeformitytextbox() {
            if ($("#deformitydropdown option:selected").text() == 'Other') {
                $("#deformitytextbox").show();

            }
            else {
                $("#deformitytextbox").hide();
            }
        }
    </script>

选择下拉列值会显示一个文本框，但不会存储在其中传递的值

4 个答案: