0

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
Richard210363
  • 8,342
  • 6
  • 37
  • 63

1 Answers1

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.

Erik Funkenbusch
  • 92,674
  • 28
  • 195
  • 291
  • Thanks. It's 2am here so I'll try it tomorrow. Will replacing the root HTML node remove all the jQuery JS from original view? – Richard210363 Jan 11 '15 at 01:49
  • @Richard210363 - Yes.. although you should probably use the approach outlined here: http://stackoverflow.com/a/4329274/61164 - Frankly, I tend to agree that this is usually a code smell except in certain situations.. chances are you could do this a lot more efficiently by just replacing part of it. – Erik Funkenbusch Jan 11 '15 at 02:17
  • Replacing the HTML root worked, Thanks. I appreciate that this feels a bit wrong. However in this case I am adding to an existing CRUD intranet so don't have the authority to re-factor it to have suitable containers. – Richard210363 Jan 11 '15 at 15:17