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)

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

1 个答案: