ASP.NET MVC 3 면도기 쇼 대화 상자

사용자가 이미지를 업로드 할 수있는 대화 상자를 만들려고합니다. 하지만 대화 상자를 표시하는 데 문제가 있습니다.ASP.NET MVC 3 면도기 쇼 대화 상자

@{ 
    ViewBag.Title = "Edit"; 
} 

@Html.ActionLink("Back", "Index", "Home") 


@using (Html.BeginForm("Update", "Home", new { campaignId = Model.Campaignid })) 
{ 
    <h1>Current Campaign: @Model.Name</h1><span>(id = @Model.Campaignid)</span> 
    <h2>Landing page configurations:</h2><span>(@Model.LandingPage.ToString())</span> 
     <div> 
      <p>Image:</p> 
      <a href="#" onclick="jQuery('#dialog').dialog('open'); return false">Upload File</a> 
     </div> 
    <br /> 
    <input type="submit" value="Save" /> 
} 


    <div id="dialog" title="Upload files">   
       @using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) 
       { 
        <p> 
         <input type="file" id="fileUpload" name="fileUpload" size="23"/> 
         <input type="text" id="name" name="name" /> 
         <input type="text" id="alt" name="alt" /> 
         <input type="text" id="AlternateText" name="AlternateText" /> 
        </p> 
        <br /> 
        <p><input type="submit" value="Upload file" /></p>   
       } 
    </div>

문제는 대화 상자가 HTML 페이지에 HTML을 표시한다는 것입니다. 그리고 링크를 클릭하면 대화 상자가 나타나지 않습니다. page

<!DOCTYPE html> 

<html> 

<head> 

    <title>Edit</title> 

    <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> 

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

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

</head> 

<body> 

    <div class="page"> 

     <div id="header"> 

      <div id="title"> 

       Paycento Loyalty campaign 

      </div> 



      <div id="menucontainer"> 

       <ul id="menu"> 

        <li><a href="/">Home</a></li> 

        <li><a href="http://www.paycento.com">Paycento</a></li> 

        <li><a href="/Home/About">How it works</a></li> 

        <li><a href="/">Sign up</a></li>     

       </ul> 

      </div> 

     </div> 

     <div id="main"> 

      <div class="field-validation-error"> </div>  



<a href="/">Back</a> 

<script> 

$(document).ready(function() { 

    $(function() { $('#uploader').click(function() { $("#dialog").dialog(); }); }); 

} 

</script> 



<form action="/Home/Update?campaignId=1" method="post"> <h1>Current Campaign: My first campaign</h1><span>(id = 1)</span> 

    <h2>Landing page configurations:</h2><span>(1 1)</span> 

     <div> 

      <p>Image:</p> 

      <a href="#" id="uploader" >Upload File</a> 

     </div> 

    <hr /> 

    <h2>Redeem page</h2><span>(2 1)</span> 

     <div> 



     </div> 

    <br /> 

    <input type="submit" value="Save" /> 

</form> 



    <div id="dialog" title="Upload files">   

<form action="/Home/Upload" enctype="multipart/form-data" method="post">     <p> 

         <input type="file" id="fileUpload" name="fileUpload" size="23"/> 

         <input type="text" id="name" name="name" /> 

         <input type="text" id="alt" name="alt" /> 

         <input type="text" id="AlternateText" name="AlternateText" /> 

        </p> 

        <br /> 

        <p><input type="submit" value="Upload file" /></p>   

</form> </div> 

      <div id="footer"> 

      </div> 

     </div> 

    </div> 

</body> 

</html>

출처

2012-03-28 Reinard

어떤 종류의 문제가 있습니까? 문제 설명에 좀 더 구체적으로 설명해 주시겠습니까? –

CSS 및 렌더링 된 HTML 코드를 볼 수 있습니까? – Curt

html과 잘못된 그림을 추가했습니다. – Reinard

눈에 거슬리지 방법을 시도해보십시오 부여

당신의 ANCOR 및 ID
의 jQuery 문서 준비 바인드 클릭에서 대화 상자
<a href="#" id="uploader">Upload File</a>

$ (functio n() {

$('#uloader').click(function() { 

    $("#dialog").dialog(); 

    });

});

또한 jQuery와 jQuery UI가 모두 참조되어 있는지 확인하십시오.

이것이 도움이되지 않는다면 - CSS를 살펴보십시오. 어쩌면 jQuery UI CSS 테마를 참조하지 않았을 수도 있습니다.

출처

2012-03-28 08:53:13

ASP.NET MVC 3 면도기 쇼 대화 상자

답변

관련 문제