I have this:
View:
<div id="tabs-2">
@using (Ajax.BeginForm("EditPhotos", "Account",
new AjaxOptions()
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "Post",
},
new { enctype = "multipart/form-data"}
))
//new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Photos</h4>
<hr />
@Html.ValidationSummary(true)
@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 />
<img width="200" height="150" src="@Url.Action("GetImage", "Account", new { id = Model.Id })">
<input type="file" name="file" />
</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>
and jquery:
@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-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>
$(document).ready(function () {
$("#tabs").tabs();
$("#tabs").tabs("select", window.location.hash);
//var param = $(document).getUrlParam('selectedTab');
//$('#tabs').tabs('select', param);
});
</script>
}
and controller action method:
[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 View(userprofile);
}
oke, I can save the photo, and when I save the photo the current tab stays the selected tab. But after save the screen goes up. So it seems a full post back and not a partial post back. Becauase before I save I see the three tabs. but after I save the tabs spring up. But I do a ajax call. so how can that?
Thank you
oke, I have it now like this:
@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-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>
$(document).ready(function () {
$("#tabs").tabs();
$(document).on("click", ".btn", function () {
$("#tabs").tabs("select", window.location.hash);
//var param = $(document).getUrlParam('selectedTab');
//$('#tabs').tabs('select', param);
});
});
</script>
}
because if I do like this:
$(document).on("click", ".btn", function () {
$("#tabs").tabs();
$("#tabs").tabs("select", window.location.hash);
//var param = $(document).getUrlParam('selectedTab');
//$('#tabs').tabs('select', param);
});
I dont see the tabs anymore
and I have this:
<div class="pull-left">
<div class="col-md-offset-0">
<input type="button" value="Save" class="btn btn-default pull-left" />
</div>
</div>
</div>
But what do you mean you dont see the Ajax call?
I have this:
<div id="tabs-2">
@using (Ajax.BeginForm("EditPhotos", "Account",
new AjaxOptions()
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "Post",
},
new { enctype = "multipart/form-data"}
))
//new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Photos</h4>
<hr />
etc...
but still the screen goes up, after save
ok, I have it now like this:
$(document).ready(function () {
$.ajax({
url: resolveUrl("/Account/EditPhotos/"),
type: "POST",
processData: false,
contentType: false,
data: data,
success: function (response) {
//code after success
},
error: function (er) {
alert(er);
}
});
});
but still the page goes up
If I do this:
$(document).on("click", ".btn", function(){
$("#ajaxUploadForm").ajaxForm({
iframe: true,
type: 'POST',
dataType: "json",
cache: false,
timeout: 1200000,
async: false,
beforeSubmit: function () {
//Do something here if needed like show in progress message
},
//success: function (result) {
// alert("sucess"
// },
error: function (xhr, textStatus, errorThrown) {
alert("Error uploading file");
}
});
});
with:
<div class="pull-left">
<div class="col-md-offset-0">
<input type="button" value="Save" class="btn btn-default pull-left" />
</div>
</div>
then nothing happens,
