MVC 4（剃刀） - 控制器返回一个partialview，但整个页面被更新 [英] MVC 4 (razor) - Controller is returning a partialview but entire page is being updated

问题描述

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

I'm new to MVC 4 and the Razor engine - so this might be a dumb question.

我试图做到的，是我有一个网页一个下拉列表和一个按钮。单击该按钮调用控制器传递选择的值。控制器应返回一个局部视图，只有页面应该更新的底部。

What I'm trying to achieve is I have a page with a drop down list and a button. Clicking the button calls the controller passing the value selected. The controller should return a partial view and only the bottom part of the page should be updated.

不过我发现，整个页面被只有部分查看HTML取代。 IE浏览器。我让我的显示结果的列表，但我失去了我的项目的DropDownList和提交按钮。我试着包括jQuery和不显眼的脚本（这我不认为我需要在MVC 4），但是这根本不改变页面的引用（即DropDownList的和按钮，呆在那里，不显示结果）。

However I'm finding that the entire page gets replaced with just the partial view html. Ie. I get my list of results displaying but I lose my dropdownlist of projects and submit button. I tried including a reference to jquery and unobtrusive scripts (which I don't think I need to in MVC 4) but that doesn't change the page at all (ie. the dropdownlist and button stay there and no results are displayed).

我查看部分：

@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表格和参考模型。

My partial view content just contains an html table and reference to the model.

推荐答案

所以，我想包括不显眼的脚本，并修复我没有呈现该分区，如果该对象为空，但它仍然是不工作的事实。

So I tried including that unobtrusive script, and fixing the fact I wasn't rendering that div if that object was null but it still wasn't working.

所以，我切换到使用jquery。

So I switched to using 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>
         }

这篇关于MVC 4（剃刀） - 控制器返回一个partialview，但整个页面被更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！