November Happy Hour will be moved to Thursday December 5th.

Refreshing page in edit mode after ajax call to controller

Vote:
 

Let's say I have a property on the page:

[Display(
    Name = "Selection Box",
    GroupName = Global.GroupNames.Contact
)]
public virtual bool SelectionBox { get; set; }

An then in the view, I have this code:

@if (PageEditing.PageIsInEditMode)
{

    @Html.CheckBoxFor(modelItem => Model.CurrentPage.SelectionBox,
        new
        {
            @class = "toggle",
            @data_url = Url.Action("UpdatePage", "DefaultPage"),
        })


    <script>
        $(function () {
            $('.toggle').change(function () {
                var self = $(this);
                var url = self.data('url');
                var value = self.prop('checked');

                $.ajax({
                    url: url,
                    data: { selected: value },
                    type: 'POST',
                    success: function (response) {
                        alert(response);
                    }
                });
            });
        });
    </script>
}

Controller method is very simple:

public ViewResult UpdatePage(ProductPage currentPage, bool selected)
        {
            var currentPageEdit = _contentRepository
                .Get<ProductPage>(currentPage.ContentLink)
                .CreateWritableClone() as ProductPage;

            if (currentPageEdit != null)
            {
                currentPageEdit.SelectionBox = selected;
                _contentRepository.Save(currentPageEdit, SaveAction.Default, AccessLevel.NoAccess);
            }
            
            var model = CreateModel(currentPageEdit);


            return View(string.Format("~/Views/{0}/Index.cshtml", currentPage.GetOriginalType().Name), model);
        }

Basically what it does, it takes the value of the checkbox, does a AJAX call to the controller, which then updates the page property with value. And this works fine. What I'm struggling with, is how to refresh the page in preview after the succesful save in the controller. 

I have tried subscribing to contentSaved event, but it's not called. 

Essentially I'm looking for a way to either:

  1. notify the UI from the controller that update happened and it should reload
  2. notify the UI from the javascript that the update to property/page happened and it needs to refresh

In my use case, editor will be pointing to a collection (coming from external system), and it will render list of items in that collection. Then user would be able to pick which items from that collection to show or hide. I'd like to maintain the list of exclusions as a property, which I anticipate I could update via AJAX calls.

If there are better options - I'm open for those as well.

#221385
Apr 17, 2020 7:59
Vote:
 

Jerzy, 

Do you want to refresh the preview mode or are you inside the On-Page Edit?

Bartek

#221757
Apr 24, 2020 8:32
Vote:
 

I'd like to refresh from the On-Page edit.

#222215
Apr 30, 2020 12:51
Vote:
 

Could you just have a basic service do the page update and just return what it changed and handle it with javascript on the success post?

Rather than posting back the view model, it just returns a really simple json object, myobject {selectedItem:"product1", domID="p1"} then you do your logic client side in the success response. To the user it will look like the page refreshed in the interim.

#222535
May 07, 2020 1:08
Vote:
 

Btw. why don't you use our helper

@Html.PropertyFor(modelItem => Model.CurrentPage.SelectionBox)

You don't need to do stuff like you wrote, saving property values is done by EPiServer.

An exact example is written here: https://world.episerver.com/documentation/developer-guides/CMS/Content/Edit-hints-in-MVC/

Look for 'ShowBanner' property

#222668
Edited, May 10, 2020 20:19
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.