CODEWITHSUNDEEP
asp.net-mvc
M Kenyon II
M Kenyon II

Reputation: 4274

Controller code gets called twice

I have an MVC view which will have menu and detail sections. As items are clicked on the menu, I would like the detail section to get updated. The menu and detail would be PartialViews.

My main view is layed out like this (so far):

@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>
}

The '_WorkflowSteps' partial view renders links using this:

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

My controller action for Step is:

    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();
    }

What is happening now is I see the div get populated with the partial view, then the page refreshes with just the partial view from Step. Debugging I see that the Step action is actually called twice, but when I look at the rendered source, I don't see why. Any thoughts?

Upvotes: 1

Views: 667

Answers (1)

user3559349
user3559349

Reputation:

Your elements with class="workflow-step" are links which make a GET call to your Step() method. You are handling the .click() event of those elements and making a ajax call, but your not cancelling the default redirect so its doing both, the $.get() followed by the redirect. You need to cancel the default action by including return false; in the script

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

Upvotes: 3

Related Questions