我有这个:
查看:
@model ContosoUniversity.Models.UserProfile
@{
ViewBag.Title = "Edit";
}
<h2>EDIT</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Personal information</a></li>
<li><a href="#tabs-2">Photos</a></li>
<li><a href="#tabs-3">The Bike</a></li>
</ul>
<div id="tabs-1">
@using (Html.BeginForm("Edit", "Account", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Lola Biker</h4>
<hr />
@Html.ValidationSummary(true)
@Html.HiddenFor(model => model.Id)
<form class="form-horizontal">
@Html.ActionLink("Change your password", "Manage")
<div class="form-group">
@Html.LabelFor(m => m.UserName, new { @class = "control-label col-xs-2" })
@Html.TextBoxFor(m => m.UserName, new { @class = "form-control", style = "width: 250px;" })
</div>
<div class="form-group">
@Html.LabelFor(m => m.Email, new { @class = "control-label col-xs-2" })
@Html.TextBoxFor(m => m.Email, new { @class = "form-control", style = "width: 250px;" })
</div>
<div class="form-group ">
@Html.LabelFor(m => m.FirstName, new { @class = "control-label col-xs-2" })
@Html.TextBoxFor(m => m.FirstName, new { @class = "form-control", style = "width: 250px;" })
</div>
<div class=" form-group">
@Html.LabelFor(m => m.LastName, new { @class = "control-label col-xs-2" })
@Html.TextBoxFor(m => m.LastName, new { @class = "form-control", style = "width: 250px;" })
</div>
<div class="form-group">
@Html.LabelFor(m => m.Motto, new { @class = "control-label col-xs-2" })
@Html.TextAreaFor(m => m.Motto, new { @class = "form-control", style = "width: 250px;" })
</div>
<div class="form-group">
@Html.LabelFor(m => m.PlaceOfBirth, new { @class = "control-label col-xs-2" })
@Html.TextBoxFor(m => m.PlaceOfBirth, new { @class = "form-control", style = "width: 250px;" })
</div>
<div class="form-group">
@Html.LabelFor(m => m.HowManyBikes, new { @class = "control-label col-xs-2" })
@Html.TextBoxFor(m => m.HowManyBikes, new { @class = "form-control", style = "width: 250px;" })
</div>
<div class="form-group">
@Html.LabelFor(m => m.BesideYourBeth, new { @class = "control-label col-xs-2" })
@Html.TextBoxFor(m => m.BesideYourBeth, new { @class = "form-control", style = "width: 250px;" })
</div>
<div class="form-group">
@Html.LabelFor(m => m.NicestRide, new { @class = "control-label col-xs-2" })
@Html.TextBoxFor(m => m.NicestRide, new { @class = "form-control", style = "width: 250px;" })
</div>
<div class="form-group">
@Html.LabelFor(m => m.WorstRide, new { @class = "control-label col-xs-2" })
@Html.TextBoxFor(m => m.WorstRide, new { @class = "form-control", style = "width: 250px;" })
</div>
<div class="form-group">
@Html.LabelFor(m => m.AmountKmPerYear, new { @class = "control-label col-xs-2" })
@Html.TextBoxFor(m => m.AmountKmPerYear, new { @class = "form-control", style = "width: 250px;" })
</div>
<div class="form-group">
@Html.LabelFor(m => m.AverageSpeed, new { @class = "control-label col-xs-2" })
@Html.TextBoxFor(m => m.AverageSpeed, new { @class = "form-control", style = "width: 250px;" })
</div>
<div class="form-group">
@Html.LabelFor(m => m.AbleToChatWhileRiding, new { @class = "control-label col-xs-2" })
@Html.TextBoxFor(m => m.AbleToChatWhileRiding, new { @class = "form-control", style = "width: 250px;" })
</div>
<div class="form-group">
@Html.LabelFor(m => m.PhoneNumber, new { @class = "control-label col-xs-2" })
@Html.TextBoxFor(m => m.PhoneNumber, new { @class = "form-control", style = "width: 250px;" })
</div>
</form>
<br />
<div class="pull-left">
<div class="col-md-offset-0">
<input type="submit" value="Save" class="btn btn-default pull-left" />
</div>
</div>
</div>
}
<br /><br />
<div>
@Html.ActionLink("Back to List", "Index")
</div>
</div>
<div id="tabs-2">
<div id="tabs-2">
@using (Ajax.BeginForm("EditPhotos", "Account", new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data" } ))
//new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Photos</h4>
<hr />
@Html.HiddenFor(model => model.Id)
<form class="form-horizontal">
<div class="editor-label">
@Html.LabelFor(model => model.DisplayItem)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.DisplayItem)
</div>
<div id="upload-choices">
<div class="editor-label">
@Html.LabelFor(m => m.Image)
@Html.ValidationMessageFor(model => model.Image)
</div>
<div class="editor-row">
@Html.ValidationSummary(true)
</div>
</div>
<br />
<div class="table-responsive">
<table class="table">
<tr>
<th><img width="200" height="150" src="@Url.Action("GetImage", "Account", new { id = Model.Id })"></th>
</tr>
</table>
</div>
<input type="file" name="file" class="filestyle" data-buttontext="Find file">
</form>
<br />
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success">0%</div>
</div>
<div id="status"></div>
<br />
@*@Html.ActionLink("Upload photos", "Upload")*@
<div class="pull-left">
<div class="col-md-offset-0">
<input type="submit" value="Save" id="Id" class="btn btn-default pull-left" />
</div>
</div>
</div>
}
<br /><br />
<div>
@Html.ActionLink("Back to List", "Index")
</div>
</div>
<div id="tabs-3">
Content for Tab 3 goes here.<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
</div>
<br /><br />
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts
{
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.11.0.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.form.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.10.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap-filestyle.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.form.min.js")" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#tabs").tabs();
// $(document).on("click", ".btn", function () {
// $("#tabs").tabs("select", window.location.hash);
// $(":file").filestyle({ size: "sm" });
// $(":file").filestyle({ buttonText: "Find file" });
//});
});
$(document).ready(function () {
var bar = $('.progress-bar');
var percent = $('.progress-bar');
var status = $('#status');
$('form').ajaxForm({
beforeSend: function () {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function (event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
success: function () {
var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function (xhr) {
status.html(xhr.responseText);
}
});
})();
</script>
}
和控制器操作:
[HttpPost]
public ActionResult EditPhotos(UserProfile userprofile,HttpPostedFileBase file)
{
if (file != null && file.ContentLength > 0)
{
// extract only the fielname
var fileName = Path.GetFileName(file.FileName);
// store the file inside ~/App_Data/uploads folder
var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
file.SaveAs(path);
}
if (ModelState.IsValid)
{
string username = User.Identity.Name;
// Get the userprofile
UserProfile user = db.userProfiles.FirstOrDefault(u => u.UserName.Equals(username));
// Update fields
user.Image = new byte[file.ContentLength];
file.InputStream.Read(user.Image, 0, file.ContentLength);
user.ImageMimeType = file.ContentType;
db.Entry(user).State = EntityState.Modified;
db.SaveChanges();
return Redirect(Url.Action("Edit", "Account") + "#tabs-2");
}
return PartialView(userprofile);
}
关于tab2
但是在我保存之后,视图呈现了两次,所以我在这一行放了一个断点:
user.Image = new byte[file.ContentLength];
,我收到了消息:
An exception of type 'System.NullReferenceException' occurred in ContosoUniversity.dll but was not handled in user code
Additional information: Object reference not set to an instance of an object. file = null
但如果我继续,那么它再次循环并将文件保存到数据库。但是第一次是file = null,但是如果我继续保存文件,那么保存图像后视图现在也会正确显示。
谢谢
上传前
上传后
:
哦,我把它做得很少。见:
查看:
@model ContosoUniversity.Models.UserProfile
@{
ViewBag.Title = "Edit";
}
<h2>EDIT</h2>
@using (Html.BeginForm("EditPhotos", "Account", FormMethod.Post))
{
@Html.AntiForgeryToken()
<input type="file" name="file"><br>
<input type="submit" value="Upload File to Server">
}
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success">0%</div>
</div>
<div id="status"></div>
<br /><br />
<div>
@Html.ActionLink("Back to List", "Index")
</div>
<br /><br />
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts
{
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.11.0.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.form.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.10.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap-filestyle.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.form.min.js")" type="text/javascript"></script>
<script>
$(document).ready(function () {
var bar = $('.progress-bar');
var percent = $('.progress-bar');
var status = $('#status')
$('form').ajaxForm({
beforeSend: function () {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function (event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
success: function () {
var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function (xhr) {
status.html(xhr.responseText);
}
});
})();
</script>
}
控制器操作:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult EditPhotos(UserProfile userprofile,HttpPostedFileBase file)
{
if (file != null)
{
// extract only the fielname
var fileName = Path.GetFileName(file.FileName);
// store the file inside ~/App_Data/uploads folder
var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
file.SaveAs(path);
}
if (ModelState.IsValid)
{
string username = User.Identity.Name;
// Get the userprofile
UserProfile user = db.userProfiles.FirstOrDefault(u => u.UserName.Equals(username));
// Update fields
user.Image = new byte[file.ContentLength];
file.InputStream.Read(user.Image, 0, file.ContentLength);
user.ImageMimeType = file.ContentType;
db.Entry(user).State = EntityState.Modified;
db.SaveChanges();
return Redirect(Url.Action("Edit", "Account"));
}
return View(userprofile);
}
但上传图片后仍然看起来像这样: