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

Question

我知道前两个问题涉及嵌套部分视图，但解决方案不适用于我的设计（这可能不是最好的，但我不确定如何调整它）。

背景：

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

我有一个局部视图，它加载一个包含给定用户的所有响应的表，这个局部视图用响应日期、xml 响应文档的链接、问卷名称、xml 问卷文档的链接（问卷信息从不同的表中提取）和一个 Ajax ActionLink，它重定向到解析两个相关 xml 文档以在第二个局部视图中打印出问题和答案列表（即可视化响应以供人类阅读）的操作。

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

问题：

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

这个嵌套问题的其他解决方案使用 RenderPartial() 但是我使用 return 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");
    }

如果有任何帮助，我将不胜感激！

Answer 1

在 MVC3 中，@AJax. 助手正在渲染常规的 form 和 a 标签以及一些额外的 data- 属性。为了让魔法发挥作用，需要一些 Javascript 来使用这个生成的 data- 属性来进行必要的 jQuery ajax 调用。

这些 js 函数位于 jquery.unobtrusive-ajax.js 中，因此将此行添加到您的布局或视图中，它应该可以工作：

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

Answer 2

首先，如上所述，您必须引用 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);
    }

索引（“某物”视图）

@{
    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>