2012-03-28 31 views
2

ユーザーが画像をアップロードできるようにするダイアログを作成しようとしています。しかし、私はダイアログを表示する際にいくつか問題があります。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> 
+1

あなたはどのような問題を抱えていますか?問題の説明で少し具体的になりますか? –

+0

CSSとレンダリングされたHTMLコードを確認できますか? – Curt

+1

何が間違っているのHTMLと画像に追加されました。 – Reinard

答えて

3

控えめな方法で試してみてください:与える

  1. をごancorとid

    jQueryのドキュメント準備バインドクリックからダイアログに

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

  2. $ (機能n(){

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

    });

  3. また、jQueryとjQuery UIの両方が参照されていることを確認してください。

これは役に立ちません - CSSを見てください。 jQuery UIのcssテーマが参照されていない可能性があります。