Question

在ma网页上，我有一个带有验证字段的表单。当用户输入不正确的数据并单击“发送”按钮时，视图将翻转回到首页，但看不到表单。然后他必须向下滚动才能查看并输入有效数据。我在控制器中使用此代码：

[HttpPost]
        public ActionResult Index(ContactForm contact)
        {
                return View("Index");
        }

我想在放入不正确的数据之后，用户必须看到表单部分（部分名称为“#contact”），其中包含验证信息（出错）但不存在首页。

Answer 1

客户端

如果您在网页中使用jquery.unobtrusive-ajax.js文件并在您的网络应用中启用了客户端非营补性验证，则会在将表单提交到服务器并在您的网页中显示验证错误消息之前进行客户端验证。在这种情况下，您不需要滚动到相同的部分，因为您的页面没有重新加载。

要启用客户端验证，您应该将以下2个条目添加到您的Web配置的AppSettings部分。

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

并在您的视图/布局中包含jquery.unobtrusive-ajax.js及其依赖项（jQuery）。

服务方

当ModelState.IsValid返回false时，您应该将发布的对象返回到视图。要滚动到此特定部分，您应该做的是，在您的操作方法中设置一些标记，并使用它来确定是否滚动并使用javascript滚动到此位置。我们可以使用本机scrollTop()方法这样做。

[HttpPost]
public ActionResult Index(ContactForm contact)
{
   if(ModelState.IsValid)
   {
      // to do : Save and redirect
   }
   ViewBag.ValidationFailed="Yes"; // flag to handle the client side scroll !
   return View("Index",contact);
}

确保您使用了正确的html帮助程序方法来显示验证错误消息。

@using (Html.BeginForm())
{
   @Html.ValidationSummary(false)
   <div class="form-group" id="contact">
      @Html.TextBoxFor(model => model.Email)
      @Html.ValidationMessageFor(model => model.Email)
   </div>
   <input type="submit"/>
}
@section Scripts
{
  <script>
    $(function(){
       if("@ViewBag.ValidationFailed"==="Yes")
       {
         // get the contact div's top position and use that as the scrollTop value.
         $(window).scrollTop($("#contact").position().top);
       }
    });
  </script>
}

我不是可用性专家，但您可以考虑将@Html.ValidationSummary(false)放在页面顶部，以便即使javascript无法滚动到特定位置，用户也可以看到错误消息页面关联。

返回页面上的相同部分

1 个答案: