使用ajax時asp mvc顯示未更新

Question

我一直在跟隨我在項目中較早使用的一些ajax功能的示例，但是我遇到了一個棘手的問題，即我當前的功能似乎無法正常工作，唯一的區別是我看到的是命名partialView我正在返回並且正在嘗試更新正在顯示的圖像（盡管我猜這不會有所作為）。

目的允許用戶選擇和上傳圖像，並使用ajax顯示新上傳的圖像

問題臨時和最終目標文件夾中的圖像均在初始頁面加載時顯示，但上傳完成后似乎不會發生部分頁面刷新

調節器

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

視圖（_Rooms.cshtml）-（這是#accordion div中保存的局部視圖）

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

請注意，我意識到可以更好地編寫視圖，但我不知道此時該如何從視圖中提取所有不必要的代碼，因此我覺得在“玩”我不喜歡的另一個區域之前，我應該使功能正常工作不能完全理解（盡管我反對這方面可以提供的任何建議）

編輯

在腳本的錯誤部分，我添加了alert("Error: " + error)並返回了

javascript error syntax: unexpected token <

我已經用谷歌搜索並找到了這個答案 ，我的代碼中似乎有很多地方可能導致這個問題（如果這個答案適用於我）。 那么，我將如何開始追蹤問題的根源？

Answer 1

嘗試從以下位置更改$ajax.success函數中的這一行：

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

至：

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

("#accordion", html)在我看來像是無效的jQuery，在您的代碼中也沒有看到稱為html ("#accordion", html) 。 您的部分HTML響應變量名為data而不是html 。

如果那不起作用，請將以下行添加到$ ajax.success函數中：

console.log(data);

並在瀏覽器F12開發人員工具Console看到響應是您的部分HTML

Answer 2

感謝Brian Ogden，我得以解決此問題。

如前所述，我需要改變

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

至：

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

但這帶來了另一個問題syntax error: unexpected token <

這是由於未關閉html標簽而導致的：

<input class="imgInput" type="file" name="FileUpload" multiple accept="image/jpeg">

至

<input class="imgInput" type="file" name="FileUpload" multiple accept="image/jpeg" />

徹底解決了。 我想知道為什么格式錯誤的標簽會阻止ajax調用正常工作