Postback Does Not Return Full Page Layout

Question

Sitecore Version: 8.2 (rev 170614)

Glass.Mapper Version: 4.4.0.199

.NET Framework Version: 4.6

I have a Controller Rendering that represents "Redemption" form on my site that can be added as a component to a page. This Redemption rendering, of course, has a Datasource Template that represents that component. The action method is called "RedemptionForm" and it has a GET method for when the page first loads and a POST method when you hit submit. The GET method accepts two optional parameters that determine how the form will display depending upon what parameter is passed in (if any). The POST method accepts the model that is submitted when the user clicks "Submit".

The cshtml behind the rendering looks like this (i've stripped out the html to conserve space):

@using (Html.BeginRouteForm(Sitecore.Mvc.Configuration.MvcSettings.SitecoreRouteName, new { rid = this.Model.RedemptionId }, FormMethod.Post, new { @class = "redemption__form", enctype = "multipart/form-data" }))
{
    @Html.Sitecore().FormHandler("Redemptions", "RedemptionForm")

    [rest of html...]
}

The GET method looks like this:

public ActionResult RedemptionForm(string rid = "", string vid = "")
{
    var webModel = new RedemptionWebModel();

    if (string.IsNullOrWhiteSpace(vid))
    {
        // Do Stuff...
    }
    else
    {
        // Do Other Stuff...
    }

    return View(webModel);
}

The POST method looks like this:

[HttpPost]
public ActionResult RedemptionForm(string rid, RedemptionSubmissionModel model)
{
    var webModel = new RedemptionWebModel();

    webModel.SubmissionModel = model;

    if (ModelState.IsValid)
    {
        // Do Stuff...

        webModel.IsSubmitted = true;
    }

    return View(webModel);
}

Here is the generated form html:

    <form action="/MyRedemptions?rid=48d4d95c417b42559af1178f17b64853" class="redemption__form" enctype="multipart/form-data" method="post" _lpchecked="1">
        <input id="scController" name="scController" type="hidden" value="Redemptions" class="has-text">
        <input id="scAction" name="scAction" type="hidden" value="RedemptionForm" class="has-text">

        [rest of form inputs...]

    </form>

NOTE: "MyRedemptions" is the actual page in my Sitecore tree: content --> MySite --> Home --> MyRedemptions. This page is a standard page with a header, menu and footer as part of it's standard values presentation details. Normal stuff.

Here is the FULL source when the page initially loads (includes the generated 'form' html):

<!doctype html>
<!--[if IE 9]><html lang="en" class="ie9 no-js"><![endif]-->
<!--[if !IE]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="/styles/Foundation/Theming/MyCompany/vendor/vendor.css?7b3042e6e9" />
    <link rel="stylesheet" href="/styles/Foundation/Theming/MyCompany/app/main.css?0404d259f5" />
    <link rel="stylesheet" href="/styles/Feature/Navigation/PrimaryMenu.css?a44fb1d2cf" />
    <link rel="stylesheet" href="/styles/Feature/Navigation/FooterMenu.css?f344ffb4fe" />
</head>
<body class="">

    <header class="header">
        <div class="container">
            <div class="header__identity">
                <a class="header__logo" href="/">
                    <img src="/-/media/Feature/Identity/logo-MyCompany.ashx?h=94&amp;w=173&amp;la=en&amp;hash=C65D86CBA66FA0237A2C1792523046209874E1FF" alt="" />        <h5></h5>
                </a>
            </div>
            <div class="header__nav">

            </div>
            <div class="header__utility">

            </div>
            <div class="header__identity">

            </div>
        </div>
    </header>

    <main role="main">
        <div>
            Redemptions
            <img src="/-/media/Banners/banner-interior-generic.ashx?h=110&amp;la=en&amp;w=1500&amp;hash=3CCA268158E633D532CCDE037CC7B4CFECF09CD7" alt="sparks fly!" width="1500" height="110" />
        </div>
        <div class="container">

            <div class="redemption-form">
                <div>
                    <h3>You've Selected:</h3>
                    <div>
                        <p><p>Simply <strong>BUY a Cool Product</strong> to REDEEM another Cool Product.</p>
                        </p>
                        <p>
                            Products must be purchased in the promotional period 10/1/2017 to 12/31/2017 from an approved MyCompany dealer.  All redemption offers must be received by close of business on 1/14/2018. Only one redemption per transaction.  Cannot be used in conjunction with any other offer
                        </p>
                        <div>
                            <img src="/-/media/Images/Redemptions/Tiles_300x300_07_48224252.ashx?h=300&amp;w=300&amp;la=en&amp;hash=C49C6023ED7BD2F05DE5070BE3B8114B41D471DD" alt="Promo 48223712" />
                        </div>
                    </div>
                </div>
                <div>
                    <h3>E-Rebate Redemption Form</h3>
                    <p></p>

                    <form action="/MyRedemptions?rid=48d4d95c417b42559af1178f17b64853" class="redemption__form" enctype="multipart/form-data" method="post">
                        <input id="scController" name="scController" type="hidden" value="Redemptions" />
                        <input id="scAction" name="scAction" type="hidden" value="RedemptionForm" />    <div>
                            <div class="input-group input-group--required">
                                <label for="FirstName">First Name</label>
                                <input class="input-field" id="FirstName" name="FirstName" type="text" value="" />
                                <label class="error" for="FirstName" id="FirstName-error" style="display: none;">Field &#39;First Name&#39; is required</label>
                            </div>
                            <div class="input-group input-group--required">
                                <label for="Surname">Last Name</label>
                                <input class="input-field" id="Surname" name="Surname" type="text" value="" />
                                <label class="error" for="Surname" id="Surname-error" style="display: none;">Field &#39;Last Name&#39; is required</label>
                            </div>
                            <div class="input-group input-group--required">
                                <label for="StreetAddress">Street Address</label>
                                <input class="input-field" id="StreetAddress" name="StreetAddress" type="text" value="" />
                                <label class="error" for="StreetAddress" id="StreetAddress-error" style="display: none;">Field &#39;Street Address&#39; is required</label>
                            </div>
                            <div class="input-group input-group--required">
                                <label for="Suburb">Suburb</label>
                                <input class="input-field" id="Suburb" name="Suburb" type="text" value="" />
                                <label class="error" for="Suburb" id="Suburb-error" style="display: none;">Field &#39;Suburb&#39; is required</label>
                            </div>
                            <div class="input-group input-group--required">
                                <label for="State">State</label>
                                <select id="State" name="State">
                                    <option></option>
                                    <option value="CA">California</option>
                                    <option value="FL">Florida</option>
                                    <option value="IL">Illinois</option>
                                    <option value="IA">Iowa</option>
                                    <option value="MI">Michigan</option>
                                    <option value="MN">Minnesota</option>
                                    <option value="NY">New York</option>
                                    <option value="TX">Texas</option>
                                    <option value="WI">Wisconsin</option>
                                </select>
                                <label class="error" for="State" id="State-error" style="display: none;">Field &#39;State&#39; is required</label>
                            </div>
                            <div class="input-group input-group--required">
                                <label for="ZipCode">Zip Code</label>
                                <input class="input-field" id="ZipCode" name="ZipCode" type="text" value="" />
                                <label class="error" for="ZipCode" id="ZipCode-error" style="display: none;">Field &#39;Zip Code&#39; is required</label>
                            </div>
                            <div class="input-group input-group--required">
                                <label for="Mobile">Mobile</label>
                                <input class="input-field" id="Mobile" name="Mobile" type="text" value="" />
                                <label class="error" for="Mobile" id="Mobile-error" style="display: none;">Field &#39;Mobile&#39; is required</label>
                            </div>
                            <div class="input-group input-group--required">
                                <label for="Phone">Phone</label>
                                <input class="input-field" id="Phone" name="Phone" type="text" value="" />
                                <label class="error" for="Phone" id="Phone-error" style="display: none;">Field &#39;Phone&#39; is required</label>
                            </div>
                            <div class="input-group input-group--required">
                                <label for="EmailAddress">Email</label>
                                <input class="input-field" id="EmailAddress" name="EmailAddress" type="text" value="" />
                                <label class="error" for="EmailAddress" id="EmailAddress-error" style="display: none;">Field &#39;Email&#39; is required</label>
                            </div>
                            <div class="input-group input-group--required">
                                <label for="ProductPurchased">Purchased Product</label>
                                <select id="ProductPurchased" name="ProductPurchased">
                                    <option></option>
                                    <option value="861f6eb5cdec460496cac8f9c65ffb4b">Product 1</option>
                                    <option value="474f8e7a4a6041e894878a065be5f8e4">Product 2</option>
                                </select>
                                <label class="error" for="ProductPurchased" id="ProductPurchased-error" style="display: none;">Field &#39;ProductPurchased&#39; is required</label>
                            </div>
                            <div class="input-group input-group--required">
                                <label for="ReceiptNumber">Receipt Number</label>
                                <input class="input-field" id="ReceiptNumber" name="ReceiptNumber" type="text" value="" />
                                <label class="error" for="ReceiptNumber" id="ReceiptNumber-error" style="display: none;">Field &#39;Receipt Number&#39; is required</label>
                            </div>
                            <div class="input-group input-group--required">
                                <label for="Store">Store</label>
                                <input class="input-field" id="Store" name="Store" type="text" value="" />
                                <label class="error" for="Store" id="Store-error" style="display: none;">Field &#39;Store&#39; is required</label>
                            </div>
                            <div class="input-group input-group--required">
                                <label for="StoreSuburb">Store Suburb</label>
                                <input class="input-field" id="StoreSuburb" name="StoreSuburb" type="text" value="" />
                                <label class="error" for="StoreSuburb" id="StoreSuburb-error" style="display: none;">Field &#39;Suburb&#39; is required</label>
                            </div>
                            <div class="input-group input-group--required">
                                <label for="RedeemedProduct">Redeemed Product</label>
                                <select id="RedeemedProduct" name="RedeemedProduct">
                                    <option></option>
                                    <option value="bcd766e8384441849e58b25d28b90e17">Product 3</option>
                                </select>
                                <label class="error" for="RedeemedProduct" id="RedeemedProduct-error" style="display: none;">Field &#39;Redeemed Product&#39; is required</label>
                            </div>
                            <div class="input-group input-group--required">
                                <label for="Receipt">Receipt</label>
                                <input accept="image/*" class="input-field" id="Receipt" name="Receipt" type="file" value="" />
                                <label class="error" for="Receipt" id="Receipt-error" style="display: none;">Field &#39;Receipt&#39; is required</label>
                            </div>
                            <div class="input-group input-group--required">
                                <input id="TermsAgreement" name="TermsAgreement" type="checkbox" value="true" /><input name="TermsAgreement" type="hidden" value="false" />
                                <label for="TermsAgreement">I agree and understand the Terms and Conditions</label>
                                <label class="error" for="TermsAgreement" id="TermsAgreement-error" style="display: none;">Field &#39;I agree and understand the Terms and Conditions&#39; is required</label>
                            </div>
                            <div>
                                <input id="uid" name="uid" type="hidden" value="80cc5ade-4f93-42e7-8149-c2373520074e" />
                                <input id="DatasourceId" name="DatasourceId" type="hidden" value="0ac8b894-9d96-4072-bbe0-7d5a800af8d7" />
                                <input id="RedemptionId" name="RedemptionId" type="hidden" value="48d4d95c417b42559af1178f17b64853" />
                                <input id="Country" name="Country" type="hidden" value="US" />
                            </div>
                            <div class="btn">
                                <button type="submit">submit</button>
                            </div>
                        </div>
                    </form>
                    <div>

                    </div>
                </div>

            </div>
        </div>
    </main>
    <div class="email-signup">
        <div class="container">
            <div class="email-signup__content">
                <h1>Sign Me Up!</h1>
                <h2>Be the first to know about special offers, new product launches and events.</h2>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="footer__content">
            <div class="container">
                <div class="footer__col footer__col--main">
                    <div class="social">
                        <a href="#" class="social__link"><svg class="icon icon-facebook"><use xlink:href="/icons/icons.svg#icon-facebook"></use></svg></a>
                        <a href="#" class="social__link"><svg class="icon icon-instagram"><use xlink:href="/icons/icons.svg#icon-instagram"></use></svg></a>
                        <a href="#" class="social__link"><svg class="icon icon-twitter"><use xlink:href="/icons/icons.svg#icon-twitter"></use></svg></a>
                        <a href="#" class="social__link"><svg class="icon icon-youtube"><use xlink:href="/icons/icons.svg#icon-youtube"></use></svg></a>
                        <a href="#" class="social__link"><svg class="icon icon-flickr3"><use xlink:href="/icons/icons.svg#icon-flickr3"></use></svg></a>
                        <a href="#" class="social__link"><svg class="icon icon-google-plus"><use xlink:href="/icons/icons.svg#icon-google-plus"></use></svg></a>
                    </div>
                    <div class="footer__links">
                        <div class="footer__links-col">
                            <h2 class="footer__title">Products</h2>
                            <a href="#" class="footer__link">Cool Stuff</a>
                            <a href="#" class="footer__link">Cooler Stuff</a>
                            <a href="#" class="footer__link">Jobsite Enhancement</a>
                            <a href="#" class="footer__link">Instruments</a>
                            <a href="#" class="footer__link">Accessories</a>
                        </div>
                        <div class="footer__links-col">
                            <h2 class="footer__title">About Us</h2>
                            <a href="#" class="footer__link">The MyCompany Story</a>
                            <a href="#" class="footer__link">News &amp; Events</a>
                            <a href="#" class="footer__link">For The Press</a>
                            <a href="#" class="footer__link">MyCompany Logo'd Merchandise</a>
                            <a href="#" class="footer__link">Safety Notices</a>
                            <a href="#" class="footer__link">Contact Us</a>
                            <a href="#" class="footer__link">Careers</a>
                        </div>
                    </div>
                    <a href="#" class="btn btn--primary-dark"><svg class="icon icon-earth"><use xlink:href="/icons/icons.svg#icon-earth"></use></svg> US : : En - Change Site / Language</a>
                    <a href="#" class="btn btn--primary-dark"><svg class="icon icon-map-marker"><use xlink:href="/icons/icons.svg#icon-map-marker"></use></svg> Where to Buy MyCompany Products</a>
                </div>
                <div class="footer__col footer__col--catalogs">
                    <div class="footer__links">
                        <div class="footer__links-col">
                            <h2 class="footer__title">Download Catalogs</h2>
                            <a href="#" class="footer__link">
                                <img src="http://placehold.it/109x143" />
                                <span>Cool Stuff</span>
                            </a>
                            <a href="#" class="footer__link">
                                <img src="http://placehold.it/109x143" />
                                <span>Cool Stuff Accessories</span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="footer__col footer__col--more">
                    <div class="footer__links footer__links--grouped">
                        <div class="footer__links-col">
                            <h2 class="footer__title">New Products</h2>
                            <a href="#" class="footer__link footer__link--product">Product 1</a>
                            <a href="#" class="footer__link footer__link--product">Product 2</a>
                            <a href="#" class="footer__link footer__link--product">Product 3</a>
                            <a href="#" class="footer__link footer__link--product">Product 4</a>
                            <a href="#" class="footer__link footer__link--product">Product 5</a>
                            <a href="#" class="footer__link footer__link--highlight">See all NEW products &gt;</a>
                        </div>
                        <div class="footer__links-col">
                            <h2 class="footer__title">How Can We Help?</h2>
                            <a href="#" class="footer__link"><span class="footer__link-title">FAQs</span>Explanation and detail of what Lorem Ispum is</a>
                            <a href="#" class="footer__link"><span class="footer__link-title">Find A Service Center</span>Explanation and detail of what Lorem Ispum is</a>
                            <a href="#" class="footer__link"><span class="footer__link-title">Work At MyCompany</span>Explanation and detail of what Lorem Ispum is</a>
                            <a href="#" class="footer__link"><span class="footer__link-title">Lorem Ipsum</span>Explanation and detail of what Lorem Ispum is</a>
                            <a href="#" class="footer__link"><span class="footer__link-title">Manuals</span>Explanation and detail of what Lorem Ispum is</a>
                            <a href="#" class="footer__link"><span class="footer__link-title">Video Library</span>Explanation and detail of what Lorem Ispum is</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer__content">
            <div class="container">
                <div class="copyright">
                    <span class="copyright__text">
                        © 2017 by MyCompany. All rights reserved.
                    </span>
                </div>
                <div class="footer-menu">
                    <a href="##" class="footer-menu__link">Legal</a><a href="##" class="footer-menu__link">Privacy Policy</a><a href="##" class="footer-menu__link">Accessibility Policy</a><a href="##" class="footer-menu__link">Contact Us</a>
                </div>
            </div>
        </div>
    </footer>
    <script type="text/javascript" src="/scripts/Foundation/Theming/MyCompany/vendor.js?40dcfb22e1"></script>
    <script type="text/javascript" src="/scripts/Foundation/Theming/MyCompany/app.js?ed802f9a82"></script>
    <script type="text/javascript" src="/scripts/Feature/Navigation/Navigation/PrimaryMenu.js?0b6a65015e"></script>
</body>
</html>

When the page first loads, the controller is hit on the GET method just fine. The controller method does its thing and returns the model the form is expecting. The header, menu, "Redemption" form and footer all display just fine.

When I submit the form on the page it does get to the expected POST method of the controller, submits the form data to our database and then I return the same model back to the form with some additional fields filled in indicating that the form was submitted successfully (or not). The same cshtml file representing the rendering looks at this returned data and will determine whether to display a thank-you message for submitting the form OR to still display the form if there was a failure of any kind (server side validation OR a database failure).

However, on the postback the only rendering that is displayed is the "Redemption" form rendering. ALL other renderings on the page (header, menu, footer) are gone. This happens whether the form was submitted successfully or not - it only displays that "Redemption" rendering.

I've tried multiple solutions:

How To Get a Simple Form To Post...
Posting Forms In Sitecore...
Posting Forms In Sitecore - Another Perspective...
To The Controller And Back Part 1 and Part 2...

I'm wracking my brains out trying to find why this is happening and to fix it but to no avail. What am I missing or doing wrong? Thanks!

On this line Html.BeginRouteForm("Sitecore", new { rid = this.Model.RedemptionId }, FormMethod.Post, new { @class = "redemption__form", enctype = "multipart/form-data" })) instead of passing "Sitecore" try passing this instead "Sitecore.Mvc.Configuration.MvcSettings.SitecoreRouteName" — Dylan Young, Nov 13, 2017 at 16:15
I cover how to build a custom form with Sitecore in this video: youtube.com/watch?v=X1NmfsgA_ME&t=6s — Dylan Young, Nov 13, 2017 at 16:16
Thanks, Dylan! However, I actually do have "Sitecore.Mvc.Configuration.MvcSettings.SitecoreRouteName" instead of "Sitecore" in my cshtml file. Not sure why I put "Sitecore" in there for this post but I fixed it. I'll also take a look at your video too. — Ted Osberg, Nov 13, 2017 at 16:19
When only the Redemption form is showing after a post, is the url something like /api/sitecore/Redemptions/RedemptionForm or is it the page url the rendering is initially displayed on? — bmyers, Nov 13, 2017 at 17:03
@bmyers: it is the actual page url the rendering was initially displayed on — Ted Osberg, Nov 13, 2017 at 17:19

