logo标签列表

ASP.NET MVC 3 Razor显示对话框

jqueryasp.net-mvcasp.net-mvc-3razordialog
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代码，而当我点击链接时，对话框没有弹出。 页面 
<!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
你遇到了什么问题？你能更具体地描述一下你的问题吗？ - Darin Dimitrov
我们能看到你的CSS和渲染后的HTML代码吗？ - Curtis
1
已添加 HTML 代码和错误截图。 - Reinard
1个回答
3

尝试一种不显眼的方式：

  1. 给你的锚点和id

    <a href="#" id="uploader">上传文件</a>

  2. 在jQuery文档就绪后将单击事件绑定到对话框：

$(function() {
  $('#uploader').click(function () {
     $( "#dialog" ).dialog();
  });
});
  1. 同时确保你已经引用了jQuery和jQuery UI。

如果这不能解决问题，可以查看CSS。也许你没有引用jQuery UI的CSS主题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接