MVC3通过调用Ajax.ActionLink来嵌套部分视图

时间:2012-07-20 12:43:43

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

我知道前两个问题涉及嵌套部分视图,但解决方案对我的设计不起作用(可能不是最好的,但我不确定如何调整它)。

背景

我收集用户的问卷回复,并将它们作为xml文件存储在sql server上。

我有一个部分视图,它加载一个包含给定用户的所有响应的表,这个部分视图用响应日期,链接到xml响应文档,问卷名称,链接到xml问卷文档(问卷信息)填充表格。从另一个表中提取)和一个Ajax ActionLink重定向到动作,该动作解析两个相关的xml文档,在第二个局部视图中打印出问题和答案列表(即可视化人类可读的响应)。

第一个局部视图在表格下方包含一个div,我希望用第二个局部视图填充Ajax.ActionLink。

问题

答案是正确呈现的,但部分视图加载到一个完整的新页面,没有任何样式。

此嵌套问题的其他解决方案使用RenderPartial()但是我使用返回PartialView()

代码

第一部分视图:

       <table>
        <thead>
         <tr><th>headers with other info</th>
             <th>Display(/th>
         <tr>
        </thead>
        <tbody>
         <tr><td>cells with other info</td>
             <td>@Ajax.ActionLink("View", "DisplayResponse","HealthStatus", new { respID = item.UniqueID,qVersion=item.QuestionnaireVersion, qname = item.QuestionnaireName }, new AjaxOptions { UpdateTargetId = "responseDisp" })</td>
        </tbody> 
       </table>
<div id="responseDisp"></div>    <--- **This is the div I wish to populate, does anyone know why it's not working?**

DisplayResponse Action(没有解析xml文档的逻辑)

 public ActionResult DisplayResponse(Guid respID, int qVersion, String qname) {
        var allResponses = ZData.Responses;
        var response = (from r in allResponses
                        where r.UniqueID == respID
                        select r
                            ).First();
        //geting an XML questionnaire document
        var questionnaireDetails = ZodiacData.Questionnaires;
        var questionnaire = (from q in questionnaireDetails
                             where q.Name == qname && q.Version == qVersion
                             select q
                            ).First();
        //creating XMLDocument to read the questionnaire
        XmlDocument xqdoc = new XmlDocument();
        xqdoc.LoadXml(questionnaire.Xml);
        XmlElement qroot = xqdoc.DocumentElement;
        ViewBag.qroot = qroot;
        XmlDocument xrdoc = new XmlDocument();
        xrdoc.LoadXml(response.Raw);
        XmlElement rroot = xrdoc.DocumentElement;
        ViewBag.rroot = rroot;

        return PartialView("_PrintedResponse");
    }

我将不胜感激任何帮助!

2 个答案:

答案 0 :(得分:2)

在MVC3中,@AJax.助手正在使用一些额外的form属性呈现常规adata-标记。为了使魔法工作,需要一些Javascript,它将使用这个生成的data-属性来进行必要的jQuery ajax调用。

这些js函数存在于jquery.unobtrusive-ajax.js中,因此请将此行添加到您的布局或视图中,它应该可以正常工作:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" 
        type="text/javascript"></script>

答案 1 :(得分:1)

首先,如上所述,您必须具有对jquery.unobtrusive-ajax.js文件的引用,因为这将为您正确地“连线”。

这个答案也是为了回答您对有关如何将模型传递给您的观点的问题的评论。实际上,通过将ViewBag用于模型,您实际上会使事情变得更加复杂。

通过为您的模型使用ViewBag,您将更难找到/修复/解决错字中的问题以及Razor助手的强大功能。 ViewBag是一个动态对象,没有编译时类型检查。您也不需要转换对象(代码较少)。

首选(和最佳做法)就是如此勾结:

1)您的控制器包含传递给ViewModels的ViewModels(强类型)

控制器

    public ActionResult Something() {
        return View();
    }

    public ActionResult UserView() {
        UserViewModel mdoel = new UserViewModel {
            Email = "me@somewherecool.com",
            FirstName = "Your",
            SStatuses = new List<SStatus>{
                new SStatus {
                    ID = 0
                }
            }
        };
        return PartialView("_SomethingPartial", mdoel);
    }

索引(“Something”视图)

@{
    ViewBag.Title = "Something";
}

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<h2>Something</h2>
@Ajax.ActionLink("Ajax Click", "UserView", new AjaxOptions { UpdateTargetId = "MyDivContainer", InsertionMode = InsertionMode.Replace })
<div id="MyDivContainer">
<!-- my content should be here -->
</div>

部分视图

@model StackModels.UserViewModel
<div class="par">
    @Html.LabelFor(m => m.FirstName)
    <div class="field">
        @Html.TextBoxFor(m => m.FirstName)
        @Html.ValidationMessageFor(m => m.FirstName)
    </div>
</div>