Question

我有一个问题，到目前为止，我还没能解决它。

首先让我解释一下如何在这个简单的页面上设置内容。

我有一个用于输入新内容和编辑现有数据的视图。此视图将获得类型为类型的强类型模型。

public class Category
{
     public int CategoryID { get; set; }
     public string CategoryName { get; set; }
     public string CategoryDescription { get; set; }
     public string CategoryImage { get; set; }
}

我的控制器操作设置如下。

[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));
}

所以我得到强类型对象，然后返回JSON结果。这只是因为我可以替换客户端上的图像，因为用户选择的图像将被重命名为类别名称。

这是我的观点。

@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>
}

问题是整个页面被Json结果取代。此外，永远不会调用成功方法。也没有错误。我可以在网络上看到我得到的回复200 OK。

这是我得到的错误控制台，但对我来说没有任何意义。

为什么会发生这种情况？我用lint工具检查了Json结果，并报告它是有效的，所以没有格式错误的Json。我还要注意，我使用了ajax选项并使用了dataType，没有它和内容类型，没有它。没有区别。

Answer 1

首先，我要感谢所有人。我得到了一些很好的评论，帮助了我很多。

其次我不知道这个技巧是什么，因为我是这种网络编程的新手。我想说我在服务器端没有改变任何东西。我唯一做的就是玩ajax选项。

submitHandler: function (form, event) {
                    var formObj = $('#editForm');
                    if(formObj.valid() == false)
                        return false;
                    var formData = new FormData($('#editForm')[0]);
                    $.ajax(
                    {
                        type: 'POST',
                        data: formData,
                        dataType: 'json',
                        processData: false,
                        contentType: false,
                        success: function(responseData){
                            $('#image').attr('src', responseData.CategoryImage);
                            Materialize.toast("Successfully saved.", 3000 );
                        }
                    });
                }

processData和contentType似乎在某种程度上起到了作用。

如果我将processData置为false并完全删除contentType，我将收到内部服务器错误。如果我完全删除processData并将contentType保留为false，我将获得完整的JSON结果，该结果将完全取代我的页面，我的成功方法永远不会被调用。

如果有人想解释为什么这是必要的，这将是伟大的。

我也认为，因为我发布了一个文件，因为我必须发布表单数据而不是纯字符串，所以这更复杂。

当通过jQuery ajax调用时，MVC JsonResult替换整个页面

1 个答案: