All model and Formcollection values are null, blank or don't exist in Firefox or Chrome

Question

During debugging, my MVC model and Formcollection are blank with no values in FireFox (15) or Chrome (latest version).

During debugging using IE (9), I can see these values just fine.

Do you know what the solution is for this? This is very serious for public facing web sites not being able to do any programming angainst these browsers.

Here is my View...

@model PDFConverterModel.ViewModels.ViewModelTemplate_Guarantors

@{
    ViewBag.Title = "BHG :: PDF Generator";
}
<h2>@ViewBag.Message</h2>

<div>

    <table style="width: 1000px">
        <tr>
            <td colspan="5">
                <img alt="BHG Logo" src="~/Images/logo.gif" />
            </td>
        </tr>

        @using (Html.BeginForm("ProcessForm", "Home", FormMethod.Post))
        {  
            <tr>
                <td>
                @(Html.Kendo().IntegerTextBox()
                        .Name("LoanID")
                        .Placeholder("Enter Loan ID")
                )
            </tr>
            <tr>
                <td>@Html.LabelFor(model => model.LoanType)
                    @Html.DisplayFor(model => model.LoanType)
                </td>
                <td>
                    <label for="ddlDept">Department:</label>
                    @(Html.Kendo().DropDownList()
                            .Name("ddlDept")
                            .DataTextField("DepartmentName")
                            .DataValueField("DepartmentID")
                            .Events(e => e.Change("Refresh"))
                            .DataSource(source =>
                            {
                                source.Read(read =>
                                {
                                    read.Action("GetDepartments", "Home");
                                });
                            })
                    )
                </td>
            </tr>

            if (Model.ShowGeneratePDFBtn == true)
            {
                if (Model.ErrorT == string.Empty)
                {
            <tr>
                <td colspan="5">
                    <u><b>@Html.Label("Templates:")</b></u>
                </td>
            </tr>
            <tr>
                @for (int i = 0; i < Model.Templates.Count; i++)
                {  
                    <td>
                        @Html.CheckBoxFor(model => Model.Templates[i].IsChecked)
                        @Html.DisplayFor(model => Model.Templates[i].TemplateId)
                    </td> 
                }

            </tr>
                }
                else
                {
            <tr>
                <td>
                    <b>@Html.DisplayFor(model => Model.ErrorT)</b>
                </td>
            </tr>
                }

                if (Model.ErrorG == string.Empty)
                {
            <tr>
                <td colspan="5">
                    <u><b>@Html.Label("Guarantors:")</b></u>
                </td>
            </tr>
            <tr>
                @for (int i = 0; i < Model.Guarantors.Count; i++)
                { 
                    <td>
                        @Html.CheckBoxFor(model => Model.Guarantors[i].isChecked)
                        @Html.DisplayFor(model => Model.Guarantors[i].GuarantorFirstName)&nbsp;@Html.DisplayFor(model => Model.Guarantors[i].GuarantorLastName)
                    </td> 
                }

            </tr>
                }
                else
                {
            <tr>
                <td>
                    <b>@Html.DisplayFor(model => Model.ErrorG)</b>
                </td>
            </tr>
                }
            }   
            <tr>
                <td colspan="3">
                    <input type="submit" name="submitbutton" id="btnRefresh" value='Refresh' />
                </td>
                @if (Model.ShowGeneratePDFBtn == true)
                {
                    <td>
                        <input type="submit" name="submitbutton" id="btnGeneratePDF" value='Generate PDF' />
                    </td>
                }
            </tr>
            <tr>
                <td colspan="5">
                    @Model.Error
                </td>
            </tr>
        }
    </table>

</div>

<script type="text/javascript">

    $('btnRefresh').on('click', '#btnRefresh', function () {
        Refresh();
    });

    function Refresh() {

        var LoanID = $("#LoanID").val();

        if (LoanID != "") {
            document.forms[0].submit();
        }
        else {
            alert("Please enter a LoanId");
        }
    }
</script>

Answer 1

(This would be better suited as comment, but I can't comment yet)

For future reference, here's a spec (W3C might have something different) for what gets submitted when a form is submitted:

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#category-submit

You can look at whatever HTML was generated to make sure it gets submitted. You could also use something like Fiddler to look at the Http request

Answer 2

I just found out what the issue is by experimneting.

The Telerik MVC widgets don't emit any FormCollection data!!!!

Only EditorFor and TextBoxFor emit these values, plus the input buttons.

What good are these widgets if I can't use the FormCollection values from them???? Especially the DropDownList where I can retrireve data and need the selected value to pass onto other methods.

Answer 3

I know this is a very old question, but answering this might help people like who are struggling with this issue.

I had a similar issue. The problem lies here:

<table style="width: 1000px">
        <tr>
            <td colspan="5">
                <img alt="BHG Logo" src="~/Images/logo.gif" />
            </td>
        </tr>

        @using (Html.BeginForm("ProcessForm", "Home", FormMethod.Post))
        {  
            <tr>
             <td>
                @(Html.Kendo().IntegerTextBox()
                        .Name("LoanID")
                        .Placeholder("Enter Loan ID")
                )
             </td>
            </tr>
        }
</table>

After begin form there are <tr> tags directly! Browsers like chrome and mozilla get confused in such cases. The <table> tag should be inside the form. If we look at your code, which was exactly what I had done, <table> tag was before @using Html.BeginForm. Internet Explorer somehow understands this, but the other browsers don't.

When I did an inspect element I found that there was a form tag within each <tr> tag and it always returned FormCollection as null. Simply defining <table> within form solved my problem.

So here's how it should be:

<table style="width: 1000px">
            <tr>
                <td colspan="5">
                    <img alt="BHG Logo" src="~/Images/logo.gif" />
                </td>
            </tr>
            <tr><td>
            @using (Html.BeginForm("ProcessForm", "Home", FormMethod.Post))
            {
             <table>  
                <tr>
                 <td>
                    @(Html.Kendo().IntegerTextBox()
                            .Name("LoanID")
                            .Placeholder("Enter Loan ID")
                    )
                 </td>
                </tr>
             </table>
            }
            </td></tr> 
</table>