【问题标题】:Partial View not being fully re-rendered after Ajax callAjax 调用后部分视图未完全重新渲染
【发布时间】:2013-04-24 17:19:45
【问题描述】:

我有一个局部视图,我需要在 Ajax 调用后完全刷新。当我这样做时,它的一部分是但不是全部。当我逐步浏览它以查看捕获的内容时,它看起来只是局部视图中的表单正在刷新,而不是它的其他部分。有什么可能导致这种情况吗?

刷新视图和包含其他部分视图的视图的jQuery和Ajax:

<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
    $('#ChangeHeatName').click(function (e) {
        var tdata = $('#form1').serialize();
        var origname = $('#HeatNameDiv').find('input[name="heatName"]').first().val();
        var newname = $('#HeatNameDiv').find('input[name="updatedHeat"]').first().val();
        $.ajax({
            type: "POST",
            data: {
                mCollection: tdata,
                heatName: origname,
                updatedHeat: newname
            },
            url: '@Url.Action("ChangeHeatName","Home")',
            //url: "/Home/ChangeHeatName",
            success: function (result) { success(result); }
        });
    });


    function success(result) {

        $('#HeatNameDiv').dialog('close');
        //Ajax with problem
        $.ajax({
            type: "GET",
            url: '@Url.Action("ButtonsPartial","Home")',
            success: function (result2) { $("#ButtonsPartial").html(result2); }
        });
        $("#Partial_Chem_Analysis").html(result);
    }
});
</script>

<section>
<div id ="ButtonsPartial" title="ButtonsPartial">
    @Html.Action("ButtonsPartial", "Home")
</div>
<div id="Partial_Chem_Analysis" title="Partial_Chem_Analysis">
    @Html.Action("PartialChemAnalysis", "Home", Model)
</div>
</section>
<section>

局部视图:

@using System.Data;
@using System.Dynamic;
@using System.Collections.Generic;
@using System.Linq;
@model TheManhattanProject.Models.ButtonsModel


<div id="Chem_Buttons">
<h2 class="alignleft">Chemistry Table</h2>
<p class="alignright">Heat Name<input type="text" name="heat_name" value="@Model.heatName" class="search-query" placeholder="Search" style ="width:100px" readonly="true"/>
<button class="btn btn-success" id="Change_Heat_Name" value="Change_Heat_Name" name="action:Change_Heat_Name" type="button"> Change Heat Name</button>
Grade<input type="text" name="heat_grade" value="@Model.grade" class="search-query" placeholder="Search" style="width:100px" readonly="true"/>
<button class="btn btn-success" id="ChangeHeatGrade" value="ChangeHeatGrade" name="action:Change_Grade" type="button">Change Grade</button>
Delete Record<input type="text" name="delete_record" value="@Model.heatName" class="search-query" placeholder="Search" style ="width:100px" readonly="true"/>
<button class="btn btn-success" id="DeleteRecord" value="DeleteRecord" name="action:Delete_Record" type="button">Delete Record</button>
  </p>
  <div style="clear: both;"></div>
  </div>
<div id="HeatNameDiv" title="Change Heat Name">
    @using (Html.BeginForm("ChangeHeatName", "Home", "POST"))
   {
    <section>
        Heat Name:<input type="text" name="heatName" value="@Model.heatName" style ="width:100px" readonly="true"/>
        //Value staying to what was entered not ""
        Change to:<input type="text" name="updatedHeat" value="" style="width: 100px" />
        <input type="button" id="ChangeHeatName" name="ChangeHeatName" value="Change" />
    </section>
}
</div>

<div id="HeatGradeDiv" title="Change Heat Grade">
@using (Html.BeginForm("ChangeGrade", "Home", "POST"))
{
    <section>
        Heat Grade:<input type="text" name="grade" value="@Model.grade" style ="width:100px" readonly="true"/>
        Change to:<input type="text" name="updatedGrade" value="" style="width: 100px" />
        <input type ="hidden" name="hiddenHeat" value ="@Model.heatName)" />
        <input type="button" id="ChangeGrade" name="ChangeGrade" value="Change" />
    </section>
}
</div>

<div id="DeleteRecordDiv" title="Delete Record">
@using (Html.BeginForm("DeleteRecord", "Home", "POST"))
{
<section>
    Heat Name:<input type="text" name="heatName" value="@Model.heatName" style ="width:100px" readonly="true"/>
    <input type="button" id="DeleteRecordBtn" name="DeleteRecordBtn" value="Delete" />
</section>
}
</div>

【问题讨论】:

  • 我看到两个 AJAX 调用。哪一个给你带来了问题?
  • 对不起,应该指定。这是第二个。我将在我的代码中添加一个标记。

标签: c# jquery ajax asp.net-mvc


【解决方案1】:

据我了解,在您编辑后,这段代码的响应给您带来了问题。

$.ajax({
    type: "GET",
    url: '@Url.Action("ButtonsPartial","Home")',
    success: function (result2) { $("#ButtonsPartial").html(result2); }
});

有几件事是

  1. 您没有显示具有ButtonsPartial id 的容器。因此,如果它不存在,则无法显示结果。
  2. 它使用 GET 并且可以被您的浏览器缓存。使用 firebug 等浏览器调试器或开发人员工具,您可以查看对 ajax 调用的响应,并查看它是否真的从您的服务器获取新数据。

编辑:我现在看到你的ButtonsPartial div。所以#1 不是问题。

【讨论】:

  • 我检查了它作为响应返回的内容,这正是部分视图中的内容。我可以看到的主要问题是“更改为:”字段中的内容没有被重置。但是,当我查看它应该设置为“”的响应时,它只是没有反映在页面上。如果这有任何意义。
  • 当我在 firebug 中查看响应时,它是应该呈现的 ButtonsPartial 视图的 HTML。
  • 如果您注释掉$("#Partial_Chem_Analysis").html(result);ButtonsPartial 是否会按预期加载?
  • 如果我这样做,结果是一样的
【解决方案2】:

您没有 Partial_Chem_Analysis 标记

【讨论】:

  • 它包含在与问题无关的另一个视图中。
  • @Jasen 认为该视图刷新得很好,并且执行了它应该做的事情。我将使用该代码更新我的问题,以便您查看。另外,我已经更新了问题,因为我标记了未正确更新的部分
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-07-28
  • 1970-01-01
  • 2013-04-05
  • 1970-01-01
  • 1970-01-01
  • 2011-06-18
  • 2015-01-29
相关资源
最近更新 更多