MVC Ajax没有在div中加载Partial View,加载新页面

时间:2010-07-09 21:26:48

标签: asp.net ajax asp.net-mvc partial-views

我目前正在使用MVC 1.0,之前从未使用过AJAX,并且只使用ASP.Net MVC的经验有限(开始一周多一点)。我正在尝试设置一个表(已构建/处于部分视图中),该表填充了来自db的信息,该数据库允许用户从表中快速添加pr删除记录到db或从db中删除记录。我正在尝试使用AJAX来完成这项工作,因为页面的其余部分还有很多其他信息我不想重新加载。这是一个快速模板。

第1行:(文本框)添加

row2:Name1 删除

row3:Name2 删除

因此,当用户想要时,他们可以在(文本框)点击添加中输入名称,控制器中的操作会将输入的名称添加到数据库中并重新加载部分视图最新的信息。

到目前为止,我已经能够调用action方法,并将记录添加到数据库中。问题是它不会重新加载局部视图。它反而将部分视图作为整个新页面加载,并且它的内容是唯一显示的内容。 (而不是停留在/ Project / Details / 5,页面加载/ Project / 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>

在控制器中,我尝试添加 if(Request.IsAjaxRequest()== 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>

3 个答案:

答案 0 :(得分:1)

Dirk - 不确定是否有完整的代码。然而,从简短的一瞥,你的回归:

return View("MembersDisplay", members);

事实上,对于局部视图,你应该返回类似的东西:

return PartialView("MembersDisplay", members);

希望这会有所帮助

吉姆

答案 1 :(得分:1)

如果您打算将提交触发Ajax.BeginForm,则需要将其包含在带花括号的表单中。目前您的提交不在表单中。

答案 2 :(得分:0)

我升级到MVC 2.0,正如@RailRhoad建议的那样。

然后我将局部视图移动到一个区域,并且必须将指向.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文件未被正确链接和引用。一旦确定了,其他事情就会很快发挥作用。