JQuery 및 MVC3을 사용하여 일부 이벤트가 완료되지 않음 이벤트를 제출하십시오.

Question

JQuery를 사용하는 데 매우 이상한 문제가 있습니다. 나는 사용자가 2 개의 버튼 : "파일 저장"또는 "그림 없음"을 클릭 할 수있는 파일 업로드 양식을 가지고 있습니다. 두 개는 파일 업로드 필드에 그림이 있는지 여부를 관리하는 컨트롤러와 동일한 컨트롤러를 호출합니다.

이상한 점은 파일 업로드 필드가 비어있는 경우에만 컨트롤러 get이 호출된다는 것입니다. 누군가 사진을 선택했다면 컨트롤러에 들어 가지 않아서 제출이 제대로 작동하지 않는다고 생각하게됩니다. 하지만 내 jQuery 코드의 GET의가 ...라고 항상 true를 돌려 여기

인 document.ready에있는 jQuery 코드 :

@using (Html.BeginForm("UploadImage", "Recipe", FormMethod.Post, 
       new 
       { 
        enctype = "multipart/form-data", 
        id = "ImgForm", 
        name = "ImgForm", 
        target = "UploadTarget" 
       })) 
      { 
       <div id="fileuploader"> 
        <h4>Étape 1: Choisir une photo</h4> 
        <input id="lefile" type="file" style="display:none" name="imageFile" accept="image/x-png, image/jpeg" /> 
        <div class="input-append"> 
         <input id="photoCover" class="input-large" type="text" /> 
         <a class="btn" onclick="$('input[id=lefile]').click();">Parcourir...</a> 
        </div> 

        <script type="text/javascript"> 
         $('input[id=lefile]').change(function() { 
          $('#photoCover').val($(this).val()); 
         }); 
        </script> 

        <input id="SaveImage" type="submit" class="btn btn-success" value="Sauvegarder l'image" /> 
        <input id="SaveNoImage" type="submit" class="btn btn-danger" value="Aucune photo" /> 
       </div> 
      } 

:

여기

$('#ImgForm').on('submit', function() { 

     var fileUploader = document.getElementById("fileuploader"); 
     $(fileUploader).hide(); 

     var fileUploader = document.getElementById("informations"); 
     $(fileUploader).show(); 

     //Create a new image and insert it into the Images div. Just to be fancy, 
     //we're going to use a "FadeIn" effect from jQuery 
     var imgDiv = document.getElementById("Images"); 
     loadingImg = new Image(); 
     loadingImg.src = "../../Pictures/ajax-loader.gif"; 

     //Hide the image before adding to the DOM 
     $(loadingImg).hide(); 
     imgDiv.appendChild(loadingImg); 
     //Now fade the image in 
     $(loadingImg).fadeIn(500, null); 

     return true; 
    }); 

는 MVC보기 코드

파일 업로드가 비어있는 경우에만 내부에 들어가기 때문에 컨트롤러 코드를 게시하지 않겠습니다.

어떤 아이디어가 잘못 되었나요? 감사

매우 중요 편집

나는 다시 내 SVN 역사에 가서 무슨 일이 생긴 것을보고하기로 결정

오늘. 나는 아주 이상한 것을 발견했다. 이 기능을 사용하려면 뷰 자체 (Create.cshtml)에 jquery를 포함해야합니다. 나는 항상 _layout.cshtml에 jquery .js 파일을 포함 시키려고했지만 enougth했지만 그렇지 않았습니다! 따라서이 작업 만 수행하면 Chrome에서 작동합니다.

iframe의 "로드"이벤트가 다음을 실행하기 때문에 이미지가 표시되지 않도록 Internet Explorer에 여전히 버그가 있습니다. "런타임 오류 Microsoft JScript : 액세스가 거부되었습니다." Chrome에서 완벽하게 작동합니다. 어떤 생각 ???

EDIT 2

이 jsfiddle에 코드를 추가 코멘트에 요청했다. 나는 렌더링 된 html을 복사하고 자바 스크립트를 자르고 자바 스크립트 창에 넣으므로 어떻게 작동하는지 잘 모르겠습니다. 지금 당장은 아무 것도하지 못합니다. 왜 그런지 모르겠지만 적어도 전체 그림을 볼 수는 있습니다. 희망이 도움이됩니다. (나는 약간의 수정을 질문에있는 코드와 비교하였으나 문제는 동일 함을 주목하라.) 여기에 문제의 here!

Answer 1

많은 : _layout에서

1. JS 심판 충분
   , jQuery를하기 전에 그러나, 당신이 참조하는 $ 인라인가로드됩니다. 라인 loadingImg = new Image();이 그래서, 그 중 하나는
2. 당신이 loadingImg를 선언 결코 이름을 변경, 위험 - 당신이 중복 JS는
3. 를 참조하면 동일한 블록에 두 번 var fileUploader를 선언 제거 할 수 있습니다 끝으로 모든 스크립트를 이동하고 $(document).ready(function ({ });에 포장 암시 적으로 선언 된 전역 사용 - 다시 존재하지 않는 위험한 경우 (완전한 코드 없이는 알 수 없음)
4. 이러한 문제를 해결하면 양식을 처리하기 때문에 양식이 서버에 다시 게시되지 않아야합니다. 클라이언트 측 제출 (jQuery에서).

이러한 문제가 해결되면 Chrome, FF, IE9 및 IE10에서 동일한 문제가 발생합니다. 여기에 제가 사용했던 견해가 있습니다 :

@{ 
    ViewBag.Title = "Test"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<h2>Test</h2> 

@using (Html.BeginForm("Test", "Home", FormMethod.Post, 
       new 
       { 
        enctype = "multipart/form-data", 
        id = "ImgForm", 
        name = "ImgForm", 
        target = "UploadTarget" 
       })) 
      { 
       <div id="fileuploader"> 
        <h4>Étape 1: Choisir une photo</h4> 
        <input id="lefile" type="file" style="display:none" name="imageFile" accept="image/x-png, image/jpeg" /> 
        <div class="input-append"> 
         <input id="photoCover" class="input-large" type="text" /> 
         <a class="btn" onclick="$('input[id=lefile]').click();">Parcourir...</a> 
        </div> 
        <input id="SaveImage" type="submit" class="btn btn-success" value="Sauvegarder l'image" /> 
        <input id="SaveNoImage" type="submit" class="btn btn-danger" value="Aucune photo" /> 
       </div> 
      } 

<div id ="UploadTarget">upload target</div> 
<div id="Images"></div> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('input[id=lefile]').change(function() { 
       debugger; 
       $('#photoCover').val($(this).val()); 
      }); 

      $('#ImgForm').on('submit', function() { 
       alert('in js submit'); 
       var fileUploader = document.getElementById("fileuploader"); 
       $(fileUploader).hide(); 

       var fileUploader1 = document.getElementById("informations"); 
       $(fileUploader1).show(); 

       //Create a new image and insert it into the Images div. Just to be fancy, 
       //we're going to use a "FadeIn" effect from jQuery 
       var imgDiv = document.getElementById("Images"); 
       var loadingImg = new Image(); 
       loadingImg.src = "/content/335.gif"; 

       //Hide the image before adding to the DOM 
       $(loadingImg).hide(); 
       imgDiv.appendChild(loadingImg); 
       //Now fade the image in 
       $(loadingImg).fadeIn(500, null); 
       debugger; 
       return true; 
      }); 
     }); 
    </script>