jquery - 更新网页后显示弹出屏幕

Question

目标:当我更新或添加新数据时，我希望更新网页，然后会自动出现一个弹出屏幕。正文为“测试”

问题是我不知道该怎么做。

是否可以使用 bootstrap 而不是 twitter bootstrap 来做到这一点？

今天，我正在使用 boostrap 和 asp.net mvc。

http://www.sitepoint.com/twitter-bootstrap-3-javascript-components/

public ActionResult Contact()
{
    ViewBag.Message = "Your contact page.";

    ViewBag.Product = "Test";

    return View();
}

Answer 1

您需要通过对服务器的新请求来持久保存消息，您可以通过多种方式执行此操作。您可以使用临时数据、 session 、数据库，或手动将其传递给操作。我通常使用 tempdata，它类似于 ViewBag，但持续到另一个请求:

public ActionResult Contact()
{
    ViewBag.Message = "Your contact page.";

    TempData["Product"] = "Test";

    return View();
}

在 View 中:

@if (TempData["Product"] != null)
{
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            @TempData["Product"]
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <script>$('#myModal').modal();</script>
}

此示例代码查看是否有消息，如果有，它会将模态 HTML 放在包含您的消息的页面上。还有其他方法可以做到这一点。

确保在这个小脚本运行之前，页面上引用了 Bootstrap CSS 和 JS 文件。