我正在尝试创建一个对话框,让用户上传图片。但是在显示对话框方面遇到了一些问题。
问题在于对话框显示的是HTML代码,而当我点击链接时,对话框没有弹出。
@{
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代码,而当我点击链接时,对话框没有弹出。
![页面](https://istack.dev59.com/dpxO9.webp)
<!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>