MVC Ajax未加載部分視圖在div中，加載新頁面

Question

我目前正在使用MVC 1.0，並且從未使用過AJAX，並且使用ASP.Net MVC之前只有有限的經驗（從一週前開始） 。我試圖設置一個表（這是建立/是在一個局部視圖）填充信息從一個數據庫，允許用戶快速添加刪除記錄到數據庫右或從表中。我正在嘗試使用AJAX來完成此操作，因爲我不想重新加載其他頁面上的其他信息。這是一個快速模板。

ROW1：（文本框）添加

2行：名1 刪除

ROW3：名稱2 刪除

因此，當用戶想要，他們可以輸入一個名稱（文本框）點擊添加，並且控制器中的操作會將輸入的名稱添加到數據庫中，並使用最新信息重新加載部分視圖。

到目前爲止，我已經能夠獲取要調用的操作方法，並將記錄添加到數據庫中。問題是它不會重新加載JUST局部視圖。它會將局部視圖作爲整個新頁面加載，並且它的內容是唯一顯示的內容。 （而不是留在/項目/細節/ 5，頁面加載/項目/ MembersDisplay）

在我的母版頁，我有：

<script src="<%= Links.Scripts.jquery_1_3_2_min_js %>" type="text/javascript"></script> 
<script src="<%= Links.Scripts.MicrosoftAjax_js %>" type="text/javascript"></script> 
<script src="<%= Links.Scripts.MicrosoftMvcAjax_js %>" type="text/javascript"></script> 

在控制器中，我有：

[AcceptVerbs(HttpVerbs.Post)] 
    public virtual ActionResult AddMember(FormCollection form) 
    { 
     MemberRepository repo = new MemberRepository(); 
     Member m = new Member(); 
     m.Id = Convert.ToInt32(form["Id"]); 
     m.Name = form["name"]; 

     try{ 
      repo.addMember(m); 
      repo.save(); 
     } 
     catch{ 
      return View(); 
     } 

     // Make a new IList of All Members in this current 
     //IList<Member> mems = (new PRDataContext()).Members_GetMembersById(m.Id).ToList<Member>(); 

     return View("MembersDisplay", members); 
    } 

局部視圖是

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<List<Application.Models.Member>>" %> 
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script> 
<script src="/Scripts/MicrosoffMvcAjax.js" type="text/javascript"></script> 
<table> 
    <% if (Model.Count() > 0) { %> 
     <% foreach (var p in ViewData.Model) { %> 
    <tr> 
     <td><%= Html.Encode(p.Name) %></td> 
     <td><%= Ajax.ActionLink("Delete", "AjaxDelete", new { p.Id, p.Name }, new AjaxOptions { Confirm = "Delete?", HttpMethod = "AjaxDelete", UpdateTargetId = "results" })%></td> 
    </tr> 
     <% } %> 
    <% } else { %> 
    <tr> 
     <td><b>There are no Members.</b></td> 
    </tr> 
    <% } %> 
</table> 

在控制器中，我嘗試添加如果（Request.IsA jaxRequest（）== true）該分支從未執行過。我不確定ajax是否沒有加載，或者我做錯了什麼。

編輯 - 新增失蹤代碼

下面是一個使用局部視圖中的細節部分：

<table> 
<% Ajax.BeginForm("AddMember", "Project", new AjaxOptions { UpdateTargetId = "results", InsertionMode=InsertionMode.Replace}) { %> 
<tr> 
    <td align="left" colspan="2" style="background-color:#93B6E0;"><font style="color:#fff;"><b>Members</b></font></td> 
</tr> 
<tr> 
    <td width="80%"> 
     <input type="hidden" name="prjId" value="<%= Html.Encode(Model.Id) %>" /><input type="text" name="name" style="width:120px;" /> 
    </td> 
    <td width="20%"> 
     <input type="submit" value="Add" /> 
    </td> 
</tr> 
<% } %> 
<tr> 
    <td colspan="2"> 
     <div id="results"><% Html.RenderPartial(MVC.Members.Views.MembersDisplay, Model.Members.ToList<Member>()); %></div> 
    </td> 
</tr> 

Answer 1

我按照@RailRhoad的建議升級到了MVC 2.0。

然後，我將局部視圖移動到了一個區域，並且必須更改指向.js文件的路徑鏈接，使其更加明確（T4MVC未呈現正確的路徑）。取而代之的

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>

或

<script src="<%= Links.Scripts.MicrosoftAjax_js %>" type="text/javascript"></script>

我不得不這樣做

<script src="../../../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>

此外，在控制器的動作擔任@jim建議由

return PartialView(MVC.ProjectDash.Project.Views.MembersDisplay, members); 

而且，我刪除了「InsertionMode = ...」從

<% Ajax.BeginForm("AddMember", "Project", new AjaxOptions { UpdateTargetId = "results", InsertionMode=InsertionMode.Replace}) { %> 

最大的問題是JavaScript文件並沒有被連接起來，正確引用。一旦解決了這個問題，其他的東西很快就會到位。

Answer 2

德克 - 不知道完整的代碼是存在的。然而，從短暫的一瞥，你的返回：

return View("MembersDisplay", members); 

的時候，其實，對於一個局部視圖，你應該返回類似：

return PartialView("MembersDisplay", members); 

希望這有助於

吉姆

Answer 3

如果您打算提交來觸發Ajax.BeginForm，則需要將其包含在帶花括號的表單中。目前您的提交不在表格內。