2012-03-28 236 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

你有什麼樣的問題?你能在問題描述中更具體一點嗎? – 2012-03-28 08:30:37

+0

我們可以看到您的CSS和呈現的HTML代碼嗎? – Curt 2012-03-28 08:31:04

+1

在html和圖片中添加了什麼是錯誤的。 – Reinard 2012-03-28 08:42:05

回答

3

嘗試一個不顯眼的方式:

  1. 給你ANCOR和id

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

  2. 從jQuery的文件準備綁定點擊對話框:

    $ (函數的n(){

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

    });

  3. 此外,請確保你有jQuery和jQuery UI引用。

如果這沒有幫助 - 看看CSS。也許你只是沒有引用jQuery UI css主題。