JavaScript 部分刷新后停止工作

Question

我已将 JavaScript 放在更新面板中，希望它会运行。一个特定的脚本将 bootstrap 分页应用于网格视图。但是，当单击页面按钮并刷新更新面板时，脚本停止工作并且按钮恢复为链接。我尝试了很多方法，例如将更新面板模式改为 "always"，不幸的是似乎没有任何效果。

说到JavaScript，我并不精通。如果您能提供帮助，我们将不胜感激。

    <asp:UpdatePanel ID="UpdatePanel13" runat="server" UpdateMode="Always" >

             <ContentTemplate>

          <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
        <script src="Scripts/js/bs.pagination.js"> </script>


             </ContentTemplate>

         </asp:UpdatePanel>

Answer 1

您应该将脚本包含在更新面板之外，然后将它们放回 head 标签内。

您可以尝试手动调用 javascript，您可以通过以下方式进行：

protected void Page_Load(object sender, EventArgs e)
{
    [...]
    ScriptManager.RegisterStartupScript(this, typeof(UpdatePanel), Guid.NewGuid().ToString(), "NameOfFunctionToInitialiseJavaScript()", true);
    [...]
}

NameOfFunctionToInitialiseJavaScript() 可能需要 pageLoad() 或 bs.pagination.js 使用的任何东西。

编辑添加：

还有另一种解决方案，摘自here：添加一些 css 样式到页面或单独包含的 CSS 文件（不要添加到 Bootstrap.css，修改它是不明智的，以防它发生变化）：

.pagination-ys {
    /*display: inline-block;*/
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}

.pagination-ys table > tbody > tr > td {
    display: inline;
}

.pagination-ys table > tbody > tr > td > a,
.pagination-ys table > tbody > tr > td > span {
    position: relative;
    float: left;
    padding: 8px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    color: #dd4814;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    margin-left: -1px;
}

.pagination-ys table > tbody > tr > td > span {
    position: relative;
    float: left;
    padding: 8px 12px;
    line-height: 1.42857143;
    text-decoration: none;    
    margin-left: -1px;
    z-index: 2;
    color: #aea79f;
    background-color: #f5f5f5;
    border-color: #dddddd;
    cursor: default;
}

.pagination-ys table > tbody > tr > td:first-child > a,
.pagination-ys table > tbody > tr > td:first-child > span {
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

.pagination-ys table > tbody > tr > td:last-child > a,
.pagination-ys table > tbody > tr > td:last-child > span {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

.pagination-ys table > tbody > tr > td > a:hover,
.pagination-ys table > tbody > tr > td > span:hover,
.pagination-ys table > tbody > tr > td > a:focus,
.pagination-ys table > tbody > tr > td > span:focus {
    color: #97310e;
    background-color: #eeeeee;
    border-color: #dddddd;
}

然后您需要做的就是将样式添加到 GridView：

<asp:GridView ID="MyGridView" runat="server">
    <PagerStyle CssClass="pagination-ys" />
</asp:GridView>

JavaScript 部分刷新后停止工作

JavaScript stops working after partial refresh

javascript

c#

asp.net

updatepanel

twitter-bootstrap