Question

我使用jquery标签。

    <%@ register src="~/UserControls/Order/Control/OrderProductLicense.ascx" tagname="OrderProductLicense"      tagprefix="uc1" %>
    <script type="text/javascript">
        $(function() {
            $("#tabs").tabs({
                closable: true,
                cache: true,
                show: function() {
                    var selectedTab = $('#tabs').tabs('option', 'selected');
                    $("#<%= hdnSelectedTab.ClientID %>").val(selectedTab);
                },
                selected: <%= hdnSelectedTab.Value %>
            });
        });
    </script>
    <table width="100%">
        <tr>
            <td>
                <div id="tabs">
                    <ul>
                        <asp:Repeater ID="rptTabs" runat="server">
                            <ItemTemplate>
                                <li><a href="#tabs-<%#DataBinder.Eval(Container,"ItemIndex","") %>">
                                    <%#Eval("Id") %></a></li>
                            </ItemTemplate>
                        </asp:Repeater>
                    </ul>
                    <asp:Repeater ID="rptTabsSub" runat="server">
                        <ItemTemplate>
                            <div id="tabs-<%#                DataBinder.Eval(Container, "ItemIndex", "") %>">
                                <uc1:OrderProductLicense ID="OrderProductLicense1" runat="server" />
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
                <asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />
            </td>
        </tr>
    </table>

我的标签已关闭按钮。但我希望当一个人关闭我的选项卡后，我想用我选择的标签文本删除会话列表中的一些数据。 Forexample。

    public void TabClosing(object sender, string tabText)
    {
        MySession.OrderProductIdList.RemoveAll(p => p.ItemText == tabText);
    }

如何编写这样的代码？

最好的问候

Answer 1

在scriptmanager中设置EnablePageMethods = true

 <input type="button" id="btnClose" value="Close" onclick="DeleteEntryFromSession();"/>

//javascript
function DeleteEntryFromSession()
{
        PageMethods.DeleteSessionEntry(para1,function(result)
        {
            //Success
            //your closing code comes here


        } ,function(error){  //error});
}

//c#
[WebMetod]
public static string DeleteSessionEntry(string para1)
{
  try
  {
       // HttpContext.Current.Session["sessionName"]; //To Get session 
       //Delete Entry from Session
       return "true"
  }
  catch(Exception)
  {
       throw;
  }

}

Answer 2

标记：

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
 <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
 <script type="text/javascript">
      $(function () {
           $("#tabs").tabs({
           });


           $("#tabs span.ui-icon-close").on("click", function () {
                var itemId = $(this).data().id;
                $(this).closest("li").remove();
                $("#tabs-" + itemId).remove();
                $("#tabs").tabs("refresh");

                $.ajax({
                     url: '<%= ResolveClientUrl("~/WebForm1.aspx/DeleteRecord") %>',
                     type: "POST",
                     dataType: "json",
                     contentType: "application/json; charset=utf-8",
                     data: JSON.stringify({ id: itemId })
                });
           });
      });
 </script>

 <div id="tabs">
      <ul>
           <asp:Repeater runat="server" ID="rptTabs">
                <ItemTemplate>
                     <li><a href='<%# Eval("ID", "#tabs-{0}") %>'>
                          <%# Eval("Title") %></a> <span class="ui-icon ui-icon-close" data-id='<%# Eval("ID") %>'>Remove Tab</span>
                     </li>
                </ItemTemplate>
           </asp:Repeater>
      </ul>
      <asp:Repeater runat="server" ID="rptTabsSub">
           <ItemTemplate>
                <div id='<%# Eval("ID", "tabs-{0}") %>'>
                     <%# Eval("Content") %>
                </div>
           </ItemTemplate>
      </asp:Repeater>
 </div>

代码隐藏：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        var dataSource = (from id in Enumerable.Range(0, 10)
                            select new { ID = id, Title = id.ToString() + " Title", Content = Guid.NewGuid().ToString() }).ToList();

        rptTabs.DataSource = dataSource;
        rptTabs.DataBind();

        rptTabsSub.DataSource = dataSource;
        rptTabsSub.DataBind();
    }
}

[WebMethod]
public static void DeleteRecord(int id)
{
    //delete record by id
}

如何在代码后面处理Jquery选项卡

2 个答案: