Question

我正在尝试创建一个允许用户上传图片的对话框。但是我在显示对话框时遇到了一些问题。

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

Answer 1

尝试不引人注目的方式：

给你的ancor和id

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

从jQuery文档准备好绑定到对话框：

$（function（）{

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

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

  });

}）;

还要确保引用了jQuery和jQuery UI。

如果这没有帮助 - 请查看CSS。也许你只是没有引用jQuery UI css主题。

ASP.NET MVC 3 Razor show对话框

1 个答案: