Returning response from a view that contains input type file - Microsoft JScript runtime error: Object expected

Question

Hi guys,

I have a simple view that has 2 textboxes and 1 file input.

    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<iLoyalty.BackOfficePortal.Models.SegmentModel>" %>

<% using (Html.BeginForm("SaveSegment", "Segment", FormMethod.Post, new { id = "SegmentForm", enctype = "multipart/form-data" }))
   { %>
<div class="StContent">
    <h3>
        <%= iLoyalty.BackOfficePortal.Globals.GetResourceText("CardSegmentInsert")%></h3>
    <br />
    <%= Html.HiddenFor(model => model.ApplicationName, new { id = "ApplicationName" })%>
    <%--<%= Html.HiddenFor(model => model.SegmentID, new { id = "SegmentID" })%>--%>
    <table width="95%" border="0" cellspacing="1" cellpadding="4" class="Table" style="margin: 0 0 0 10px">
        <tr class="Tr0">
            <td style="width: 200px" class="Tr1">
                <%= iLoyalty.BackOfficePortal.Globals.GetResourceText("ApplicationName")%>
            </td>
            <td>
                <span id="ApplicationName">
                    <%= Model.ApplicationName %></span>
            </td>
        </tr>
        <tr class="Tr0">
            <td style="width: 200px" class="Tr1">
                <%= iLoyalty.BackOfficePortal.Globals.GetResourceText("CardSegmentName")%>
            </td>
            <td>
                <%= Html.TextBoxFor(model => model.SegmentName, new { id = "SegmentName", @class = "txtBox" })%>
            </td>
        </tr>
        <tr class="Tr0">
            <td style="width: 200px" class="Tr1">
                <%= iLoyalty.BackOfficePortal.Globals.GetResourceText("RewardRate")%>
            </td>
            <td>
                <%= Html.TextBoxFor(model => model.GainRate, new { id = "GainRate", @class = "txtBox" })%>
            </td>
        </tr>
        <tr class="Tr0">
            <td style="width: 200px" class="Tr1">
            </td>
            <td>
                <input name="PostedFile" id="PostedFile" type="file" class="txtBox" style="width: 200px" />
            </td>
        </tr>
        <tr class="Tr0">
            <td class="Tr1" colspan="2" style="text-align: right">
                <input id="saveBtn" type="submit" class="button" value='<%= iLoyalty.BackOfficePortal.Globals.GetResourceText("Add")%>' />
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#saveBtn').click(function () {
            //BlockPage();
            var options = {
                target: '#contentDiv',
                success: function () {
                    BlockDivSuccess('generalCover');
                }
            };
            $('#SegmentForm').ajaxForm(options);
        });
    });
</script>
<% } %>

After clicking saveBtn I see that in debug mode it posts the appropriate data to the appropriate action and it works well. And in firebug I see the response to the ajax call is just like what I expect to have. But only in ie I get an javascript error that just says: Microsoft JScript runtime error: Object expected

After I remove the line above, everything is ok in all browsers. But I need this too.

<input name="PostedFile" id="PostedFile" type="file" class="txtBox" style="width: 200px" />

Do you have any idea about this problem? It is interesting that it occurs only in ie.

Thanks in advance,

Answer 1

Just attach your Visual Studio debugger to IE process and then you can see which javascript variable is null.

Open Debug menu, choose Attach to Process..., select iexplore.exe from the list of running processes and click Attach. Make sure, that 'Attach to:' textbox says Script otherwise click Select... button and choose it.

Also make sure that script debugging is not disabled in IE.

See: http://www.jonathanboutelle.com/how-to-debug-javascript-in-internet-explorer