javascript - 用于设置地址字段的复选框切换

Question

我正在使用 asp.net + MVC 并尝试构建一个可以输入设施地址的界面。在某些情况下，设施可以与其所属机构具有相同的地址，我使用复选框(EditFor 字段)来指示该地址是否与机构相同。该 View 对 Facility 类进行强类型化，并且该类对Institution 类具有虚拟属性。我的问题是，当单击复选框时，我希望代码更新地址字段以显示机构的地址或清除字段，以便可以输入不同的地址。我有一些 javascript 用来隐藏/显示地址字段，但这并不是我真正想要的。如何收集模型数据(即机构和设施)并将其放置在 EditFor 字段中？

复选框字段

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

JavaScript

$("#AddressSameAsInstitute").click(function () {
        $(".set-from-checkbox").toggle(!this.checked);
    });

更新如下所述，我相信我可以使用 @Model.Institution...但我不确定使用什么 javascript 代码来设置 EditFor 控件的文本属性？

Answer 1

首先要注意一点:ASP.NET 提供的任何“控件”都会转换为浏览器可以理解的 HTML 元素。 EditorFor例如，control 转换为 <input type='text' />在多数情况下。为了在 javascript 中与这些元素进行交互，您需要知道您在 HTML 文档中处理的是哪些类型的控件，而从 .NET Angular 来看则不需要那么多。

要在 JavaScript 中将文本/值从一个元素复制到另一个元素，您需要知道 id在源和目标元素上(或者 class 如果它特定于每个元素)。使用 JQuery，代码将如下所示:

$('#chkCopyAddress').change(function () {
        if (this.checked) {
            $('#instAddress').val($('#facAddress').val());
            $('#instCity').val($('#facCity').val());
            $('#instState').val($('#facState').val());
        } else {
            $('#instAddress').val('');
            $('#instCity').val('');
            $('#instState').val('');
        }
    });

所以我建议输入 id在您使用 ASP.NET 创建的元素上。使用 EditorFor 时似乎有重复 ID 的空间控制(这违背了 ID 的目的)，因为它似乎将模型的属性名称用作 id如 this MSDN atricle 中所述.

我还整理了一些fiddle演示所需的功能，以防看到实际效果有所帮助。