Question

我在这里有点疯狂。我一直试图找出过去24小时内的问题，但我根本无法弄清楚出了什么问题。

我有一篇文章提交框架。首先，用户输入一些文章文本字段，然后他上传2张图片，然后他裁剪它们。当我尝试裁剪图像时出现问题 - 提交按钮根本不起作用。我点击它没有任何反应。

然而，这只发生在IE中。
在FF和Chrome中，它可以完美运行。

这是CropImages视图的aspx代码：

<%@ 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>

你需要任何其他部分的代码吗？（相关型号？控制器？）

显示带有图片的aspx页面。裁剪机制有效 - 我可以在两个图像中选择裁剪区域。但在IE中，当我点击提交时，没有任何反应。我向相关的控制器（Admin/ArticleCreated）添加了一个断点，但它甚至没有到达那里（代码确实到达调用此aspx视图的控制器，并按预期传递所有信息）。

那么，有谁知道为什么IE导致我出现这样的问题？

任何建议都会受到欢迎，我真的很难过......

谢谢，

汤姆

Answer 1

这是HTML源代码，如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>

ASP.NET MVC表单在FF / Chrome中提交，而不是在IE中

1 个答案: