如果验证通过，C# MVC 5 视图应该只显示模式

Question

我正在开发一个使用 Bootstrap 的 C# MVC 5 应用程序。我有一个视图，用户可以在其中填写一些输入框并使用按钮确认输入。这是非常直接的东西。 无论如何，根据用户交互是编辑还是添加，我会显示一个模式，询问他们是否愿意继续到依赖于他们所在页面的数据的下一个页面。

即 如果是编辑，请确认按钮帖子并将用户发送回上一页。 如果是添加，确认按钮会显示模态对话框，询问他们是否要继续添加其他内容，将用户引导到另一个页面或将它们发送到上一页。

我有以下：

<button type="button" id="button_submit" class="btn btn-success" data-toggle="modal" data-target="#questionModal" data-property-one="@Model.Property1" data-property-two="@Model.Property2">
    <i class="glyphicon glyphicon-ok" aria-hidden="true"></i>
    Accept
  </button> 

使用下面的jquery

$('#questionModal').on('show.bs.modal', function(event) {
      var button = $(event.relatedTarget);
      var modal = $(this);

      // Extract info from data-* attributes
      var modelProperty1 = button.data('property-one');
      var modelProperty2 = button.data('property-two');

      // Update the modal's content.
      modal.find('#something').val(modelProperty1);
      modal.find('#somethingElse').val(modelProperty2);
    });

如果必填字段为空，我不希望显示问题模式。 我对所有必需的输入字段都进行了验证，并且在发回服务器后会显示一个很好的警告。我需要的是能够做一些穷人的客户端验证，如果未填写必填字段，则回发到服务器，ModelState 将无效，它只会返回相同的视图并显示错误消息和不显示此问题模式。

类似

@if (@Model.Property1 != null && @Model.Property2 != null)
{
  <button type="button" id="button_submit" class="btn btn-success" data-toggle="modal" data-target="#questionModal" data-property-one="@Model.Property1 " data-property-two=@Model.Property2">
    <i class="glyphicon glyphicon-ok" aria-hidden="true"></i>
    Accept
  </button> 
}
else @*post back to controller, reconstruct view, and show errors*@
{
  <button type="submit" class="btn btn-success">
    <i class="glyphicon glyphicon-ok" aria-hidden="true"></i>
    Accept
  </button>
}

或者也许在按钮点击时转到 JavaScript 函数并执行类似的操作：

function stuff()
{
  var modelProperty1 = //get @Model.Property1 as it is on client somehow
  var modelProperty1 = //get @Model.Property2 as it is on client somehow

  if (!modelProperty1 || !modelProperty2)//if validation fails
  {
    $("form").submit();//post and refresh showing errors
  }
  else
  {
    //set modal properties
    var modal = $('#questionModal');
    modal.find('#something').val(modelProperty1);
    modal.find('#somethingElse').val(modelProperty2);
    //show modal
    modal.modal('show');
  }
}

但我不确定如何获取输入字段的当前值，因为它们是客户端。 例如。 var modelProperty1 = @Html.Raw(Json.Encode(@Model.Property1));即使用户在其输入框中输入了某些内容，也为 null...

我不是很有经验，但我正在学习，所以我希望我不会因为这些问题而显得愚蠢。

非常感谢您的帮助:)

Answer 1

您可以扮演自己的 JS 验证角色或使用库（几乎总是推荐），例如 http://formvalidation.io。

您无法直接获取 @Model.Property 的值，因为那是服务器端。您需要从客户端页面上的元素中获取它们。您可以像在模型上一样使用 jQuery val()：http://api.jquery.com/val/

类似：

var modelProperty1 = $("#Property1").val();

不确定我是否遗漏了什么。如果您在某处没有 Property1 作为表单元素，则可以使用

将其写入隐藏字段

@Html.HiddenFor(m => m.Property1)