当modelstate无效时，如何返回页面中的命名锚点？ [英] How to return to a named anchor in page when modelstate is not valid?

问题描述

当modelstate无效时，如何返回页面中的命名锚点？这可能是一个简单的答案，但我似乎找不到答案。

How do you return to a named anchor in page when modelstate is not valid? This is probably a simple answer, but I can't seem to find the answer.

在大多数使用命名锚的解决方案中，MVC控制器的modelstate丢失了，我想要返回到表单在页面上的位置，并保留所有模型属性。下面显示的代码无效。我尝试了十几种不同的场景，但我迷路了。任何帮助，将不胜感激。

In most solutions using a named anchor, the MVC controller modelstate is lost and I want to return to the position of the form on the page with all of the model attributes intact. The code shown below DOES NOT WORK. I've tried a dozen different scenarios and I'm lost. Any help would be appreciated. It's probably something simple.

if (ModelState.IsValid)
{
    ...do something
}
else
{
    return View("MyView#NamedAnchor")
}

推荐答案

我发现了一种解决方法。它可能并不美观，但是可以工作，最重要的是，它保留了流回View的模型属性。它包括三个步骤。

I discovered a workaround. It may not be elegant, but it works and most important it retains the model attributes that flow back into the View. It consists of three steps.

由于我有一个使用大量长页面的表单的网站，因此我可以反复使用它。如果我有两种形式，则可以修改javascript并添加第二个div ID或第三个AND ViewBags来处理每种形式。重要的部分是要记住在控制器中初始化ViewBag.FormOneTop的值，并在视图中包含div。

Since I have a site that uses a lot of forms with long pages, I can reuse this over and over. If I have two forms, then I can just modify the javascript and add a second div ID, or a third AND ViewBags to handle each form. The important part is to remember to initialize the value of ViewBag.FormOneTop in your controller and include the div in your view.

第1步：

在BeginForm（）上方的VIEW中添加一个div。

Add a div to your VIEW above your BeginForm(). Name the id whatever you want.

<div id="FormOne"></div>
@using (Html.BeginForm())

步骤2：

在SHARED LAYOUT页面的JQuery链接下方添加以下javascript，通常是_Layout.cshtml或类似的名称。将FormOne的名称更改为您命名的div。我使用了-75的偏移量，因为顶部有一个响应式导航栏，您可能不需要偏移量。

Add the following javascript below your JQuery link on your SHARED LAYOUT page, usually _Layout.cshtml or something like that. Change the name of FormOne to whatever you named the div. I used an offset of -75 because I have a responsive navbar at the top, you may not need an offset.

<script>
    $(document).ready(function ()
    {
        var FormOneTop = '@ViewBag.FormOneTop';
        if (FormOneTop== 'True')
        {
            $('html, body').animate(
            {
            scrollTop: $("#FormOne").offset().top -75
            }, 1000);

        }
    });
</script>

步骤3：

将代码添加到CONTROLLER中设置ViewBag.FormOneTop值的操作。当加载没有表单发布的索引页面时，我将其设置为 False，并且页面转到顶部。如果我只是发布了表单操作，那么如果ModelState.IsValid失败，则会将ViewBag.FormOneTop设置为 True。

Add code to the actions in your CONTROLLER that set the value of ViewBag.FormOneTop. I set it to "False" when loading the Index page without a form post and the page goes to the top. If I just "posted" the form action, I set the ViewBag.FormOneTop "True" if ModelState.IsValid fails.

    public ActionResult Index()
    {
        ViewBag.FormOneTop= "False";
        return View();
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Index([Bind(Include = "id,first_name,last_name,email")] MyTable MyTable)
    {

        if (ModelState.IsValid)
        {

            ViewBag.FormOneTop= "False";
            return View();
        }
        else
        {
            ViewBag.FormOneTop= "True";
            return View();
        }

    }

这篇关于当modelstate无效时，如何返回页面中的命名锚点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！