I have a problem and to this moment I haven't been able to resolve it.
Let me start by explaining how things are set up on this simple page.
I have a view that is used for entering new and editing existing data. This view will get a strongly typed model that is of type category.
public class Category
{
public int CategoryID { get; set; }
public string CategoryName { get; set; }
public string CategoryDescription { get; set; }
public string CategoryImage { get; set; }
}
My controler action is set up like this.
[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult Edit(Category category)
{
Database db = new Database();
if (!category.IsNew)
db.Category.Attach(category);
if (Request.Files.Count > 0)
{
var uploadedFile = Request.Files[0];
string fileName = string.Format("{0}.{1}", category.CategoryName, uploadedFile.ContentType.Split('/')[1]);
var path = Path.Combine(Server.MapPath("~/images/category"), fileName);
Request.Files[0].SaveAs(path);
category.CategoryImage = string.Format("/images/category/{0}", fileName);
}
if (db.Entry<Category>(category).State == System.Data.Entity.EntityState.Detached)
db.Category.Add(category);
db.SaveChanges();
Response.StatusCode = (int)HttpStatusCode.InternalServerError;
return Json(Newtonsoft.Json.JsonConvert.SerializeObject(category));
}
So I get strongly typed object and I return JSON result. This is only so I can replace the image on the client side since whatever the image user selects will get renamed to the category name.
This is my view.
@model Category
@{
var id = Model.CategoryID;
var name = Model.CategoryName;
var description = Model.CategoryDescription;
var image = Model.IsNew ? "/images/image_default.png" : Model.CategoryImage;
}
<style>
img {
width: 128px;
}
</style>
@{
ViewBag.Title = "Category";
}
<br />
<div class="card">
<div class="card-content">
<div class="card-title">
<h2 class="header">Category</h2>
</div>
<form id="editForm" method="post" enctype="multipart/form-data">
@Html.AntiForgeryToken()
<div class="center-align">
<img id="image" class="responsive-img circle" src="@image" />
</div>
<br />
<input id="CategoryID" name="CategoryID" type="hidden" value="@id" />
<div class="input-field">
<input name="CategoryName" type="text" class="" value="@name">
<label for="CategoryName" data-errord="">Name</label>
</div>
<div class="input-field">
<textarea name="CategoryDescription" class="materialize-textarea">@description</textarea>
<label for="CategoryDescription" data-error="">Description</label>
</div>
<div class="file-field input-field">
<div class="btn">
<span>Image</span>
<input name="CategoryImage" type="file" accept=".jpg,.gif,.png">
</div>
<div class="file-path-wrapper">
<input name="CategoryImagePath" class="file-path" placeholder="Upload category image" type="text">
<label for="CategoryImagePath" data-error=""></label>
</div>
</div>
<br />
<br />
<div class="card-action">
<button id="save" type="submit" class="waves-effect waves-light btn-large">Save</button>
<a id="delete" class="waves-effect waves-light btn-large">Delete</a>
<a id="back" href="@Url.Action("Index", "Category")" class="waves-effect waves-light btn-large">Back</a>
</div>
</form>
</div>
</div>
@section Script{
<script>
$('#delete').click(function(event){
event.preventDefault();
var form = $('#editForm');
$.ajax(
{
url: '@Url.Action("Delete", "Category")',
data: JSON.stringify({id: $('#CategoryID').val()}),
type: 'DELETE',
contentType: "application/json;charset=utf-8"
});
});
$("#editForm").validate({
errorClass: 'invalid',
validClass: "valid",
rules: {
CategoryName: {
required: true,
maxlength: 64
},
CategoryDescription: {
required: true,
maxlength: 512
},
CategoryImagePath: {
required: @Model.IsNew.ToString().ToLower()
}
},
//For custom messages
messages: {
CategoryName: {
required: "Name is required",
maxlength: $.validator.format("Maximum nuber of characters is {0}")
},
CategoryDescription: {
required: "Description is required",
maxlength: $.validator.format("Maximum nuber of characters is {0}")
},
CategoryImagePath: {
required: "Please select image for category"
}
},
submitHandler: function () {
var form = $('#editForm');
if(form.valid() == false)
return;
var formData = new FormData($('#editForm')[0]);
$.ajax(
{
async: true,
type: 'POST',
data: formData,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
success: function(data, textStatus, jqXHR){
alert('');
$('#image').attr('src', jQuery.parseJSON(data).CategoryImage);
Materialize.toast("Successfully saved.", 3000 );
},
error: function(jqXHR, textStatus, errorThrown){
alert('');
}
})
},
errorPlacement: function (error, element) {
element.next("label").attr("data-error", error.contents().text());
}
});
</script>
}
The problem is that the whole page gets replaced by Json result. Furthermore, success method never gets invoked. Neither does error. I can see in network that I got response 200 OK.
This is error console I get but it makes no sense to me.
Any ideas why this is happening? I checked the Json result with lint tool and it reports that it is valid so no malformed Json. I also like to note that I played with ajax options and went with dataType and without it as as well as with content type and without it. It makes no difference.
