Asp .net ajax 自动完成功能不起作用。 Webmethod 没有被调用

Question

谁能告诉我为什么 WebMethod 不能单独在一个页面中触发，相同的代码在另一个页面中有效，但在我希望它工作的页面中无效。我将整个代码转移到一个新页面中，它在那里工作得很好，但是如果我在我的实际页面中使用它，它不会触发 webmethod。不知道发生了什么。

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css" rel="Stylesheet" type="text/css" />

    <script type="text/javascript">
           $(function () {
        $("[id$=txtSkill]").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '<% =ResolveUrl("HRMCareerEAF.aspx/GetSkills") %>',
                    data: "{ 'prefix': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.split('-')[0],
                                val: item.split('-')[1]
                            }
                        }))
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            },
            select: function (e, i) {
                $("[id$=hfSkillID]").val(i.item.val);
            },
            minLength: 1
        });
    });
    </script>

                                                                                       <asp:TextBox ID="txtSkill" runat="server" style="text-align: center" />

    [WebMethod(EnableSession = true)]
    public static string[] GetSkills(string prefix)
    {
        HRMRecruitmentProcessDAL obj = new HRMRecruitmentProcessDAL();
        DataSet ds = obj.BindMstcommon(HttpContext.Current.Session["CandidateID"].ToString(), "GetSkillsDD", "%" + prefix + "%");
        List<string> skills = new List<string>();
        for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
        {
            skills.Add(string.Format("{0}-{1}", ds.Tables[0].Rows[i]["Skill_Desc"].ToString(), ds.Tables[0].Rows[i]["skill_id"].ToString() + "|" + ds.Tables[0].Rows[i]["Skill_GroupID"].ToString())); //ds.Tables[0].Rows[i]["Skill_GroupDesc"].ToString() + " : " +
        }
        return skills.ToArray();
    }

Answer 1

请检查几件事

1) 检查是否可以使用 postman 等 api 测试工具调用 api

2) 如果您可以访问它，请检查 Web 开发人员工具控制台是否有任何错误，例如 404（未找到）或 500（内部服务器错误）

3) 修改你的

data: "{ 'prefix': '" + request.term + "'}",

到

 data: JSON.stringify({ prefix: request.term }),

请检查''的值

我也不确定，但请尝试摆脱 (EnableSession = true)。

Answer 2

非常感谢您的支持。 我发现了问题和解决方案。

实际问题是在部分页面回发后自动完成不起作用，我的 txtskill 位于 asp:multiview 的第三个视图中，它只刷新我的更新面板中的页面部分。

如果页面回发部分，Jquery 方法不会绑定。我在以下链接中得到了解决方案。

Jquery Auto complete extender not working after postback

我修改后的代码如下。

<script type="text/javascript">
      $(function () {
          SetAutoComplete();
      });
      $(document).ready(function () {
          var prm = Sys.WebForms.PageRequestManager.getInstance();
          prm.add_initializeRequest(InitializeRequest);
          prm.add_endRequest(EndRequest);

          // Place here the first init of the autocomplete
          SetAutoComplete();
      });

      function InitializeRequest(sender, args) {
      }

      function EndRequest(sender, args) {
          // after update occur on UpdatePanel re-init the Autocomplete
          SetAutoComplete();
      }
      function SetAutoComplete() {
          $("[id$=txtSkill]").autocomplete({
              source: function (request, response) {
                  $.ajax({
                      url: '<% =ResolveUrl("HRMCareerEAF.aspx/GetSkills") %>',
                      data: JSON.stringify({ prefix: request.term }),
                      dataType: "json",
                      type: "POST",
                      contentType: "application/json; charset=utf-8",
                      success: function (data) {
                          response($.map(data.d, function (item) {
                              return {
                                  label: item.split('-')[0],
                                  val: item.split('-')[1]
                              };
                          }))
                      }
                  });
              },
              select: function (e, i) {
                  $("[id$=hfSkillID]").val(i.item.val);
              },
              minLength: 1
          });
      }
    </script>

非常感谢您的支持。