How do I use JQuery with MVC 5 to load a View instead of a partial View

Question

I have a process that loops through the same view several times with different data and then eventually goes to a different view at the end of the process. The data is a list that is being sorted so I use jQuery to access the ordering of the list

I use jQuery to update the view by using an embedded partialView

View

<div id="SequenceListPartialView">
  @{Html.RenderPartial("SequenceListPartial", Model);}
</div>

<a id="btn_acceptSequence" class="btn btn-default" >Accept sequence</a> 


@section Scripts {
    @* required for sequencing *@
    @Scripts.Render("~/bundles/jquerysortable")

    <script type="text/javascript">
        $(function() {

            //Sets the list to sortable
            $("#sequencedList").sortable(
            {

            });

            //Event handler for Accept button
            $("#btn_acceptSequence").click(function () {
                var sequenceID_CSV = "";
                $("#sequencedList").children().each(function(i) {
                    var div = $(this);
                    sequenceID_CSV += div.attr("id") + ':' + i + ',';
                });
                $.ajax({
                        url: "@Url.Action("UpdateSequence")",
                        type: "POST",
                        //dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        data: JSON.stringify({ orderedIds: sequenceID_CSV }),
                    })
                    .success(function (result) {
                        $("#SequenceListPartialView").html(result);
                    })
                    .error(function(xhr, status) {
                        alert(status);
                    });
            });
        });
    </script>
}

Server Side The server manipulates the data, creates a new model and sends it back

return PartialView("SequenceListPartial",myModel);

All of this works.

My problem is at the end when the process is complete and I want to return a full View

return View("OverView", MyOtherModel);

Because I call using $.ajax (I think) my new view gets embedded as a partial view in the previous full view.

It would be better for me if I didn't use $.ajax to call a partial view but just called a new view for each list I want to sort but I have tried to do that and got nowhere.

My questions are:

1. Can I "abort" the ajax call in my ActionResult and return a view
2. Can I use a different technique to always call a view instead of an Ajax/Partial view
3. I'm learning MVC so if this is altogether the wrong way to do this I would like to know the correct way

Answer 1

I'm a bit confused by your description, and I think you're actually talking about something else. The only difference between a view and a partial view is that a view renders your layout template, a partial view does not. That's it.

Ajax has no concept of partial vs full view, it only puts the returned HTML wherever you tell it to. So chances are, you are just not telling it to put the HTML in the right place. If you're replacing the entire thing, then you want to replace the html at the root html node.