MVC Ajax未加载部分视图在div中,加载新页面
我目前正在使用MVC 1.0,并且从未使用过AJAX,并且使用ASP.Net MVC之前只有有限的经验(从一周前开始) 。我试图设置一个表(这是建立/是在一个局部视图)填充信息从一个数据库,允许用户快速添加删除记录到数据库右或从表中。我正在尝试使用AJAX来完成此操作,因为我不想重新加载其他页面上的其他信息。这是一个快速模板。MVC Ajax未加载部分视图在div中,加载新页面
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>
我按照@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文件并没有被连接起来,正确引用。一旦解决了这个问题,其他的东西很快就会到位。
德克 - 不知道完整的代码是存在的。然而,从短暂的一瞥,你的返回:
return View("MembersDisplay", members);
的时候,其实,对于一个局部视图,你应该返回类似:
return PartialView("MembersDisplay", members);
希望这有助于
吉姆
我改变了它,并且尝试了ActionResult和PartialView返回类型,但都没有成功。它仍然在窗口中加载整个部分,没有别的。 – Dirk 2010-07-12 15:51:51
这听起来像你正在执行回发,而不是ajax POST请求。你能分享调用你的控制器动作的代码吗? – Tahbaza 2010-07-10 02:38:43
查看更新的问题。 – Dirk 2010-07-12 15:48:51
修正了它。除此之外,与.js文件的链接是错误的(感谢FireBug指出了这一点)。 – Dirk 2010-08-05 18:01:29