asp.net-mvc - 如何实现以模型属性为条件的部分 View ？

Question

我有像这个例子这样的功能需求:

• The “Citizenship” consists of 3 radio buttons, namely, “South African Citizen”, “Non South African, with work permit” and “Non South African, no work permit”.
• The “Work Permit number” is a free text field, limited to 15 characters and is activated in the event of a “Non South African,
  with work permit” selection in the “Citizen” field

我想为字段编辑器创建某种通用容器，如“工作许可证号”，根据其他模型属性启用或禁用其包含的编辑器，例如本例中的“公民身份”。这很容易实现第一次检索和呈现 View 模型时。

然而，当用户例如改变“公民身份”的值(value)。只有 UI 字段发生了变化，没有模型属性，但是决定是否启用“工作许可证号”的容器依赖于模型属性。

我只看到两个解决方案:

1. 使用客户端(可能是 JavaScript) View 模型，从服务器端 View 模型构建，可能是 Knockout.js 场景。然后绕过正常的表单提交，一次提交整个客户端模型。

2. 当用户更改“Citizenship”值时，使用 ajax 调用更新服务器端模型，并更新所有依赖于“Citizenship”值的 View 部分。这使事情变得复杂，因为我必须有一个“工作”和“ promise ”的模型服务器端。用于保留小更改的工作模型，例如仅保留“公民身份”，然后当用户单击保存时，将所有更改移至“已提交”模型并保留到数据存储中。

对于那些理解我的意思的人，我可以使用什么其他方式来实现这一点，或者我如何改进我上面概述的技术？

Answer 1

我认为这种情况非常适合使用 knockout 的客户端解决方案，正如您在第一个提议的解决方案中提到的那样。 Knockout 使得以声明方式执行此类客户端 UI 操作变得非常容易。用户完成表单后，您只需将客户端 View 模型对象序列化为 JSON 并将其发布到您的服务层。

您提出的第二个解决方案的吸引力要小得多。它的缺点包括:

1. 它需要服务器回传来更新 UI，这是一种不太理想的用户体验
2. 您的服务器域模型现在必须有一个有效且已提交的模型，这增加了复杂性

通过 knockout 和使用 MVVM 模式的客户端 javascript View 模型来实现这一点的代码非常简单:

<div data-bind = "text: name"></div>
<input type="radio" name="citizenship" value="yes" data-bind="checked: citizenship">South African Citizen<br/>
<input type="radio" name="citizenship" value="nowithoutworkpermit" data-bind="checked: citizenship">Non South African, no work permit<br />
<input type="radio" name="citizenship" value="nowithworkpermit" data-bind="checked:     citizenship">Non South African, with work permit<br />
<div id="workpermit" data-bind="visible: citizenship() === 'nowithworkpermit'">
    <input type="text" name="workpermitinumber" />Work Permit number
</div>

<script src="/Scripts/knockout-2.2.0.js" ></script>
<script>
    var MyApp = MyApp || {};
    MyApp.ViewModel = {
        citizenship: ko.observable(""),
        name: ko.observable("John")
    };
    ko.applyBindings(MyApp.ViewModel);
</script>

在这个例子中，我在 MyApp.ViewModel 中创建了一个 View 模型。该模型有两个属性:姓名和公民身份。我已将“citizenship”属性数据绑定(bind)到单选按钮的“checked”属性，以及显示工作许可编号文本框的“visible”属性。

当用户选中单选按钮时，knockout 将更新 View 模型的“citizenship”属性。 View 模型属性中的此更改将依次通过删除“可见”绑定(bind)更新 workpermit div 的可见性 css 属性。当用户准备好提交表单时，您只需将 MyApp.ViewModel 序列化为 JSON 并通过网络发送。

knockout 的文档非常出色 ( see here )，我认为它非常适合您要完成的任务。