在 Razor Partial Html BeginForm 中停止页面移动

Question

寻找与web表单中的updatepanel类似的解决方案效果，但是对于MVC，下面是关于我的问题的一些特别说明。我确信有很多方法可以做到这一点，但理想情况下，我想要最好和最合适的方法。

我查看了this question，但无法让它工作。

更新： 它可以回发； MVC 等价物。我只需要为用户的视角维护页面的位置。

我已经在我的索引页面底部尝试了以下内容，但没有骰子。

@section Scripts
{
<script type="text/javascript">
    window.scrollTo = function( x,y ) {
     return true;
    }
</script>
}

还有： 控制器

ViewBag.JumpTo = "equipmentAnchor";
            return RedirectToAction("Index");

索引

<div id="equipmentAnchor"></div>
@section Scripts
{
<script type="text/javascript">
    $(document).ready(function () {
        var JumpTo = '@ViewBag.JumpTo';
        if (JumpTo != "") {
            $(this).scrollTop($('#' + JumpTo).position().top);
        }
    });
</script>
}

实现这一目标的最佳/最简单方法是什么？

我看到过报告说 AJAX 在服务器上很重，但并没有过分关注，最好没有 CSS 技巧（如果有的话）。 JQuery 不是我太熟悉的东西，但可能是最好的解决方案，但不是特别精通，所以不知道从哪里开始。

在下面的示例中是一个带有删除按钮的列表视图，该按钮返回到控制器以遍历列表并删除列表中的最后一个条目。但是无论是添加还是删除，回发后页面都会跳转到索引页面的顶部。

我应该/我应该如何停止发回并重新加载页面，或者至少阻止用户体验它？

示例代码：

索引：

<div class="List">
                    @{Html.RenderPartial("View", Model.List);}
                </div>

部分

@using (Html.BeginForm("RemoveExisting", "PA_4"))
{
    if (Model != null)
    {
        foreach (var ri in Model)
        {
            <div class="ui-grid-c ui-responsive">
                <div class="ui-block-a">
                    <p>One</p>
                    <span>
                        @ri.One
                    </span>
                </div>
                <div class="ui-block-b">
                    <p>Two</p>
                    <span>
                        @ri.Two
                    </span>
                </div>
            </div>
        }
    }
    if (Model.Count() > 0)
    {
        <div>
            <input type="submit" value="Remove"/>
        </div>
    }
}

Answer 1

有这个问题这个答案here帮助了我。

从 GitHub 下载并将其转储到您的脚本文件夹中并在 @section Scripts 中引用它

就像在你的视图底部一样：

@section Scripts
{
<script type="text/javascript" src="~/Scripts/maintainscroll.jquery.min.js">

</script>
}

Answer 2

使用 ajax 形式...你当然需要 jquery.unobtrusive-ajax.js 才能使用它和 jquery。 （使用 nuget）。

要使用它，您需要像 Html.BeginForm 一样定义它，但您需要定义一个 id（最好是 div ），其中将写入响应 html。所以页面永远不会重新加载，但 ajax 将响应 HTML 插入到带有 targetId 的元素中（在 dom 中）。 这样做的先决条件是动作的返回是局部视图。否则整个页面将呈现在这个 div 中。

例子：

查看：

    @using (Ajax.BeginForm("RemoveExisting", new AjaxOptions() {
        HttpMethod = "POST",
        OnBegin = "OptionalJSFunction",
        OnFailure = "OptionalJSFunction",
        OnSuccess = "OptionalJSFunction",
        UpdateTargetId = "targetId"
    }))
    { 
         //Your form goes in here..
    } 

<div id="targetId">
</div>

控制器：

    [HttpPost]
    public ActionResult RemoveExisting(YourModel model)
    {
       //your code in here
       return PartialView("YourView",model);
    }