Question

您好我想在mvc5中进行show和hide div的更新操作。我将用例子解释我的问题。

这是我的看法。在此视图中，我有一个名为 VisitType 的字段。如果我将访问类型视为 DirectVisit ，则 StartTime 和 EndTime 字段将显示（可见），否则将显示为隐藏模式。

我的模型（Visistors查看模式）

    public bool VisitType { get; set; } 
    public string StartTime { get; set; }
    public string EndTime { get; set; }

我的观点

  <div class="col-sm-4" id="VisitType">
  <div class="form-group">
  <span style="color: #f00">*</span>
  @Html.Label("Visit Type", new { @class = "control-label" })
  <label>
  @Html.RadioButtonFor(model => model.VisitType, "true", new { id = "" }) Telephone
  </label>
  <label>
  @Html.RadioButtonFor(model => model.VisitType, "false", new { id = "" }) Direct Visit
  </label>
       </div>
     </div>

<div id="StartTime">
<div class="col-sm-3">
<div class="foem-group">

@Html.Label("Start Time", new { @class = "control-label" })
@Html.TextBoxFor(model => model.StartTime, new { @class = "form-control ", type = "text" })
@Html.ValidationMessageFor(model => model.StartTime)
       </div>
      </div>

<div class="col-sm-3">
<div class="form-group">
@Html.Label("End Time", new { @class = "control-label" })
@Html.TextBoxFor(model => model.EndTime, new { @class = "form-control ", type = "text" })
@Html.ValidationMessageFor(model => model.EndTime)

        </div>
    </div>
  </div>

我的Jquery代码

  $(document).ready(function () {
            $('#StartTime').hide();
            $('#VisitType input[type="radio"]').change(function () {

                if ($(this).val() === 'false') {
                    $('#StartTime').show();
                }
                else {
                    $('#StartTime').hide();
                }
            });
        });

现在我想要的是如果我在我的应用程序中选择一个条目，选择VisitType作为直接访问并输入StartTime和EndTime并保存它。现在我想将VisitType更改为电话。所以我单击编辑按钮，一旦打开视图，它必须将值传递给访问类型单选按钮，还有开始时间和结束时间时间也需要与值可见。

我在编辑模式下将值传递给单选按钮。但我不想在编辑模式下看到StartTime和EndTime。我不知道确切的j-query代码。这是问题所在。请任何人帮我解决这个问题。

我尝试的代码

Contrroller Code

    public ActionResult Edit(Guid ?id)
    {
        WafeERP_NEWEntities db = new WafeERP_NEWEntities();
        VisitorsViewModel objvisitorsviewmodel = new VisitorsViewModel();
        View_VisitorsForm objviewvisitorsForm = db.View_VisitorsForm.Find(id);
        if (objviewvisitorsForm.VisitType== true)
        {
            objvisitorsviewmodel.VisitType= true;
        }
        else
        {
            objvisitorsviewmodel.VisitType= false;
        }
        ViewBag.EmployeeID = new SelectList(db.Employees, "EmployeeID", "DisplayName", objviewvisitorsForm.EmployeeID);
        ViewBag.CustomerID = new SelectList(db.Customers, "CustomerID", "DisplayName", objviewvisitorsForm.CustomerID);

        objvisitorsviewmodel.VisitingID = objviewvisitorsForm.VisitingID;
        objvisitorsviewmodel.Date = objviewvisitorsForm.VisitingDate;
        objvisitorsviewmodel.VisitType= objvisitorsviewmodel.VisitType;
        return View(objvisitorsviewmodel);
    }

此代码传递从db获取值并将其正确传递给单选按钮但现在我想通过单击编辑按钮在视图打开后显示带有值的starttime和endtime字段。我尽力解释这个问题，请任何人帮我解决这个问题。

提前谢谢..

Answer 1

首先应将元素包装在<div>中，以便您可以显示和隐藏它们，而不必选择所有关联的标签，文本框和验证消息占位符

<div id="date-controls">
    @Html.LabelFor(m => m.StartTime)
    @Html.TextBoxFor(m => m.STartTime)
    ....
</div>

并使用css最初隐藏它们

#date-controls {
    display:none;
}

然后，如果VisitType的值为true，则最初显示它们，添加以下脚本

var isVisit = '@Model.ContactMethod';
var dateControls = $('#date-controls');

if (isVisit == 'True') {
    dateControls.show();
}

并修改处理单选按钮的脚本

$('#VisitType input[type="radio"]').change(function () {
    var selected = $('#VisitType input[type="radio"]:checked').val();
    if (selected == 'true') {
        dateControls.show();
    } else {
        dateControls.hide();
    }
});

旁注：您的VisitType媒体资源不应为bool。 bool只能用于答案只能是“是”或“否”的属性，联系我们的方法的答案不是“是”或“否”，“电话”或“是”参加会议等。通过使用bool，这也意味着您将来无法灵活地添加其他类型（您的客户可能希望为无行为能力的人提供家访，或者选择视频会议）。相反，您的属性应该是一个集合或enum。

如何在mvc5中显示和隐藏div的更新操作？

1 个答案: