Question

我有一个MVC视图，其中包含菜单和详细信息部分。在菜单上单击项目时，我希望详细信息部分得到更新。菜单和细节将是PartialViews。

我的主要观点是这样（到目前为止）：

@model WorkflowData.ProjectWorkflow
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

    <div class="form-horizontal">
        <h4>Project Workflow</h4>
        <hr />
        <div>
            @{Html.RenderPartial(
                  "_WorkflowSteps", 
                  Model.ProjectWorkflowSteps.ToList());
            }
        </div>
        <div id="StepDetail"></div>
    </div>

<div>
    @Html.ActionLink("Back to List", "Index")
</div>
@section scripts{
@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
<script>
    $(function () {
        $('.workflow-step').on('click', function (e) {
            $.get($(this).prop('href'), function (response) {
                $('#StepDetail').html(response)
            });
        });
    });
</script>
}

'_WorkflowSteps'局部视图使用以下方式呈现链接：

@Html.ActionLink(
    item.StepName,
    "Step",
    new { id = item.ProjectworkflowPages.FirstOrDefault().ProjectWorkflowPageId },
    new { @class = "workflow-step" });

我对Step的控制器操作是：

    public ActionResult Step(int id)
    {
        if (id == null)
            return RedirectToAction("Index");
        using (var _db = new MarkTestDbEntities())
        {
            var stepPage = (from s in _db.ProjectworkflowPages
                            where s.ProjectWorkflowPageId == id
                            select s).FirstOrDefault();
            var projectModel = new Project
            {
                ProjectWorkflowId = stepPage.ProjectWorkflowStep.ProjectWorkflowId
            };
            return PartialView(string.Format("../{0}/{1}",stepPage.Controller, stepPage.CreateAction)
                , projectModel);
        }
        return View();
    }

现在发生的事情是我看到div被部分视图填充，然后页面只刷新Step的部分视图。调试我看到Step动作实际上被调用了两次，但是当我查看渲染的源时，我不明白为什么。有什么想法吗？

Answer 1

class="workflow-step"的元素是对Step()方法进行GET调用的链接。您正在处理这些元素的.click()事件并进行ajax调用，但您没有取消默认重定向，因此它同时执行这两项操作，$.get()后跟重定向。您需要在脚本

中加入return false;来取消默认操作

$('.workflow-step').on('click', function (e) {
    $.get($(this).prop('href'), function (response) {
        $('#StepDetail').html(response)
    });
    return false; // add this
});

控制器代码被调用两次

1 个答案: