我想禁用或隐藏一个或两个文本框基于下拉列表选择从我的视图页面

本文关键字：选择 下拉列表 我的 视图 隐藏 两个 一个 文本 | 更新日期: 2023-09-27 18:09:16

我想根据下拉列表中的选择禁用或隐藏可编辑的文本框。我有一个包含状态的Delivery视图页面，我已经将其硬编码到模型中，并且我还有单独的文本框，允许我为每个状态选择日期和时间。所有这些当前都显示在表单上。

基于状态，可以是"分派"，"接收"，"延迟"，我想禁用或隐藏(无论哪个选项是实用的)对应的日期和时间的其他状态的文本框。因此，例如，如果我选择"分派"，我想禁用或隐藏delayed_date和delayed_time以及received_date和received_time文本框。这样用户就可以专注于与他们所选择的状态相关的文本框。

我该怎么做呢?我对此做了一些研究，但我不知道如何将其应用于我的情况。我是相当新的MVC，所以我正在寻找一个简单的易于理解的方法来做到这一点。有替代使用jQuery或Javascript的方法吗?提前感谢!

交付模型:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
namespace HealthHabitat.Models
{
    public enum Status
    {
        Delivered, Delayed, Dispatched
    }
    public class Delivery
    {
        public int DeliveryID { get; set; }
        [Display(Name = "Driver")]
        public string DriverID { get; set; }
        public Status Status { get; set; }
        [DisplayFormat(ConvertEmptyStringToNull = false)]
        public string Comment { get; set; }
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
        [Display(Name = "Date Dispatched")]
        public DateTime Dispatched_Date { get; set; }
        [DataType(DataType.Time)]
        [DisplayFormat(DataFormatString = "{0:HH:mm}", ApplyFormatInEditMode = true)]
        [Display(Name = "Time Dispatched")]
        public DateTime Dispatched_Time { get; set; }
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
        [Display(Name = "Date Received")]
        public DateTime? Received_Date { get; set; }
        [DataType(DataType.Time)]
        [DisplayFormat(DataFormatString = "{0:HH:mm}", ApplyFormatInEditMode = true)]
        [Display(Name = "Time Received")]
        public DateTime? Received_Time { get; set; }
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
        [Display(Name = "Date Delayed")]
        public DateTime? Delayed_Date { get; set; }
        [DataType(DataType.Time)]
        [DisplayFormat(DataFormatString = "{0:HH:mm}", ApplyFormatInEditMode = true)]
        [Display(Name = "Time Delayed")]
        public DateTime? Delayed_Time { get; set; }

        public virtual Driver Driver { get; set; }
        public virtual ICollection<Order> Orders { get; set; }
    }
}

创建交付视图:

@model HealthHabitat.Models.Delivery
@{
    ViewBag.Title = "Create";
}

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <h4>Delivery</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.DriverID, "DriverID", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("DriverID", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.DriverID, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Status, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EnumDropDownListFor(model => model.Status, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Status, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Dispatched_Date, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Dispatched_Date, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Dispatched_Date, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Dispatched_Time, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Dispatched_Time, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Dispatched_Time, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Received_Date, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Received_Date, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Received_Date, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Received_Time, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Received_Time, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Received_Time, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Delayed_Date, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Delayed_Date, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Delayed_Date, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Delayed_Time, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Delayed_Time, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Delayed_Time, "", new { @class = "text-danger" })
            </div>
        </div>
                <div class="form-group">
            @Html.LabelFor(model => model.Comment, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Comment, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Comment, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-success" />
            </div>
        </div>
    </div>
}
<div>
    <a href="~/Delivery/Index" class="btn btn-primary">Back</a>
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

我想禁用或隐藏一个或两个文本框基于下拉列表选择从我的视图页面

由于(我认为)下拉菜单可以在不发布表单的情况下更改，因此JavaScript解决方案将是最好的。jQuery应该会让这个变得很简单:

首先，正如@mahlatse所建议的，向所有与枚举值匹配的form-groupdiv添加data-attribute。另外，添加一些自定义类名，如section:

<div class="form-group section" data-attribute="1">
    @Html.LabelFor(model => model.Dispatched_Date, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Dispatched_Date, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.Dispatched_Date, "", new { @class = "text-danger" })
    </div>
</div>
<div class="form-group section" data-attribute="1">
    @Html.LabelFor(model => model.Dispatched_Time, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Dispatched_Time, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.Dispatched_Time, "", new { @class = "text-danger" })
    </div>
</div>

…等等......这将确保我们可以准确地显示和隐藏每组div容易。section类将确保我们稍后也可以将所有这些div作为一个组来引用。接下来，找到下拉列表的HTML ID(或为其指定一个)，并连接一个jQuery事件处理程序:

$(document).ready(function() {
    $('#dropdown-id-here').change(function(data) {
        var selected = data.target.value;
        switchUi(selected);
    });
)};

.change()是jQuery将代码附加到控件的更改事件的方式。CSS选择器#dropdown-id-here是它知道将代码附加到哪个控件的方式。data.target.value为所选下拉选项的字符串value。

下一个辅助函数:

function switchUi(selection) {
    $('div.section').filter('[data-attribute="' + selection + '"]').show();
    $('div.section').not('[data-attribute="' + selection + '"]').hide();
}

第一行选择页面上具有section类的所有div，然后只查找具有data-attribute=<selected option value>的div。.show()确保这些div可见。第二行只是颠倒了这个逻辑，隐藏了所有没有当前选择选项作为data-attribute的div。

我们还希望它在页面加载时触发此功能，因此无论下拉菜单的初始选择是什么，都会立即反映在页面上。添加另一行到$(document).ready:

$(document).ready(function() {
    ...
    switchUi($('#dropdown-id-here').val());
});

下面是一个简单的例子:http://jsfiddle.net/9f6nqcvt/3/

进一步思考:

  • 你需要控制MVC分配给下拉控件的HTML id的值。
  • 确保你没有完全依赖文本框被隐藏;包括一些简单的服务器端验证，以确保用户不会输入错误的数据。
相关文章：