Lost All Layout After MVC Form Postback to Controller Rendering

Question

I need to develop a controller rendering to do a simple search functionality. The UI has a search box and a search button, after postback, I will have some logic to get the result and show back to user plus provide one or two facets that user can click to filter the results.

I followed this link and I was able to get the form rendered, and the search text can be posted back to the controller [HttpPost] method. inside the post method, I return the same view model with search results back to the same view, I was able to display the search results but the page layout is gone. The rendered html has no head and any other elements except the html rendered from the view.

Can someone kindly point me how to resolve this issue?

Answer 1

Search can be implemented with ajax call without causing redirection to the another page. here you can find the example code -

<script>
    // Function to make the AJAX call and handle response
    function fetchData(query) {
        // Create a new XMLHttpRequest object
        const xhr = new XMLHttpRequest();

        // Configure the request
        xhr.open('GET', 'https://api.example.com/data?q='+query, true);

        // Set up a callback function to handle the response
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    // Request was successful, parse response
                    const data = JSON.parse(xhr.responseText);
                    displayData(data);
                } else {
                    // Request failed
                    console.error('Request failed. Status:', xhr.status);
                }
            }
        };

        // Send the request
        xhr.send();
    }

    // Function to display data on the webpage
    function displayData(data) {
        const resultDiv = document.getElementById('result');

        // Clear previous results
        resultDiv.innerHTML = '';

        // Create HTML to display fetched data
        const dataList = data.results; // Assuming 'results' is an array in the JSON response
        dataList.forEach(item => {
            const itemDiv = document.createElement('div');
            itemDiv.textContent = item.name; // Assuming 'name' is a property of each item
            resultDiv.appendChild(itemDiv);
        });
    }
</script>

for this code to work, you just need to write one API endpoint in your backend solution which will return the search result on API call. fetchData can be called onclick of seach button, and displayData function will display the results on the page.

Answer 2

I have implemented this functionality before. To achieve this functionality I have used Vue.js. You can choose whatever Javascript framework you want to use. The benefit of using Vue.js or any other Javascript framework is that it will not reload the page and there will be two-way binding.

In Vue.js you can call Ajax API and based on the search results you can bind HTML. You can use Axios HTTP client library.

More detail you can find here https://vuejsdevelopers.com/2017/08/28/vue-js-ajax-recipes/

Answer 3

Looking at the post you have linked too, I believe it describes the behaviour in which you are experiencing.

This will not work if you are using Sitecore’s form handler (@Html.FormHandler("ControllerName", "ActionName")); using return View will interrupt Sitecore’s page load and return that view only.

That article suggests two solutions:

1. Redirect to another Sitecore Page at the end of the controller action
2. Post to the same page (using an empty, standard @Html.BeginForm()), then return View() in the controller action.

As other (and indeed that article) mentions, the cleaner approach is to make an AJAX call to a custom route and avoid leaving the page.