c# - 我如何在代码隐藏中处理 Jquery 选项卡关闭

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>

我的标签有关闭按钮。但是我想当一个人在我想用我选择的标签文本删除会话列表中的一些数据之后关闭我的标签。例如。

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

怎么能写出这样的代码？

最好的祝福

Answer 1

在脚本管理器中设置 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
}