ASP.NET MVC form submitted in FF/Chrome, not in IE_问答_开发者

I'm going slightly insane here. I've been trying to figure out what is the problem for the past 24 hours, but I simply can't figure out what is wrong.

I have an article submission framework. First the user inputs some article text fields, then he uploads 2 pictures, then he crops them. The problem occurs when I try to crop the images - the submit button simply doesn't work. I click it and nothing happens.

However this only happens in IE.

In FF and Chrome it works flawlessly.

This is the aspx code of the CropImages view:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Admin/Site.Admin.Master" Inherits="System.Web.Mvc.ViewPage<dr_teman_MVC.Models.ImagesUploadModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
<div class="span-22 append-1 prepend-1 contentarea">
    <h2>גזור התמונות</h2>

    <div class="cropImageSpan">
        <img src="<%= Html.Encode(Model.newArticle.Image1.originalImageAddress)%>" alt="cropImage1" id="crop_target1" "/>
    </div>
    <div class="cropImageSpan">
        <img src="<%= Html.Encode(Model.newArticle.Image2.originalImageAddress)%>" alt="cropImage2" id="crop_target2" "/>
    </div>

    <% using (Html.BeginForm("ArticleCreated", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
       { %>

            <input type="hidden" id="img1x1" name="img1x1" />
            <input type="hidden" id="img1y1" name="img1y1" />
            <input type="hidden" id="img1x2" name="img1x2" />
            <input type="hidden" id="img1y2" name="img1y2" />

            <input type="hidden" id="img2x1" name="img2x1" />
            <input type="hidden" id="img2y1" name="img2y1" /> 
            <input type="hidden" id="img2x2" name="img2x2" /> 
            <input type="hidden" id="img2y2" name="img2y2" />
            <input type="hidden" id="articleID" name="articleID" value= "<%= Html.Encode((Model.newArticle.ArticleID).ToString()) %>"/>

    <div>
        <input name="submit" type="submit" value="סיום"/>
    </div>
    <%} %>

</div><!--/span-22 append-1 prepend-1 contentarea-->   
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="htmlHead" runat="server">

    <script src="../../Scripts/jquery.imgareaselect-0.9.2/scripts/jquery.imgareaselect.js" type="text/javascript"></script>

    <script type="text/javascript">


        $(function() {

            $('#crop_target1').imgAreaSelect({
                aspectRatio: '4:5',
                handles: true,
                onSelectEnd: function(img, selection) {
                    $('input[name=img1x1]').val(selection.x1);
                    $('input[name=img1y1]').val(selection.y1);
                    $('input[name=img1x2]').val(selection.x2);
                    $('input[name=img1y2]').val(selection.y2);
                }
            });

            $('#crop_target2').imgAreaSelect({
                aspectRatio: '4:5',
                handles: true,
                onSelectEnd: function(img, selection) {
                    $('input[name=img2x1]').val(selection.x1);
                    $('input[name=img2y1]').val(selection.y1);
                    $('input[name=img2x2]').val(selection.x2);
                    $('input[name=img2y2]').val(selection.y2);
                }
            });
        });


</script> 
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="head" runat="server"></asp:Content>

do you need the code of any other part? (the relevant m开发者_如何转开发odels? the controller?)

The aspx page is displayed, with the pictures. The cropping mechanism works - I can select the crop region in both images. But in IE, when I click on submit, nothing happens. I added a breakpoint to the relevant controller (Admin/ArticleCreated), but it doesn't even get there (the code does reach the controller which calls this aspx view, and passes all the information as expected).

So, does anyone know why IE is causing me such problems?

Any suggestion would be welcome, I am really stumped here...

Thank you,

Tom

This is the HTML source as shown in IE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml" xml:lang="he" lang="he">

<head id="ctl00_Head1"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>
    Dr. Joseph Teman - Discover The Beautiful You
</title><link href="../Content/Site.css" rel="stylesheet" type="text/css" />
    <!-- Framework CSS -->
    <link id="ctl00_Link1" rel="stylesheet" href="../Content/blueprint/screen.css" type="text/css" media="screen, projection" /><link id="ctl00_Link2" rel="stylesheet" href="../Content/blueprint/print.css" type="text/css" media="print" />

    <!-- Site Specific CSS -->
    <link id="ctl00_Link3" href="../Content/theme.css" rel="stylesheet" type="text/css" media="screen, projection" />

    <!--[if IE 6]><link rel="stylesheet" href="../Views/Admin/css/blueprint/ie6.css" type="text/css" media="screen, projection" /><![endif]-->
    <!--[if IE 7]><link rel="stylesheet" href="../Views/Admin/css/blueprint/ie7.css" type="text/css" media="screen, projection" /><![endif]-->


    <!-- Import buttons plugin  -->
    <link id="ctl00_Link4" rel="stylesheet" href="../Content/blueprint/plugins/buttons/screen.css" type="text/css" media="screen, projection" />
    <!-- Import link-icons plugin -->
    <link id="ctl00_Link5" rel="stylesheet" href="../Content/blueprint/plugins/link-icons/screen.css" type="text/css" media="screen, projection" />


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


    <link href="../Scripts/jquery.imgareaselect-0.9.2/css/imgareaselect-animated.css" rel="stylesheet" type="text/css" />

    <script src="../../Scripts/jquery.imgareaselect-0.9.2/scripts/jquery.imgareaselect.js" type="text/javascript"></script>

    <script type="text/javascript"> 


        $(function() {

            $('#crop_target1').imgAreaSelect({
                aspectRatio: '4:5',
                handles: true,
                onSelectEnd: function(img, selection) {
                    $('input[name=img1x1]').val(selection.x1);
                    $('input[name=img1y1]').val(selection.y1);
                    $('input[name=img1x2]').val(selection.x2);
                    $('input[name=img1y2]').val(selection.y2);
                }
            });

            $('#crop_target2').imgAreaSelect({
                aspectRatio: '4:5',
                handles: true,
                onSelectEnd: function(img, selection) {
                    $('input[name=img2x1]').val(selection.x1);
                    $('input[name=img2y1]').val(selection.y1);
                    $('input[name=img2x2]').val(selection.x2);
                    $('input[name=img2y2]').val(selection.y2);
                }
            });
        });


</script> 
</head>


<body id="ctl00_Body2">
        <div class="contentbg">
            <div class="headerbg">
                <div class="container mainwrap">

                    <div class="header">
                        <div class="copyright">
                            <p>Copyright information here</p>
                        </div><!--/copyright-->

                        <div class="sitename">
                            <h1><a href="/" title="Home">Dr. Joseph Teman</a></h1>
                            <h3>Discover The Beautiful You</h3>
                        </div>

                        <ul class="nav">
                            <li class="about"><a href="/Admin">ראשי</a></li>
                            <li class="about"><a href="/Admin/CreateArticle">הוסף מאמר חדש</a></li>
                            <li class="about"><a href="/Admin/ChooseArticleForEdit">ערוך מאמר קיים</a></li>
                        </ul><!--/nav-->
                    </div><!--/header-->

                    <div>

                    </div>
                    <div>

<div class="span-22 append-1 prepend-1 contentarea">
    <h2>גזור התמונות</h2>

    <div class="cropImageSpan">
        <img src="/images/articleImages/146/1.jpg" alt="cropImage1" id="crop_target1" "/>
    </div>
    <div class="cropImageSpan">
        <img src="/images/articleImages/146/2.jpg" alt="cropImage2" id="crop_target2" "/>
    </div>

    <form action="/Admin/ArticleCreated" enctype="multipart/form-data" method="post">

            <input type="hidden" id="img1x1" name="img1x1" />
            <input type="hidden" id="img1y1" name="img1y1" />
            <input type="hidden" id="img1x2" name="img1x2" />
            <input type="hidden" id="img1y2" name="img1y2" />

            <input type="hidden" id="img2x1" name="img2x1" />
            <input type="hidden" id="img2y1" name="img2y1" /> 
            <input type="hidden" id="img2x2" name="img2x2" /> 
            <input type="hidden" id="img2y2" name="img2y2" />
            <input type="hidden" id="articleID" name="articleID" value= "146"/>

    <div>
        <input name="submit" type="submit" value="סיום"/>
    </div>
    </form>

</div><!--/span-22 append-1 prepend-1 contentarea-->   

                    </div>
                                        <!--footer-->
                    <div class="footer">

                        <ul class="nav">
                            <li><a href="/">ראשי</a></li>
                            <li><a href="/Home/About">אודות</a></li>
                            <li><a href="/Admin">התחבר</a></li>
                            <li class="last"><a href="/Home/Articles">מאמרים</a></li>
                        </ul>

                        <p align="left">Copyright &copy; Dr. Joseph Teman 2010</p>

                    </div><!--/footer-->

                </div><!--/container mainwrap-->
            </div><!--/headerbg-->
        </div><!--/contentbg-->
</body>
</html>