How to hook the close [x] event in a module's Edit Modal Dialog?

[SSzretter]

How can I hook into the close button in the upper right of the standard oqtane edit modal dialog? I am using the stock code that has a form tag, save and cancel button but it also has an 'x' in the upper right that close the dialog and redirects to the original root page. I need to to redirect to a different page.

[sbwalker]

@SSzretter the modal dialog you are referring to is not part of a module - it is a container which wraps the module instances in the composable site UI. I am assuming you are using the default Admin Container (Oqtane.Client\Themes\AdminContainer.razor). Currently there is no event raised by clicking the close button in the default Admin Container.

Perhaps a solution would be to create your own custom Admin Container and then specify that it should be used in Site Settings:

Your custom Admin Container could include custom logic when the cancel button is clicked - or it could remove the cancel button completely.

[SSzretter]

Thanks - I did look around but am not sure how to create a custom admin container - I see the admincontainer.razor and that looks like what I want to override, but how do I override that in either my custom theme or in my module?

[sbwalker]

@SSzretter an even simpler method to solve your problem might be to use the "returnurl" querystring parameter. I am not sure how you are loading the modal module but if I assume you are using the default module template approach, then you are using the ActionLink component within your Index.razor to generate a button which a user can click in the UI to display a modal dialog containing an Edit.razor component.

The ActionLink component has a parameter named ReturnUrl.

<ActionLink Action="Edit" Parameters="@($"id=" + context.MyModuleId.ToString())" ResourceKey="Edit" ReturnUrl="@(NavigateUrl("yourpagename"))"  />

The result is that the ActionLink generates a Url which contains a "returnurl=yourpagename" querystring parameter

When the Admin Container is rendered it utilizes the ReturnUrl querystring parameter to determine where it should redirect to when the (X) close button is clicked.

Your Edit.razor component can also use this property via the PageState.ReturnUrl property to get the same Url for its Cancel button.

[SSzretter]

I am looking at this again and still trying to figure out exactly how to get it to work. In my scenario I am using a stock module created using the GUI and in that modules "Edit" page I have added an ActionLink that goes to an "Edit2" page. If the user cancels or clicks the 'x' at the Edit2 page I need it to go back to the edit page and it should return back to the specific item being edited.

So the flow or URL's should look like this:

http://localhost:44357/test -- a page I created with the module and I click the 'Edit' ActionLink
http://localhost:44357/test/*/37/Edit?id=2 -- On this edit form there is an ActionLink to 'Edit2'
http://localhost:44357/test/*/37/Edit2?id=2 -- By default this edit form will return all the way back to /test, I need it to return to /Edit?id=2

The example from the last post suggested using ReturnUrl="@(NavigateUrl("Edit")" - this produces the string: "/Edit" - which is invalid based on the URL patten above.

I tried several other strategies and they all seem to have issues with URL encoding at some point or the ReturnUrl property does not populate in the PageState object. Here are a couple examples of what I tried:

This came close
ReturnUrl="@(NavigateUrl(NavigationManager.Uri.Replace(NavigationManager.BaseUri,"")))"
produced this:
http://localhost:44357/test/*/37/Edit2?id=2&returnurl=%2Ftest%2F*%2F37%2FEdit%253Fid%3D2
and the result of PageState.ReturnUrl is:
http://localhost:44357/test/*/37/Edit%3Fid=2
the problem is that %3F - that causes it to not work so for some reason it didn't fully decode the URL

I also tried leaving off NavigateUrl and ReturnUrl property did not populate:
ReturnUrl="@(NavigationManager.Uri.Replace(NavigationManager.BaseUri,""))"
produced this
http://localhost:44357/test/*/37/Edit2?id=2&returnurl=test%2F*%2F37%2FEdit%3Fid%3D2
PageState.ReturnUrl is blank and PageState.QueryString has a 'returnurl' but its blank.

[sbwalker]

@SSzretter in your original post you mentioned that you "need to to redirect to a different page". The NavigateUrl() method is used to construct a Url to another page within a site. However based on your later posts you are now saying that you need to construct a Url for a different module component which will be displayed on the same page. You should use EditUrl() in this case ie. EditUrl("Edit") will construct a Url for the current page with an action parameter to tell the framework to load the "Edit" component for the module instance. As I mentioned above, since you want to return from Edit2 to Edit then in your Edit component when you specify the ActionLink you should specify the optional ReturnUrl parameter:

<ActionLink Action="Edit2" Text="Edit" Parameters="@($"id={YourPropertyId}")" ReturnUrl="@(EditUrl(PageState.Page.Path, ModuleState.ModuleId, "Edit", $"id={YourPropertyId}"))" />

This will result in a Url which contains a querystring parameter of returnurl=xxx which will be used as the Url when a user closes the edit module dialog. Also you can reference PageState.ReturnUrl in your Edit2 component if you want to redirect the user when they click a Save or Cancel button.

[SSzretter]

Thanks for explaining everything, this worked perfectly.