Anton · Accepted Answer · 2017-11-14 10:34:49Z

This code:

@Html.Sitecore().FormHandler("Redemptions", "RedemptionForm")

is responsible for generation of this HTML

<input id="scController" name="scController" type="hidden" value="Redemptions" class="has-text">
<input id="scAction" name="scAction" type="hidden" value="RedemptionForm" class="has-text">

When there are present 2 values in POST request, "scController" and "scAction" then Sitecore.Mvc.Pipelines.Request.RequestBegin.ExecuteFormHandler handler is executed. It executes "scAction" from "scController" and adds scOutputGenerated route value:

requestContext.RouteData.Values["scOutputGenerated"] = "1";

This flag is responsible later for execution of Sitecore controller. It causes that you get only HTML code from your action, but not from whole page.

What you can do:

Make POST action to be executed by AJAX and update page with response
Remove @Html.Sitecore().FormHandler("Redemptions", "RedemptionForm") line. (But be aware, that if you have few forms on page then [HttpPost] actions will be executed in all of them)

Thank you! It's not obvious that the form handler inherently assumes an ajax style behaviour. — Paul George, Mar 18, 2021 at 13:40

Stack Exchange Network

Postback Does Not Return Full Page Layout

1 Answer 1

Your Answer

Not the answer you're looking for? Browse other questions tagged
mvc
mvc-forms
or ask your own question.

Linked

Hot Network Questions

Postback Does Not Return Full Page Layout

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged mvcmvc-forms or ask your own question.

Linked

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
mvc
mvc-forms
or ask your own question.