Ajax提交後部分視圖無法正確顯示

Question

我有下面的代碼，由於某種原因，我不打算如何工作。基本上我在網上找到這個例子，並希望適應它我的需要，但問題是，我似乎無法獲得頁面上顯示的ImageList。

的代碼如下： -

<script type="text/javascript"> 
    $(document).ready(function() { 

      var imageList = $('#imageList'); 

      //hide the imageList initially 
      imageList.hide(); 

    }); 

    var Project = { 
     save: function() { 
      var projectForm = $("#projectForm"); 
      if (projectForm.valid()) { 
       projectForm.submit(); 
      } 
      else { 
       Project.onInvalidForm(); 
      } 
     }, 
     onInvalidForm: function() { 
      //CODE FOR INVALID FORM 
     }, 
     onSaveBegin: function() { 
      //CODE FOR SAVE BEGIN 
     }, 
     onSaveSuccess: function() { 
      //CODE FOR SAVE SUCCESS 
      $('#imageList').fadeIn('slow'); 
     }, 
     onSaveFailure: function() { 
      //CODE FOR SAVE FAILURE 
     }, 
     onSaveComplete: function() { 
      //CODE FOR SAVE COMPLETE 
      $('#imageList').fadeIn('slow'); 
     } 
    }; 
</script> 


@using (Ajax.BeginForm(
    "/Create", 
    new { }, 
    new AjaxOptions 
    { 
      InsertionMode = InsertionMode.Replace, 
      OnComplete = "Project.onSaveComplete", 
      OnFailure = "Project.onSaveFailure", 
      OnSuccess = "Project.onSaveSuccess", 
      OnBegin = "Project.onSaveBegin" 
    }, 
    new { id = "projectForm", name = "projectForm" })) 
    { 
    <div > 

我似乎無法指出了什麼錯誤，並且不能夠顯示圖像列表。該代碼正在通過onSaveSuccess: function()以及onSaveCompete: function()，因爲我之前在代碼中執行了alert('')以驗證它實際上是從那裏傳遞的。

感謝您的幫助和時間

@if(Model != null) 
{ 
    @Html.Hidden("hfProjectId", Model.Project.ProjectID) 
} 

<div class="editor-label"> 
     @Html.LabelFor(m => m.Project.ProjectTitle) 
</div> 
<div class="editor-field"> 
     @Html.TextBoxFor(m => m.Project.ProjectTitle) 
     @Html.ValidationMessageFor(m => m.Project.ProjectTitle) 
</div> 
<div class="editor-label"> 
     @Html.LabelFor(m => m.Project.ProjectText) 
</div> 
<div class="editor-field"> 
     @Html.TextBoxFor(m => m.Project.ProjectText) 
     @Html.ValidationMessageFor(m => m.Project.ProjectText) 
</div> 
<p> 
     <input type="submit" value="Create" /> 
</p> 
</div> 
} 


<div id='imageList'> 
@{ 
    if (Model != null) 
    { 
     if(Model.Project.ProjectID > 0) 
     { 
      Html.Partial("~/Views/Shared/ImageUpload.cshtml", new MvcImageUploaderPartial.ViewModels.ImageModel(Model.Project.ProjectID, 2, "Edit")); 
     } 
     else 
     { 
      Html.Partial("~/Views/Shared/ImageUpload.cshtml", new MvcImageUploaderPartial.ViewModels.ImageModel(0, 0, "Create")); 
     } 
    } 
} 
</div> 

** * ** * UPDATE * ** * ** * ** * ** * ** * ** * ** * 項目負責人： -

 [HttpPost] 
    public ActionResult Create(Project project) 
    { 
     ProjectModel viewModel = new ProjectModel(); 

     if (ModelState.IsValid) 
     { 
      db.Projects.Add(project); 
      db.SaveChanges(); 
      viewModel.Project = project; 

      return View("Create", viewModel); 
     } 

     return View(project); 
    } 

ImageController： -

 public ActionResult Index() 
    { 
     ImageModel model = new ImageModel(); 

     return RedirectToAction("Create", "Project", model); 
    } 

    public ActionResult Save() 
    { 
     IEnumerable<Image> ImageList; 

     //if (!String.IsNullOrEmpty(TempData["ProjectId"].ToString())) 
     // iProjId = Convert.ToInt32(TempData["ProjectId"]); 

     foreach (string name in Request.Files) 
     { 
      var file = Request.Files[name]; 

      string fileName = System.IO.Path.GetFileName(file.FileName); 

      Image image = new Image(fileName, Request["description"]); 
      ImageModel model = new ImageModel(); 

      ImageList = model.Populate(); 
      model.Add(ImageList, image, file); 
     } 

     return RedirectToAction("Index", "Image"); 
    } 

Answer 1

我，你是不是經過UpdateTargetId的AjaxOptions看到。您應該更新如下代碼，

@using (Ajax.BeginForm(
    "/Create", 
    new { }, 
    new AjaxOptions 
    { 
      UpdateTargetId = "imageList", 
      InsertionMode = InsertionMode.Replace, 
      OnComplete = "Project.onSaveComplete", 
      OnFailure = "Project.onSaveFailure", 
      OnSuccess = "Project.onSaveSuccess", 
      OnBegin = "Project.onSaveBegin" 
    } 
    //.. 

而一個更爲重要的是，你在UpdateTargetId規定應在不將由AJAX行動返回的局部視圖主視圖元素。另外，請確保您參考了不顯眼的ajax庫。