AJAX AutoComplete Extender - 设置 ContextKey 参数值并将其与前缀文本一起传递给 WebMethod

Posted

技术标签:

【中文标题】AJAX AutoComplete Extender - 设置 ContextKey 参数值并将其与前缀文本一起传递给 WebMethod【英文标题】:AJAX AutoComplete Extender - set ContextKey Paramerter-value & pass it to WebMethod along with the prefixText 【发布时间】:2012-12-06 11:17:45 【问题描述】:

了解 AutoComplete 属性后 - ContextKey

我把它当作一个优势:

每个扩展器对象的数据源将由相同的 WebMethod 处理。

这本身就是我的成就。

现在每件事都是最完美的,问题是:

我需要传递另一个参数,当第二个文本框发送对 AutoComplete-Datasource 的请求时,就在 stage = table 被选中之后。

所以现在我不仅需要硬编码/常量,还需要所选表的值。

这实际上是#TBX_TableSelectorFirstStage 的值,以及硬编码的ContextKey 值...

(类似于ContextKey += value of TBX_TableSelectorFirstStage

这样我就可以按请求的表(表的名称)绘制指定的列列表

这是Jquery代码

<script type="text/javascript">
   $('document').ready(function () 

       var IvalidValue_Msg = "table was not selected";
       var TBX_tables = $(this);

       var TBX_Columns = $('#TBX_ColumnsSelectorFirstStage');


       $('#TBX_TableSelectorFirstStage')
       .val("Choose a Table")
       .focus(function () 

           $(this).val("");
           $(this).attr("dir", "ltr");

       ).blur(function () 
           var TBXTablsVALUE = $('#TBX_TableSelectorFirstStage').val();
           var Lngth = $('#TBX_TableSelectorFirstStage').val().length;
           var InvalidTBXBlur_TablesValue = TBXTablsVALUE == "" || TBXTablsVALUE == " " || Lngth < 4;
           if (InvalidTBXBlur_TablesValue) 
               $(this).focus();
               $(this).val(IvalidValue_Msg);
           
           else 

               $(TBX_Columns).focus();
               SetContextKeyValue();
           
           //$(this).next(':input').focus();

       ).change(function () 
           var TBXTablsVALUE = $('#TBX_TableSelectorFirstStage').val();
           var Lngth = $('#TBX_TableSelectorFirstStage').val().length;
           var InvalidTBXBlur_TablesValue = TBXTablsVALUE == "" || TBXTablsVALUE == " " || Lngth < 4;

           if (InvalidTableValue) 
               $(this).val(IvalidValue_Msg);
           
           else 
               SetContextKeyValue();
           
       ).click(function () 


               $(this).val("");

       );
   );
        /// ==========================================================\\\
       ///Jquery Section That Is Suppose To manipulate contextKey Property.

       function SetContextKeyValue() 
     //  var ttt = $get('AjaxAcEx_Columns_FirstStage',
       alert("asasas");
       // var x = $('#AutoCompleteExtender3'); //.set_contextKey($get('AjaxAcEx_Tables_FirstStage').value);
       alert($('#AjaxAcEx_Columns_FirstStage').attr("id")); 
   

这是 ASPX 代码

<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolKitScrptMan1" runat="server"></cc1:ToolkitScriptManager>

<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" TargetControlID="TBX_FntsAC" runat="server"
                         MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1" CompletionInterval="100" 
                         ServiceMethod="MyAcReqHandler" ContextKey="acFontsRquest"
                         FirstRowSelected="true" CompletionListCssClass="CL_Css_DataBase" CompletionListItemCssClass="CL_ItemCss_DataBase" CompletionListHighlightedItemCssClass="CL_tHighlightedItemCss_DataBase">
</cc1:AutoCompleteExtender>
<cc1:AutoCompleteExtender ID="AutoCompleteExtender2" BehaviorID="AjaxAcEx_Tables_FirstStage" TargetControlID="TBX_TableSelectorFirstStage" runat="server"
                         MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1" CompletionInterval="100"
                         ServiceMethod="MyAcReqHandler" ContextKey="acTablesSelector_FirstStage"
                         FirstRowSelected="true" CompletionListCssClass="CL_Css_DataBase" CompletionListItemCssClass="CL_ItemCss_DataBase" CompletionListHighlightedItemCssClass="CL_tHighlightedItemCss_DataBase">
</cc1:AutoCompleteExtender>


<%--  Here is where i am stuck .
     object /element -  AutoCompleteExtender3 / BehaviorID AjaxAcEx_Columns_FirstStage
    This is the object i need to Set it's ContextKey attribute-value,
     with the result value of #TBX_TableSelectorFirstStage
--%>

<cc1:AutoCompleteExtender ID="AutoCompleteExtender3" BehaviorID="AjaxAcEx_Columns_FirstStage" TargetControlID="TBX_ColumnsSelectorFirstSTage" runat="server"
                         MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1" CompletionInterval="100"
                         ServiceMethod="MyAcReqHandler" ContextKey="acColumnsSelector_FirstStage"
                         FirstRowSelected="true" CompletionListCssClass="CL_Css_DataBase" CompletionListItemCssClass="CL_ItemCss_DataBase" CompletionListHighlightedItemCssClass="CL_tHighlightedItemCss_DataBase">
</cc1:AutoCompleteExtender>


<div id="Div_firstStage" runat="server" style="width:90%" dir="rtl">
    <asp:TextBox ID="TBX_TableSelectorFirstStage"  runat="server" />
    <asp:TextBox ID="TBX_ColumnsSelectorFirstStage" runat="server" />   

</div>

* .Cs 代码隐藏* (webMethod)

[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod(EnableSession = true)]

public static List<string> MyAcReqHandler(string prefixText, string contextKey)


    List<string> retListAC = new List<string>();
    switch (contextKey)
    

        case AutoComplete.Param.acTablesSelector_FirstStage:
            retListAC = GetListForAutoComplete<HTDB_Tables>(App.VarNms.SesDbTablsList);
            break;
        case AutoComplete.Param.acColumnsSelector_FirstStage:
            retListAC = GetListForAutoComplete<HTDB_Cols>(App.VarNms.SesDbTablsList);
            break;
        case AutoComplete.Param.acFontsRquest_SecondStage:
            retListAC = GetListForAutoComplete<fntNams>(App.VarNms.SesFontsList);
            break;

    

    return AutoComplete.FromListStr(prefixText, retListAC);




private static List<string> GetListForAutoComplete<TheClassNameHere>(string SessionVarName, string NestedClassName="")

    List<string> ReturnedList = new List<string>();
    if (CurrSesVarSet.SesVar_AcDsListStr.Count == 0)
    
        bool isNested = typeof(TheClassNameHere).IsNested;
        switch (isNested)
        
            case true:
                ReturnedList = RflectMeths.anyNestedClassFldsAsListByType<TheClassNameHere>(NestedClassName);
                break;
            default:
                ReturnedList = RflectMeths.anyClassFldsAsListByType<TheClassNameHere>();
                break;
        



        CurrSesVarSet.SesVar_AcDsListStr = ReturnedList;
        CurrentSession.AddVar(SessionVarName, ReturnedList);
    
    else
        if (CurSessionMesthods.VarExistStat(App.VarNms.SesFontsList))
             ReturnedList = CurSessionMesthods.GetSessionVar.AsListStr(SessionVarName);
        else ReturnedList = CurrSesVarSet.SesVar_AcDsListStr;
    return ReturnedList;

由于此应用程序中的一项努力是避免完全回发,我想实施 - 设置ContextKey,通过Jquery,... 除非 我的基本假设是错误的,即通过 c# 执行此操作 - 后面的代码将导致一整页回发,因此,如果它在没有重新加载页面的情况下完成,我不应该关心,只要我可以发送此参数,到目前为止,我一直保持着类似桌面的用户体验(;

感谢您的帮助,我们将不胜感激!

【问题讨论】:

【参考方案1】:

我为这个答案搜索了很多,因为我找不到关于这个实现的任何信息我想我必须更加努力,所以我记得有人告诉我一些关于体育的事情,你必须这样做才能赢得这场比赛,所以尽可能快地开始,然后加速,尽管很难发现我只是多工作了一点。

所以我缺少什么,因为我缺乏使用 Jquery 的最少经验

我在互联网上找到的一件事是可用于设置 ContextKey 的功能 所以因为我太忙于尝试和寻求帮助(完全适合我的场景的现成代码示例) 最终有了更多的尝试和错误,我不得不认为如果有一套。一定有get(:

这就是你可以操作现有密钥并将其与你想要的任何其他内容连接的方式

   $('document').ready(function () 
       var IvalidValue_Msg = "table was not selected";
       var TBX_tables = $(this);
       var TstTBXCLS = $(this).next();
       var TBX_Columns = $('#TBX_ColumnsSelectorFirstStage');


       $('#TBX_TableSelectorFirstStage')
       .val("Choose a Table")
       .focus(function () 

           $(this).val("");
           $(this).attr("dir", "ltr");

       ).blur(function () 
           var TBXTablsVALUE = $('#TBX_TableSelectorFirstStage').val();
           var Lngth = $('#TBX_TableSelectorFirstStage').val().length;
           var InvalidTBXBlur_TablesValue = TBXTBLSVALUE == "" || TBXTBLSVALUE == " " || Lngth < 4;
           if (InvalidTBXBlur_TablesValue) 
               $(this).focus();
               $(this).val(IvalidValue_Msg);
           
           else 

               $(TBX_Columns).focus();
               SetContextKeyValue();
           
           //$(this).next(':input').focus();

       ).change(function () 
           var TBXTablsVALUE = $('#TBX_TableSelectorFirstStage').val();
           var Lngth = $('#TBX_TableSelectorFirstStage').val().length;
           var InvalidTBXBlur_TablesValue = TBXTBLSVALUE == "" || TBXTBLSVALUE == " " || Lngth < 4;

           if (InvalidTableValue) 
               $(this).val(IvalidValue_Msg);
           
           else 
               SetContextKeyValue(TBXTBLSVALUE );
           
       ).click(function () 


               $(this).val("");

       );
   );

       function SetContextKeyValue(selectedTableName) 

           var CurrentConextKey = $find('AjaxAcEx_Columns_FirstStage').get_contextKey();
           var JointParams = CurrentConextKey + "_" + selectedTableName;
           $find('AjaxAcEx_Columns_FirstStage').set_contextKey(JointParams);
           alert(JointParams);

   

然后在后面的 c# 代码中,只需使用string.Split('_'),将它们都放入一个 c# 变量中。 我希望这将有助于其他具有相同用例的人,因为示例并不容易找到。

【讨论】:

以上是关于AJAX AutoComplete Extender - 设置 ContextKey 参数值并将其与前缀文本一起传递给 WebMethod的主要内容,如果未能解决你的问题,请参考以下文章

使用 AJAX 的 jQuery AutoComplete - 我错过了啥?

[easyUI] autocomplete 简单自动完成以及ajax从服务器端完成

jQuery Autocomplete (devbridge) Ajax 服务器端服务URL 搜索文件

AJAX AutoComplete Extender - 设置 ContextKey 参数值并将其与前缀文本一起传递给 WebMethod

使用jQuery Ajax调用Web方法

Jquery UI和Bootstrap JS冲突使Autocomplete停止工作