使用 AJAX 在视图内渲染部分视图答案

【问题标题】：Rendering partial view inside a view using AJAX使用 AJAX 在视图内渲染部分视图
【发布时间】：2013-04-05 03:45:42
【问题描述】：

我正在尝试在提交表单时刷新视图内的部分视图。但是，每当我尝试时，它只会将部分视图呈现为普通视图。谁能告诉我我做错了什么？

控制器：

public ActionResult ChangeHeatName(string heatName, string updatedHeat)
    {
        string user = User.Identity.Name;
        HomeModel H = new HomeModel();
        H.ChangeHeatName(heatName, updatedHeat, user);
        ChemViewModel mySlagViewModel = new ChemViewModel();
        mySlagViewModel = H.QueryResults(heatName);

        return PartialView("PartialChemAnalysis", mySlagViewModel);
    }

局部视图形式（包含在局部视图中，不是主视图）：

@using (Ajax.BeginForm("ChangeHeatName", "Home", new AjaxOptions(){UpdateTargetId = "chemDiv" InsertionMode = InsertionMode.Replace}))
{
    <section>
        Heat Name:<input type="text" name="heatName" value="@Html.ValueFor(x => x.heatname)" style ="width:100px"/>
        Change to:<input type="text" name="updatedHeat" value="" style="width: 100px" />
        <input type="submit" name="ChangeHeatName" value="Change" />
    </section>
}

正在渲染部分视图的索引视图：

@if(ViewBag.SearchKey == null)
{
    <div class="content-wrapper">
        <hgroup class="title">
            <h1>@HttpContext.Current.User.Identity.Name</h1>
            <h2>@ViewBag.Message</h2>
        </hgroup>
    </div>
}

@using (Html.BeginForm("Index", "Home", "POST"))
{
<div class="searchField">
   <input type="text" class="search-query" name="heatSearch" placeholder="Search">
        <button class="btn btn-success"  type="submit">Search</button>
    <br />
    @if (ViewBag.AverageSuccessful == true)
    {
        <input type="text" name="AvgConfirmation" class="search-query" value="Average Submitted Successfully" width:"400px" placeholder="Search" />
    }
</div>
}

@if(ViewBag.SearchKey != null)
{
    <div>
    <div id ="chemDiv">
    @Html.Action("PartialChemAnalysis", "Home", (string)ViewBag.SearchKey)
    </div>

    <div id ="slafDiv">
    @Html.Action("PartialSlagView", "Home", (string)ViewBag.SearchKey)
    </div>
    </div>

 }

传递 SearchKey 的索引控制器：

 [HttpPost]
    public ActionResult Index(string heatSearch)
    {
        ViewBag.SearchKey = heatSearch;

        return View();
    }

【问题讨论】：

表单正在将请求发送到部分视图操作 (ChangeHeatName)。所有此操作返回的是部分视图，这就是您看不到完整视图的原因。您应该将表单的GET 发送到返回完整视图的操作，并从该视图调用部分视图。
我还会添加 InsertionMode.Replace 作为 ajaxoptions 的下一个参数。所以它会写成： new AjaxOptions { UpdateTargetId = "chemDiv", InsertionMode = InsertionMode.Replace}
@AndreCalil 感谢您的建议。我试过调用呈现部分视图的完整视图。所以我的 return 语句看起来像 return View("Index", heatName) 但它只是把我带回了那个没有渲染部分视图的视图。
@Danger_Fox 渲染局部视图应该在 full 视图中完成。在Index，某处，您必须致电@Html.Partial("ChangeHeatName", data-to-changeheatname)
@AndreCalil 我问题中的最后一个 sn-p 代码是我在索引视图中调用局部视图的位置。因此，当我第一次根据传递的内容渲染页面时，它工作正常。我将使用 Index 控制器更新问题。

标签： c# html ajax asp.net-mvc

【解决方案1】：

目前您的 ajax.beginform 在您的局部视图中，这一切都很好，但您的局部视图没有呈现在您的索引中，所以实际上您从不执行 ajax 替换逻辑，您只是调用一个操作方法并获取局部视图的整页刷新。

这是可行的。

@if(ViewBag.SearchKey != null)
{
    <div>
        <div id ="chemDiv">
            @Html.Partial("ChangeHeatName")
        </div>

        <div id ="slafDiv">
            @Html.Action("PartialSlagView", "Home", (string)ViewBag.SearchKey)
        </div>
    </div>
}

现在您的 Ajax.Beginform 已在索引视图中呈现，当单击该按钮时，它将刷新。

编辑：您需要对@Html.Action("PartialChemAnalysis", "Home", (string)ViewBag.SearchKey) 做一些事情，可能会将其粘贴在您的局部视图中，因为“chemDiv”中的所有内容现在都将在更新时被替换。

【讨论】：

【解决方案2】：

您没有在 Ajax.BeginForm() 中指定 POST。试试这个：

@using (Ajax.BeginForm("ChangeHeatName", "Home", FormMethod.Post, 
new AjaxOptions(){UpdateTargetId = "chemDiv" InsertionMode = InsertionMode.Replace}))
{...}

另外，在你的控制器动作上设置一个断点并单步执行它，看看它是否真的命中return PartialView() 或跳过它。

【讨论】：

【解决方案3】：

发布这个是因为它不是一个直观的修复。显然 MVC 4 和 jQuery 1.9.1 存在问题，所以为了让它工作，我不得不更改对 jQuery 1.7.1 的引用

【讨论】：

我不知道这将如何解决您上面发布的代码问题的根源。