Home/ Questions/Q 7698857
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T22:20:30+00:00

I’m trying to create a dialog which will allow users to upload an image.

  • 0

I’m trying to create a dialog which will allow users to upload an image. But I’m having some issues on displaying the dialog.

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

The issue is that the dialog shows on the html page the HTML.
And when I click on the link the dialog doesn’t pop up.
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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try an unobtrusive way:

    1. Give your anchor and id

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

    2. From jQuery document ready bind click to dialog:

    $(function() {
  $('#uploader').click(function () {
     $( "#dialog" ).dialog();
  });
});
    1. Also make sure you have both jQuery and jQuery UI referenced.

    If this doesn’t help – look into CSS. Maybe you just don’t have the jQuery UI css theme referenced.

    • 0