c#之C# UserControl 上的 Jquery .ajax 异步回发_编程设计

我正在努力将待办事项列表添加到项目系统，并希望待办事项创建触发异步回发以更新数据库。我真的很想在用户控件中托管它，这样我就可以将待办事项列表放到项目页面、任务页面或独立的待办事项列表页面上。

这是我的。

位于 Controls 目录中的用户控件“TodoList.ascx”。

位于用户控件顶部的脚本。您可以看到我从哪里开始构建 jsonText 以进行回发，但是当它不起作用时，我只是尝试回发一个空数据变量并从 AddTodo2 方法中删除“string[] items”变量。

<script type="text/javascript"> 
$(document).ready(function() { 
    // Add the page method call as an onclick handler for the div. 
$("#divAddButton").click(function() { 
        var jsonText = JSON.stringify({ tdlId: 1, description: "test test test" }); 
            //data: jsonText, 
        $.ajax({ 
            type: "POST", 
            url: "TodoList.aspx/AddTodo2", 
            data: "{}", 
            contentType: "application/json; charset=utf-8", 
            dataType: "json", 
            success: function(msg) { 
                alert('retrieved'); 
                $("#divAddButton").text(msg.d); 
            }, 
            error: function() { 
                alert("error"); 
            } 
        }); 
    }); 
});</script>

ascx 上的其余代码。

<div class="divTodoList"> 
<asp:PlaceHolder ID="phTodoListCreate" runat="server"> 
    <div class="divTLDetail"> 
        <div>Description</div> 
        <div><asp:TextBox ID="txtDescription" runat="server"></asp:TextBox></div> 
        <div>Active</div> 
        <div><asp:CheckBox ID="cbActive" runat="server" /></div> 
        <div>Access Level</div> 
        <div><asp:DropDownList ID="ddlAccessLevel" runat="server"></asp:DropDownList></div> 
    </div> 
</asp:PlaceHolder> 
<asp:PlaceHolder ID="phTodoListDisplayHeader" runat="server"> 
    <div id="divTLHeader"> 
        <asp:HyperLink ID="hlHeader" runat="server"></asp:HyperLink> 
    </div> 
</asp:PlaceHolder> 
<asp:PlaceHolder ID="phTodoListItems" runat="server"> 
    <div class="divTLItems> 
        <asp:Literal ID="litItems" runat="server"></asp:Literal> 
    </div> 
</asp:PlaceHolder> 
<asp:PlaceHolder ID="phAddTodo" runat="server"> 
    <div class="divTLAddItem"> 
        <div id="divAddButton">Add Todo</div> 
        <div id="divAddText"><asp:TextBox ID="txtNewTodo" runat="server"></asp:TextBox></div> 
    </div> 
</asp:PlaceHolder> 
<asp:Label ID="lbTodoListId" runat="server" style="display:none;"></asp:Label></div>

为了测试这个想法，我创建了一个位于根目录中的/TodoList.aspx 页面。

<uc1:TodoList runat="server" ID="tdl1" TodoListId="1" ></uc1:TodoList>

todolist.aspx 的 cs

 protected void Page_Load(object sender, EventArgs e) 
{ 
    SecurityManager sm = new SecurityManager(); 
    sm.MemberLevelAccessCheck(MemberLevelKey.AreaAdmin); 
} 
public static string AddTodo2() 
{ 
    return "yea!"; 
}

我希望我能有一个控件，可用于显示多个待办事项列表并创建一个全新的待办事项列表。

当我单击 #divAddButton 时，我可以看到它在 firebug 中构建回发，但一旦完成，它就会通过警告“错误”来运行错误部分。我不明白为什么。

我真的更愿意让响应方法也存在于用户控件中。因为我会把它放在几个页面上，以避免在每个单独的页面上放置一个方法。

如有任何帮助，我们将不胜感激。

我无法让 jquery ajax 工作所以我备份并尝试将 div 和 jquery 放在页面本身上并创建一个 webservice.asmx 页面来处理回发。我仍然收到从 jquery 返回的错误，想知道我是否配置错误或其他问题。

这是 todo.aspx

 <asp:Content runat="server" ContentPlaceHolderID="cpHolder" ID="ContentId"> 
<div id="divAddButton">Add Todo</div> 
<script type="text/javascript"> 
$(document).ready(function() { 
    // Add the page method call as an onclick handler for the div. 
    $("#divAddButton").click(function() { 
        var jsonText = JSON.stringify({ Todo: { TodoId: 1, Description: "test test test"} }); 
        //var jsonTextEmpty = jsonText.stringify({""}); 
        $.ajax({ 
            type: "POST", 
            url: "WebService.asmx/HelloWorld", 
            data: "{}", 
            contentType: "application/json; charset=utf-8", 
            dataType: "json", 
            success: function(msg) { 
                alert('retrieved'); 
                $("#divAddButton").text(msg); 
            }, 
            error: function() { 
                alert("error"); 
            } 
        }); 
    }); 
});

webservice.asmx 与 Visual Studio 创建的默认位没有变化。有没有办法找出导致错误的原因？

请您参考如下方法:

为了按照您的描述使用 jQuery 执行此操作，您需要将其发送到 ASPX.cs 文件中的修饰方法，不能直接发送到 .ascx 方法。好消息是 aspx.cs 方法可以调用 ascx 方法，所以它非常简单，您可以将它用作传递方法。

[WebMethod] 
public static string AddTodo2(myTodo todo2add) 
{ 
 //call your ascx method here 
 mymethod(todo2add.td1Id,todo2add.description); 
 return "yea!";  
}

在 aspx.cs 的末尾，或者放在你的类中的另一个类库中，这样它就知道如何解码这些东西:

public class myTodo 
   { 
       /// <summary> 
       /// web service/webmethod needs 0 parameter constructor 
       /// </summary> 
       public myTodo() 
       { 
       } 
       public myTodo(int tdlId, string description) 
       { 
           TdlId= tdlId; 
           Description= description; 
       } 
 
       public int TdlId; 
       public string Description; 
 
   }

ajax 调用的细微变化:

$("#divAddButton").click(function() {                 
   var jsonText = JSON.stringify({myTodo:{ tdlId: 1, description: "test test test" }}); 
   $.ajax({                
       type: "POST",                 
       url: "TodoList.aspx/AddTodo2",                 
       data: jsonText,                 
       contentType: "application/json; charset=utf-8",                 
       dataType: "json",                 
       success: function(msg) {                 
          alert('retrieved');                 
       $("#divAddButton").text(msg.d);                 
       },                 
       error: function() {                 
             alert("error");                 
             }                 
   });                 
});