复选框切换以设置地址字段

Question

我正在使用 asp.net + MVC 并尝试构建一个可以输入设施地址的界面。在某些情况下，该设施可以与它所属的机构具有相同的地址，我使用复选框（EditFor 字段）来指示地址是否与该机构相同。该视图是 Facility 类的强类型，并且该类对机构类具有虚拟属性。我的问题是，当单击复选框时，我希望代码更新地址字段以显示机构地址或清除字段，以便可以输入不同的地址。我有一些用于隐藏/显示地址字段的 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 控件的 text 属性？

Answer 1

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

要在 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 来演示所需的功能，以防万一看到它在实际中有所帮助。