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

view（_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>
}

注意我意识到这个视图可以写得更好，我只是不知道如何从视图中抽象出所有不必要的代码，并且觉得我应该在＃34;播放之前使用这些功能。还有一个我不完全理解的领域（虽然我反对任何可以在这个领域提供的建议）

修改

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

javascript error syntax: unexpected token <

我用Google搜索并发现this answer，我的代码中似乎有很多地方可能导致此问题（如果此答案适用于我）。那么我该如何开始追踪问题的根源呢？

Answer 1

尝试在$ajax.success函数中更改此行：

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

要：

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

("#accordion", html)对我来说看起来像无效的jQuery，我也没有在你的代码中看到名为html的var。您的部分HTML响应var名为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调用

使用ajax时，asp mvc显示不会更新

2 个答案: