大家好日子,
我有一个小问题,我希望这个网站的专家可以帮助我,我是MVC 3 Razor的新手所以请光临我。
我有一个视图,用户可以按如下方式编辑他的个人资料
@using (Html.BeginForm("EditProfile", "Profile", FormMethod.Post, new { @class = "form-horizontal" }))
{<div class="container">
@if (!string.IsNullOrWhiteSpace(Model.ProfileDetails.ProfileError))
{
<div class="alert alert-error">
<a class="close" data-dismiss="alert" href="#">x</a>
@Html.DisplayFor(m => m.ProfileDetails.ProfileError).ToString()
</div>
}
<div class="row">
<div class="well span6 offset0">
<div class="control-group">
<label class="control-label">Username</label>
<div class="controls">
@Html.TextBoxFor(m => m.ProfileDetails.UserName, new { @placeholder = "Username", data_role = "Username", @maxlength = "25" })
</div>
</div>
<div class="control-group">
<label class="control-label">Firstname</label>
<div class="controls">
@Html.TextBoxFor(m => m.ProfileDetails.Firstname, new { @placeholder = "Firstname", @maxlength = "25" })
</div>
</div>
<div class="control-group">
<label class="control-label">Surname</label>
<div class="controls">
@Html.TextBoxFor(m => m.ProfileDetails.Surname, new { @placeholder = "Surname", @maxlength = "25" })
</div>
</div>
<div class="control-group">
<label class="control-label">Email Address</label>
<div class="controls">
@Html.TextBoxFor(m => m.ProfileDetails.EmailAddress, new { @placeholder = "Email Address", @maxlength = "50" })
</div>
</div>
</div>
<div class="well span6">
<div class="control-group">
<label class="control-label">Gender</label>
<div class="controls">
@Html.DropDownListFor(x => x.ProfileDetails.Gender, Model.ProfileDetails.UsersGender)
</div>
</div>
<div class="control-group">
<label class="control-label">Date of Birth</label>
<div class="controls">
@Html.TextBoxFor(m => m.ProfileDetails.DateOfBirth, new { @placeholder = "Date of Birth", @class = "form_datetime", @maxlength = "10" })
</div>
</div>
<div class="control-group">
<label class="control-label">Height</label>
<div class="controls">
@Html.DropDownListFor(x => x.ProfileDetails.UsersHeight, Model.ProfileDetails.UsersHeightList)
</div>
</div>
<div class="control-group">
<label class="control-label">Current Gym</label>
<div class="controls">
@Html.DropDownListFor(x => x.ProfileDetails.CurrentGym, Model.ProfileDetails.UsersGymList)
</div>
</div>
</div>
</div>
<div class="row ">
<div class="control-group offset0">
<label class="control-label">About Me</label>
<div class="controls span8">
@Html.TextAreaFor(m => m.ProfileDetails.AboutMe, new { @placeholder = "About me, describe your self", @maxlength = "1000" })
</div>
</div>
<div class="control-group offset0">
<label class="control-label">Interests</label>
<div class="controls span8">
@Html.TextAreaFor(m => m.ProfileDetails.Interests, new { @placeholder = "Interests, what do you like doing?", @maxlength = "1000" })
</div>
</div>
</div>
</div>
<p>
<input type="submit" value="Save Profile" class="btn btn-block btn-success" />
</p>
}
现在理想情况下,我希望用户上传自己的图片并显示如下http://www.bootsnipp.com/snipps/thumbnails-like-bootsnipp
现在这个上传图像部分可能在网站的其他地方使用,所以我认为使用的理想选择是部分视图但是当我使用Html.AjaxBeginForm创建部分视图时,这会在页面上呈现,当我按下上传按钮,当它返回时它会转到相关的控制器,它会丢失所有的样式/页面等,所以我只剩下屏幕上的局部视图?
在我看来,我设想用户可以将图像上传保存到数据库并返回到视图而无需重建孔页
我看了下面的插件http://blueimp.github.io/jQuery-File-Upload/这是一个很好的工具,我把我的帽子带给了创造它的人,但我正在寻找更轻量级的东西。
上述情况可能吗?
感谢。
更新 我已将上述fileuploader插入我的网站
http://blueimp.github.io/jQuery-File-Upload/
但是当它保存图像并返回我刚刚上传的图像时,它不再是缩略图吗?
我检查了我的js文件,以确保按正确的顺序判断我下载的演示并且匹配
<meta charset="utf-8" />
<title>EditProfile</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic' rel='stylesheet' type='text/css' />
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/Content/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<link href="/Content/bootstrap/css/bootstrap-datepicker.css" rel="stylesheet" type="text/css" />
<link href="/Content/bootstrap/css/bootstrap-image-gallery.min.css" rel="stylesheet" type="text/css" />
<link href="../../Content/jquery.fileupload-ui.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.20.min.js" type="text/javascript"></script>
<script src="../../FileUpload/tmpl.min.js" type="text/javascript"></script>
<script src="../../FileUpload/canvas-to-blob.min.js" type="text/javascript"></script>
<script src="../../FileUpload/load-image.min.js" type="text/javascript"></script>
<script src="../../Content/bootstrap/js/bootstrap-image-gallery.min.js" type="text/javascript"></script>
<script src="/Content/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/Content/bootstrap/js/bootstrap-dropdown.js" type="text/javascript"></script>
<script src="/Content/bootstrap/js/bootstrap-datepicker.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-2.5.3.js" type="text/javascript"></script>
<script src="/Scripts/jquery-mygymdate.js" type="text/javascript"></script>
<script src="../../FileUpload/jquery.iframe-transport.js" type="text/javascript"> </script>
<script src="../../FileUpload/jquery.fileupload.js" type="text/javascript"></script>
<script src="../../FileUpload/jquery.fileupload-ip.js" type="text/javascript"></script>
<script src="../../FileUpload/jquery.fileupload-ui.js" type="text/javascript"></script>
<script src="../../FileUpload/locale.js" type="text/javascript"></script>
<script src="../../FileUpload/main.js" type="text/javascript"></script>
任何人都可以发现任何可能导致图像尺寸不同而不是缩略图的东西吗?