javascript - 使用 ajax 时 asp mvc 显示不更新

Question

我一直在遵循我之前在项目中使用的一些ajax功能的示例，但是我遇到了一个症结，我当前的功能似乎不起作用，这是我能看到的唯一区别命名partialView我正在返回并且我正在尝试更新正在显示的图像(尽管我猜测这不会产生影响)。

目标允许用户选择和上传图像，并使用ajax显示新上传的图像

问题临时和最终目标文件夹中的图像都会在初始页面加载时显示，但上传完成后似乎不会发生部分页面刷新

Controller

[HttpPost]
public ActionResult _Image(TakeOn to, IEnumerable<HttpPostedFileBase> FileUpload)
{
    to.ImageUpload(FileUpload);//takes all files in FileUpload and places them in a temporary folder
    return PartialView("_Rooms", to);
}

js(ajax)

$(".row").on("change", ".imgInput", function (e) {
    var roomID = $(this).siblings("input:hidden").val();
    $("#roomIdentifier").val(roomID);
    var formData = new FormData(jQuery('#takeOn').get(0)) // store form data to pass on to the controller
    $.ajax({
        type: "POST",
        url: "/Property/_Image",
        contentType: false,
        data: formData,
        dataType: 'json',
        encode: true,
        async: false,
        processData: false,
        cache: false,
        success: function (data) {
            //$(".imgUploader").html(data);//first attempt, both tried by targetting .imgUploader and #accordion
            $("#accordion").replaceWith(("#accordion", html));
        },
        error: function (request, status, error) {
        }
    });

    //clear input value
    var input = $(this);
    input.replaceWith(input.val('').clone(true));
    //clear identifier
    $("#roomIdentifier").val('');
});

View (_Rooms.cshtml) - (这是保存在 #accordion div 中的部分 View )

@model TjsPropertyPeople.Web.Admin.ViewModels.Property.TakeOn

@for (int i = 0; i < Model.Rooms.Count; i++)
{
<div class="panel panel-default room">
    <div class="panel-heading">
        <h4 class="panel-title">
            @{ ViewBag.Title = Model.Rooms[i].Title == null ? "New Room" : Model.Rooms[i].Title; }
            @{ ViewBag.titleID = "title" + i; }
            <a id=@ViewBag.titleID data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="collapsed">@ViewBag.Title</a>
        </h4>
    </div>
    <div class="panel-collapse collapse in" style="height: auto;">
        <div class="panel-body">
            <row class="col-lg-4">
                @{ViewBag.roomID = "roomtitle" + i;}
                @Html.TextBoxFor(m => m.Rooms[i].Title, null, new { @id = ViewBag.roomID, @class = "form-control roomTitle", @placeholder = "Title" })
            </row>
            <row class="col-lg-4">
                @Html.TextBoxFor(m => m.Rooms[i].Width, null, new { @class = "form-control", @placeholder = "Width" })
            </row>
            <row class="col-lg-4">
                @Html.TextBoxFor(m => m.Rooms[i].Length, null, new { @class = "form-control", @placeholder = "Length" })
                <label class="checkbox-inline">
                    @Html.CheckBoxFor(m => Model.Rooms[i].Overall) Overall
                </label>
            </row>
            <row class="col-lg-6">
                @Html.TextAreaFor(m => m.Rooms[i].Description, new { @class = "form-control", @placeholder = "Description" })
            </row>
            <row class="col-lg-6">
                <div class="imgUploader">
                    <div>
                        <div style="height: auto; width: auto; position: relative;">
                            @{ ViewBag.TempPath = Server.MapPath("~/App_Uploads/Images/Temp/" + Model.PropertyID + "/" + Model.Rooms[i].RoomID + "/"); }
                            @{ ViewBag.UploadedPath = Server.MapPath("~/App_Uploads/Images/Property/" + Model.PropertyID + "/" + Model.Rooms[i].RoomID + "/"); }
                            @{ ViewBag.TempExists = Directory.Exists(ViewBag.TempPath); }
                            @{ ViewBag.UploadedExists = Directory.Exists(ViewBag.UploadedPath); }
                            @{ List<string> files = new List<string>(); }

                            @if (ViewBag.TempExists)
                            {
                                string[] f = Directory.GetFiles(ViewBag.TempPath);
                                files.AddRange(f);
                            }
                            @if (ViewBag.UploadedExists)
                            {
                                string[] f = Directory.GetFiles(ViewBag.UploadedPath);
                                files.AddRange(f);
                            }
                            @foreach (var file in files)
                            {
                                string name = file.Substring(file.LastIndexOf("App_Uploads"));
                                name = @"~\" + name;
                                <img class="pull-left panel" src="@Url.Content(name)" height="50" />
                                @*<div class="delete">X</div>*@
                            }
                        </div>
                    </div>
                </div>
                <input class="imgInput" type="file" name="FileUpload" multiple accept="image/jpeg">
                @Html.HiddenFor(m => m.Rooms[i].RoomID)
            </row>
        </div>
    </div>
</div>
}

注意我意识到 View 可以写得更好，我只是不知道此时如何从 View 中抽象出所有不必要的代码，并且觉得我应该在“玩”另一个我不喜欢的区域之前让功能正常工作完全理解(尽管我反对在这方面提供的任何建议)

编辑

在脚本的错误部分我添加了 alert("Error: " + error)它返回了这个

javascript error syntax: unexpected token <

我用谷歌搜索并找到了this answer ，我的代码中似乎有很多地方可能导致此问题(如果这个答案适用于我)。那么我该如何开始追查问题的根源呢？

Answer 1

尝试将 $ajax.success 函数中的这一行更改为:

$("#accordion").replaceWith(("#accordion", html));

致:

 $("#accordion").html(data);

("#accordion", html) 对我来说看起来像是无效的 jQuery，而且我在您的代码中也没有看到名为 html 的 var。您的部分 HTML 响应变量名为 data 而不是 html。

如果这不起作用，请将以下行添加到 $ajax.success 函数中:

console.log(data);

并在浏览器 F12 开发者工具 Console 中看到响应是您的 Partial HTML