How to form submit and show a different page in ASP.Net MVC?

Question

hi guys

i'm new to asp.net mvc..

so basically i just build up a two page app which takes the registration information of the user and post it to the database.

i use a lot of jquery and ajax calls to retrieve data from the database using linq to sql stored proc object.

and currently i'm stuck at one page where after the user submits the form it should redirect him to /Home/ProductAdded.

What i found was the error:

 Validation of viewstate MAC failed. If this application is hosted by a Web Farm or cluster, ensure that <machineKey> configuration specifies the same validationKey and validation algorithm. AutoGenerate cannot be used in a cluster.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Web.HttpException: Validation of viewstate MAC failed. If this application is hosted by a Web Farm or cluster, ensure that <machineKey> configuration specifies the same validationKey and validation algorithm. AutoGenerate cannot be used in a cluster.

what used on my form are basically a combination of html controls, asp.net controls and some asp.net mvc type controls.

i submit the form using action="/Home/ProductAdded" and after doing some googling i found i was supposed to add in the machine key but after doing so, the index page becomes unviewable. because it couldn't find the index file now.

removing the action helps, but now it just doesn't go anywhere. so what am i missing here?

i feel i'm missing a lot of fundamentals understanding about asp.net mvc and i don't even know how to submit a form and go to a different page here!!

Edit: included my index.aspx

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">

    <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.jsonSuggest.js" type="text/javascript"></script>
    <script src="Scripts/ProductRegistration.js" type="text/javascript"></script>
    <script src="Scripts/jquery.Guid.js" type="text/javascript"></script>

    <script src="Scripts/jquery.scrollTo-min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.ui.core.min.js" type="text/javascript"></script>

    <script src="Scripts/jquery.ui.datepicker.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.ui.widget.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.colorbox-min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate.min.js" type="text/javascript"></script>
    <script src="Scripts/date.js" type="text/javascript"></script>

    <form id="frmProductReg" runat="server" class="frmProductReg" action="/Home/ProductAdded">
        <asp:Panel ID="BreadCrumbPanel" runat="server" HorizontalAlign="Left" CssClass="breadcrumbCentered">
            Register Your Product</asp:Panel>
        <asp:Panel ID="MainContentPanel" runat="server"
            HorizontalAlign="Left" CssClass="headerCentered">
            <!-- Grab the country name via the geo locator -->
            <h1>Two-Step Online Product Registration</h1>
            we detect that you&#39;re located in 
            <!-- using span as it can auto resize and keeping the input for form submission later -->
            <span id="geoLocatedCountry" class="selectedCountry" ><%= Html.Encode(ViewData["CountryName"]) %></span>
            To change your country or region, please
            <span id="changeCountryUpper">click here</span>
            .
            <br /><br />
            <h3>Step 1: Enter your product information</h3>
        </asp:Panel>
        <asp:Panel ID="Panel3" runat="server" CssClass="contentCentered" HorizontalAlign="Left">

            <h3 align="left">Method 1</h3>
            Key in the name of your product in the space below. Choose the most appropriate 
            if there are a few similar ones, then click
            <img id="Image1" src="Images/btn_addButtonS.gif" alt="Add Button"/>
            <br />
            You can register multiple products by repeating this step.
            <table id="Table1">
                <tr>
                    <td>
                    <input type="text" id="tboProductCount" class="tboProductCount" value="0" />
                    <input type="text" id="tboAddProductId" class="tboAddProductId" />
                    <input id="tboAddProduct" class="tboAddProduct" />
                    </td>
                    <td>
                    <input type="image" id="btnAddProduct" class="btnAddProduct" src="Images/btn_addButton.gif" />
                    </td>
                </tr>
            </table>
            <br />
            <h3 align="left">
                Method 2</h3>
            Select the product(s) you wish to register and click
            <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/btn_addButtonS.gif" />. 
            You can register multiple products by repeating this step. To remove
            <br />
            any product, click on the Remove button<asp:Image ID="Image3" runat="server" ImageUrl="~/Images/btn_remove.gif" />
            .<br />
            <br />
            <table border="0" cellpadding="2" cellspacing="0" frame="void" 
                style="width: 100%">
                <tr>
                    <td style="width: 238px">
                        <asp:ListBox ID="ListBox1" CssClass="LBox1" runat="server" Width="100%"></asp:ListBox>
                    </td>
                    <td style="width: 239px">
                        <asp:ListBox ID="ListBox2" CssClass="LBox2" runat="server" Width="100%"></asp:ListBox>
                    </td>
                    <td style="width: 290px">
                        <asp:ListBox ID="ListBox3" CssClass="LBox3" runat="server" Width="100%"></asp:ListBox>
                    </td>
                </tr>
                <tr>
                    <td style="width: 238px">
                        &nbsp;</td>
                    <td style="width: 239px">
                        &nbsp;</td>
                    <td style="width: 290px">
                        <asp:ImageButton ID="btnAddProduct2" cssClass="btnAddProduct2" runat="server" Height="26px" 
                            ImageAlign="Right" ImageUrl="~/Images/btn_addButton.gif" />
                    </td>
                </tr>
            </table>
            <br />
       </asp:Panel>
       <asp:Panel ID="PanelProductReg" runat="server" CssClass="PanelProductReg" HorizontalAlign="Left">
            <table id="ProductRegistrationTable" class="ProductRegistrationTable">
                <tr style="font-weight:bold;">
                    <td class="productIdCol">Product Id</td>
                    <td style="width:30%">Product</td>
                    <td style="width:30%">Serial Number<span class="redWarning">*</span> (
                    <a id="anchorSerialNoHelp" href="http://www.yahoo.com"&gt;What's this</a>)</td>
                    <td style="width:5%"><!-- used for the serial number help image button--></td>
                    <td style="width:20%">Date of Purchase<span class="redWarning">*</span></td>
                    <td>Remove</td>
                </tr>
            </table>
        </asp:Panel>
        <asp:Panel ID="Panel4" runat="server" HorizontalAlign="Left" CssClass="headerCentered">
            <h3>Step 2: Enter your personal details</h3>          
        </asp:Panel>
        <asp:Panel ID="Panel1" runat="server" CssClass="contentCentered" HorizontalAlign="Left">
            <table style="width: 97%">
                <tr>
                    <td style="width: 243px">
                        First Name<span class="redWarning">*</span>:</td>
                    <td>
                        <%= Html.TextBox("Customer.FirstName") %>
                        <!--asp:TextBox ID="customer.FirstName" ></asp:TextBox-->
                    </td>
                </tr>
                <tr>
                    <td style="width: 243px; height: 18px">
                        Last Name<span class="redWarning">*</span>:</td>
                    <td style="height: 18px">
                        <%= Html.TextBox("Customer.LastName") %>
                        <!-- asp:TextBox ID="customer.LastName" ></asp:TextBox -->
                    </td>
                </tr>
                <tr>
                    <td style="width: 243px">
                        Email Address<span class="redWarning">*</span>:</td>
                    <td>
                        <%= Html.TextBox("Customer.Email") %>
                        <!--asp:TextBox ID="customer.Email" ></asp:TextBox-->
                    </td>
                </tr>
                <tr>
                    <td style="width: 243px">
                        Re-enter Email Address<span class="redWarning">*</span>:</td>
                    <td>
                        <input type="text" id="tboConfirmEmail" />
                    </td>
                </tr>
                <tr>
                    <td style="width: 243px">
                        Country/Region<span class="redWarning">*</span>:</td>
                    <td>
                        <!-- hiding the input as i can't auto resize it and i still need this
                        data when i submit the form -->
                        <span id="selectedCountry" class="selectedCountry" ><%= ViewData["CountryName"] %>
                        </span>
                        <input type="hidden" id="customer.CountryID" value="65"/>
                        <input type="hidden" id="txtSelectedCountry" value="<%= Html.Encode(ViewData["CountryName"]) %>" />
                        <span id="currentCountry"> (Change this?)
                        </span>
                        <span id="changeCountry"> 
                        <%= Html.DropDownList("countries")%>
                        </span>
                    </td>
                </tr>
                <tr id="stateNameRow">
                    <td style="width: 243px">
                        State/Province:</td>
                    <td>
                        <!--%= Html.DropDownList("stateDdl") %-->
                        <asp:DropDownList ID="stateDdl" runat="server" CssClass="stateDdl"></asp:DropDownList>
                        &nbsp;&nbsp;&nbsp;&nbsp; or&nbsp;&nbsp;
                        <%= Html.TextBox("Customer.StateName")%>
                        <!--asp:TextBox ID="customer.StateName"></asp:TextBox-->
                    </td>
                </tr>
                <tr>
                    <td style="width: 243px">
                        Gender:</td>
                    <td>
                        <%= Html.RadioButton("Customer.Male", "Male",true)%> Male
                        <%= Html.RadioButton("Customer.Female", "Female")%> Female
                        <!--asp:RadioButton ID="rbtMale" Text="Male" Checked="True" 
                            GroupName="rboGender" />
                        &nbsp;&nbsp;&nbsp;
                        <asp:RadioButton ID="rbtFemale"  Text="Female" 
                            GroupName="rboGender" /-->
                    </td>
                </tr>
                <tr>
                    <td style="width: 243px">
                        Date of Birth:</td>
                    <td>
                        <input type="text" id="Customer_DOB" name="Customer.DOB" class="dobPicker" />
                    </td>
                </tr>
                <tr>
                    <td style="width: 243px">
                        &nbsp;</td>
                    <td>
                        <%= Html.CheckBox("Customer.Subscribe",true) %>
                        <!--asp:CheckBox ID="cboNewsletter" Checked="True" / -->
                        &nbsp;I would like to receive newsletters for the latest Creative products, special 
                        offers and events.
                    </td>
                </tr>
                <tr>
                    <td style="width: 243px">
                        &nbsp;</td>
                    <td>
                        * Denotes mandatory field.</td>
                </tr>
                <tr>
                    <td style="width: 243px">
                        &nbsp;</td>
                    <td>
                        <!--asp:ImageButton ID="ImageButton1"
                            ImageUrl="~/Images/btn_submit.gif" /-->
                        <input type="image" id="imgbtnSubmit" src="Images/btn_submit.gif"/>    
                        <input type="image" id="imgbtnClear" src="Images/btn_clear.gif"/>
                    </td>
                </tr>
            </table>

        </asp:Panel>
    </form>
</asp:Content>

Answer 1

Post-Redirect-Get pattern is the answer to your question. Search SO or Google and you should find plenty of info on it.

Also you mention ASP.NET controls? Those should not be present in ASP.NET MVC View pages because they are not compatible with MVC.

Answer 2

In the method that you have handling the request you can return Redirect(url); That should solve your immediate problem.

The other thing you should try to stay away from is using asp.net controls. You don't need them in MVC. If you do use them, don't use them with viewstate because MVC doesn't do things to your Form element like webforms does that makes ViewState work.

Answer 3

In short, you are not meant to use ASP.NET server controls that use viewstate in MVC - ASP.NET MVC doesn't support viewstate. Any controls that rely on viewstate won't work - and even ones that do not are not in keeping with the philosophy of MVC.