2013-03-20 76 views
0

我有一個局部視圖,它有一個Ajax.ActionLink,點擊時應該用另一個允許用戶上傳圖像的局部視圖替換視圖(目標DIV)。我在頁面上有幾個這樣的工作,我似乎無法弄清楚爲什麼我一直在爲這個特定的404獲得一個。Ajax.ActionLink提供404找不到錯誤

這是我有:

MyProfile.cshtml保存所有諧音(租戶參考照片是更新的目標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是否需要作爲腳本包含在所有部分視圖中?

任何人都可以找到我爲什麼會得到上述錯誤?

回答

2

在您的代碼中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" 
    }) 
+0

離開我的代碼,我認爲我應該有一個GET的ActionResult返回部分_TenantUploadReferencePartial?這聽起來正確嗎? – MattSull 2013-03-20 19:11:04

+0

是的,你有權利 - 而不是改變你的視圖中的'HttpMethod',你可以刪除'HttpPost'屬性。但在我看來,你應該分開兩個案例。當您只想返回視圖並且它與GET協同工作時的第一個動作。支持上傳邏輯的POST第二項操作。 – 2013-03-20 19:27:34

+0

我已經完成了上述操作,但現在我收到了500錯誤。當我在調試模式下遍歷GET ActionResult時,它會返回PartialView,但它實際上並未更新目標DIV,並且在客戶端中收到500錯誤。我會繼續研究它。 – MattSull 2013-03-20 19:37:34