MVC 4 (razor) - 控制器返回部分视图但整个页面正在更新答案

【问题标题】：MVC 4 (razor) - Controller is returning a partialview but entire page is being updatedMVC 4 (razor) - 控制器返回部分视图但整个页面正在更新
【发布时间】：2012-11-14 06:28:43
【问题描述】：

我是 MVC 4 和 Razor 引擎的新手 - 所以这可能是一个愚蠢的问题。

我想要实现的是我有一个带有下拉列表和按钮的页面。单击按钮调用控制器传递选定的值。控制器应该返回一个局部视图，并且应该只更新页面的底部。

但是我发现整个页面被替换为部分视图 html。 IE。我得到了我的结果列表显示，但我失去了我的项目下拉列表和提交按钮。我尝试包含对 jquery 和不显眼的脚本的引用（我认为在 MVC 4 中不需要），但这根本不会改变页面（即下拉列表和按钮留在那里并且没有结果显示）。

我的部分观点：

@using (Ajax.BeginForm("GetProjectStories", "MyController", new AjaxOptions{ UpdateTargetId = "projectUserStories"}))
{

    <fieldset>
        <legend>Select Project</legend>
        <div>
            @Html.DropDownList("ProjectReference", (IEnumerable<SelectListItem>)Model.ProjectList)
        </div>
        <p>
        <input name="GetStoriesButton" type="submit" value="Get Stories" />
        </p>
    </fieldset>
}

@if (Model != null && Model.UserStories != null)
{
    <div id="projectUserStories">
        @{Html.RenderPartial("_UserStoryList", Model);}
    </div>

}

我的控制器：

public ActionResult GetProjectStories(ProjectViewModel model)
        {

           var stories =  MyService.GetProjectUserStories(model.ProjectReference).Results;   
           model.UserStories = stories;
            return PartialView("_UserStoryList", model);
        }

我的部分视图内容只包含一个 html 表格和对模型的引用。

【问题讨论】：

标签： razor asp.net-mvc-4

【解决方案1】：

你打算如何更新projectUserStories，如果代码块无法渲染，试试这个：

<div id="projectUserStories">
@if (Model != null && Model.UserStories != null)
{
   Html.RenderPartial("_UserStoryList", Model);
}
</div>

同时检查 Microsoft Ajax 助手所需的所有 js 文件，例如：

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

另请看：

【讨论】：

是的，今天早上注意到了 - 谢谢。会检查你的链接:)

【解决方案2】：

所以我尝试包含那个不显眼的脚本，并修复了如果该对象为空但它仍然无法正常工作时我没有渲染该 div 的事实。

所以我转而使用 jquery。

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

    <script type="text/javascript">
            $(function () {
                $('form').submit(function () {
                    var url = "@Url.Action("GetProjectStories", "MyController")";
                    var data = { selectedProject: $('#ProjectReference').val() };

                    $("#projectUserStories").load(url, data, function() {
                    });
                    return false;
                });
            });

     </script>

        @using (Html.BeginForm())
        {
            <fieldset>
                <legend>Select Project</legend>
                <div>
                    @Html.DropDownList("ProjectReference", (IEnumerable<SelectListItem>) Model.ProjectList)
                </div>
                <p>
                    <input name="GetStoriesButton" type="submit" value="Get Stories" />
                </p>
            </fieldset>

            <div id="projectUserStories">
                @{ Html.RenderPartial("_UserStoryList", Model); }
            </div>
         }

【讨论】：