Ajax.ActionLink 给出 404 not found 错误

Question

我有一个带有Ajax.ActionLink 的局部视图，单击该视图时应将视图（目标 DIV）替换为另一个允许用户上传图像的局部视图。我在页面上有几个有效的，我似乎无法弄清楚为什么我一直为这个特定的一个 404。

这是我所拥有的：

MyProfile.cshtml 包含所有部分（tenant-reference-photos 是更新目标 DIV）：

<div class="row-fluid">
    <div class="span6 well-border" id="tenant-reference-photos">
        @Html.Partial("~/Views/Tenants/_TenantReferencePhotosPartial.cshtml", Model)
    </div>
    <div class="span6 well-border" id="tenant-viewings">
        @Html.Partial("~/Views/Tenants/_TenantViewingsPartial.cshtml", Model)
    </div>
</div>

_TenantReferencePhotosPartial.cshtml（ActionLink 在这里给出 404）：

<div class="row-fluid">
@if (Model.ReferencePhotos == null)
{
    <h3>You haven't uploaded any references! 
    @Ajax.ActionLink("Upload now?", // on click 404 returned in developer tools in Chrome
        "UploadReference",
        new AjaxOptions
        {
            UpdateTargetId = "tenant-reference-photos",
            InsertionMode = InsertionMode.Replace,
            HttpMethod = "GET",
            LoadingElementId = "ajax-loader"
        })
    </h3>
}
</div>

下面的代码返回上面的部分：

[HttpGet]
public ActionResult TenantReferencePhotos()
{
    var currentTenant = tenantRepository.GetLoggedInTenant();
    return PartialView("_TenantReferencePhotosPartial", currentTenant.ReferencePhotos.ToList());
}

以下ActionResult 是Ajax.ActionLink 中未调用的内容并给出404 错误：

[HttpPost]
public ActionResult UploadReference(HttpPostedFileBase file, Tenant tenant)
{
    if (file != null)
    {
        if (file.ContentLength > 10240)
        {
            ModelState.AddModelError("file", "The size of the file should not exceed 10 KB");
            return View();
        }

        var supportedTypes = new[] { "jpg", "jpeg", "png", "JPG", "JPEG", "PNG" };
        var fileExt = System.IO.Path.GetExtension(file.FileName).Substring(1);

        if (!supportedTypes.Contains(fileExt))
        {
            ModelState.AddModelError("photo", "Invalid type. Only the following types (jpg, jpeg, png) are supported.");
            return View();
        }

        using (var db = new LetLordContext())
        {
            var reference = db.Image.Create<ReferencePhoto>();

            // Convert HttpPostedFileBase to byte array
            MemoryStream target = new MemoryStream();
            file.InputStream.CopyTo(target);
            byte[] photo = target.ToArray();

            reference.File = photo;
            reference.Format = fileExt;
            reference.DateUploaded = DateTime.Now.Date;
            reference.Description = "";
            reference.Name = "";

            db.Image.Add(reference);
            db.SaveChanges();

            return PartialView("_TenantReferencePhotosPartial", file);
        }
    }
    else
    {
        return View();
    }
}

为了完整起见，这里是可以上传图片的部分视图：

<div>
@using (Ajax.BeginForm("UploadReference", "Tenants", FormMethod.Post,
   new AjaxOptions
   {
       InsertionMode = InsertionMode.Replace,
       HttpMethod = "POST",
       UpdateTargetId = "tenant-reference-photos"
   }))
{
    @Html.ValidationSummary(true)
    @Html.AntiForgeryToken()
    <div>
        Select a file:
        <input type="file" name="file" />
        <input type="submit" value="UploadReference" />
    </div>
}
</div>

引用了 MyProfile.cshtml 中的所有脚本。即使在 Layout.cshtml 和/或 MyProfile.cshmtml 中引用 unobtrusive-ajax.js 是否需要作为脚本包含在所有部分视图中？

谁能发现我收到上述错误的原因？

Answer 1

在您的代码中，UploadReference 装饰有HttpPost 属性，因此只有在您进行 POST 时才能访问它。在您看来，您已将 HttpMethod 配置为 GET。当您将其更改为 POST 时，它应该可以工作：

@Ajax.ActionLink("Upload now?",
    "UploadReference",
    new AjaxOptions
    {
        UpdateTargetId = "tenant-reference-photos",
        InsertionMode = InsertionMode.Replace,
        HttpMethod = "POST",
        LoadingElementId = "ajax-loader"
    })