Question

我有两个div标签。在单击第一个div标签时，会发生AJAX调用，第二个div标签将替换第一个div标签。

我在第二个div标签中有后退按钮。单击“返回”按钮时，我应该能够看到第一个div标签被第二个div标签替换。

这是我的剃刀代码：

<div id="tag1" onclick="show_placedetail()>
    <a href="#" class="button button-small button-style3 butcurve-sml">View</a>
</div>

<div id="tag2">
    <a href="#" class="button button-small button-style4 butcurve-sml" onclick="show_placelist()">Back</a>
</div>

这是我的AJAX电话：

@using (Ajax.BeginForm("Detail", "Places", new AjaxOptions
    {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "tag1",
    }, new { name = "PlaceDetailsForm", id = "PlaceDetailsForm" }))
{
    <input type="hidden" name="locationId" id="locationId" />
    <input type="hidden" name="distance" id="distance" />
}

这是我的JQuery：

function show_placedetail() {
    $('#tag1').hide();
    $('#PlaceDetailsForm').submit();
}

function show_placelist() {
    $('#tag2').hide();
    $('#tag1').show();
}

我检查过AJAX调用后第一个div标签的.html（）内容是否已清空。

为了显示在AJAX期间被另一个div标签替换的div标签，我该怎么做？我是否需要调用另一个AJAX调用来显示第一个div内容？

请提供建议。

提前致谢。

Answer 1

我解决了我的错误。

实际上，我正在用AJAX取代我的第一个div。因此，如果我再试一次，它将不可用。所以我创建了一个父标记并将其中的两个标记放入其中。然后我将InsertionMode选项更改为InsertAfter。

现在工作正常。

这是我更新的Razor代码：

<div id="parent">
  <div id="tag1" onclick="show_placedetail()>
      <a href="#" class="button button-small button-style3 butcurve-sml">View</a>
  </div>

  <div id="tag2">
      <a href="#" class="button button-small button-style4 butcurve-sml"   onclick="show_placelist()">Back</a>
  </div>
</div>

我更新的AJAX代码：

@using (Ajax.BeginForm("Detail", "Places", new AjaxOptions
    {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.InsertAfter,
        UpdateTargetId = "parent",
    }, new { name = "PlaceDetailsForm", id = "PlaceDetailsForm" }))
{
    <input type="hidden" name="locationId" id="locationId" />
    <input type="hidden" name="distance" id="distance" />
}

使用JQuery显示隐藏的div内容

1 个答案: