Question

我已将JavaScript放在更新面板中，希望它可以运行。一个特定的脚本将引导分页应用于网格视图。但是，单击页面按钮并刷新更新面板时，脚本将停止工作，按钮将恢复为链接。我已经尝试了很多东西，例如将更新面板模式转换为＆＃34;总是＆＃34;，遗憾的是似乎没有任何工作。

对于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>

With buttons

without buttons

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停止工作

1 个答案: