Question

我正在开发一个asp.net mvc-5网络应用程序，我在联系我们视图的中间联系我们： -

 <div class="col-sm-8 col-sm-push-4">
                    <h2>Contact Us1</h2>
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    @if (TempData["message"] != null)
                    {

                        <div class="alert alert-success">
                            <a href="#" class="close" data-dismiss="alert">&times;</a>

                            <strong> @TempData["message"].</strong>

                        </div>
                    }
                    @using (Html.BeginForm())
                    {
                        @Html.AntiForgeryToken()

                        <div class="form-horizontal">

                            <hr />

                            <div class="form-group">
                                @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) <span style="color:red">*</span>
                                    @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.Telephone, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.Telephone, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.Telephone, "", new { @class = "text-danger" })
                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.Message, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.TextAreaFor(model => model.Message, new { @cols = 60, rows = 10, @class = "form-control" })
                                    @Html.ValidationMessageFor(model => model.Message, "", new { @class = "text-danger" })
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-10">
                                    <input type="submit" value="Submit" class="btn btn-success" /><span id="progress" class="text-center" style="display: none;">
                                        <img src="~/img/ajax-loader.gif" />

                                    </span>
                                </div>
                            </div>
                        </div>
                    }
                </div>

这里是Get和Post动作方法： -

 public ActionResult Contact()
        {
            ViewBag.Title = "Contact";
            ViewBag.Description = "Home";

            return View();
        }
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Contact(Contact c)
{

    if (ModelState.IsValid)
    {
        MailMessage mail = new MailMessage();
        //code goes here
        TempData["message"] = string.Format("Your Feedback has been submitted. Thanks");
        return RedirectToAction("Contact");
    }
    ModelState.AddModelError("", "Cannot submit you Contact Form, please review the Contact Form for any missing info.");
    return View(c);

}

现在我面临这个问题： - 1.由于联系我们表单出现在页面中间，因此小尺寸屏幕上的用户可能会提交表单，然后发布请求失败（模型验证失败），其中联系我们表单将再次呈现验证显示错误，但用户可能看不到表单，因为默认情况下浏览器将移至顶部。在大屏幕上，用户仍然可以看到表单，但在移动浏览器上，用户可能会错过他们刚刚提交的表单上的错误。

所以我在想是否有办法做到这一点： -

如果表单呈现有错误，强制浏览器（使用jquery表单示例）转到表单，以便用户可以看到验证错误？有人可以请这个吗？

Answer 1

首先，您@Html.ValidationSummary()代码应位于表单标记内，以使其正常工作。

您可以使用javascript滚动到视图中的表单。将表单（或要滚动到的位置附近的元素）赋予id属性

@using (Html.BeginForm("Contact", "yourControllerName", FormMethod.Post, new { id = "form" }))

然后添加以下脚本（在document.ready中）

if ('@ViewBag.HasError') {
    location.href = '#form'; // or location.hash = '#form';
}

并修改POST方法，以便在出现错误时添加ViewBag属性

ModelState.AddModelError("", "Cannot ..... info.");
ViewBag.HasError = true; // add this
return View(c)

附注：未经测试，但您也应该能够使用

if ('@ViewContext.ViewData.ModelState.Values.SelectMany(v => v.Errors).Any()') {

作为使用ViewBag属性的替代方法。

Answer 2

将@Html.ValidationSummary(false, "", new { @class = "text-danger" })放在页面顶部。将true更改为false以显示所有属性级错误。

我如何专注于有验证错误的退货表格

2 个答案: