C＃的用户控件的jQuery阿贾克斯异步回发 [英] Jquery .ajax async postback on C# UserControl
问题描述
我正在加入待办事项列表到项目系统，并希望能有待办事项创建触发异步回发来更新数据库。我真的很想举办这次在用户控件，所以我可以删除待办事项列表到项目页面，任务页面或独立的待办事项列表页。
I'm working on adding a todo list to a project system and would like to have the todo creation trigger a async postback to update the database. I'd really like to host this in a usercontrol so I can drop the todo list onto a project page, task page or stand alone todo list page.
下面是我有。
用户控制TodoList.ascx，它生活在Controls目录。
User Control "TodoList.ascx" which lives in the Controls directory.
这是坐落在该用户控件顶部的脚本。你可以看到，我开始建设jsonText回发，但是当没有工作，我只是想回发一个空的数据变量，并移除了AddTodo2法的String []项目的变量。
The script that sits at the top of the UserControl. You can see where I started building jsonText to postback but when that didn't work I just tried posting back an empty data variable and removed the 'string[] items' variable from the AddTodo2 method.
<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的code的其余部分。
The rest of the code on the 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页的想法。
To test the idea I created a /TodoList.aspx page that lives in the root directory.
<uc1:TodoList runat="server" ID="tdl1" TodoListId="1" ></uc1:TodoList>
在CS为todolist.aspx
The cs for the todolist.aspx
protected void Page_Load(object sender, EventArgs e)
{
SecurityManager sm = new SecurityManager();
sm.MemberLevelAccessCheck(MemberLevelKey.AreaAdmin);
}
public static string AddTodo2()
{
return "yea!";
}
我希望我能有一个可以用来显示多个待办事项列表，并创建一个全新的待办事项列表，以及一个控制。
My hope is that I can have a control that can be used to display multiple todo lists and create a brand new todo list as well.
当我点击#divAddButton我可以看它建立在回传萤火但一旦它完成它，提醒'错误'运行错误部分。我不明白为什么。
When I click on the #divAddButton I can watch it build the postback in firebug but once it completes it runs the error portion by alerting 'error'. I can't see why.
我真的宁愿响应法住用户控件内为好。因为我会放弃它的几页，以保持不必去把一个方法每一个人页面上。
I'd really rather have the response method live inside the user control as well. Since I'll be dropping it on several pages to keep from having to go put a method on each individual page.
任何帮助将是AP preciated。
Any help would be appreciated.
我是不是能够得到jQuery的Ajax来工作，所以我备份，并试图只是把div和jQuery的页面本身上，并创建了一个页面webservice.asmx处理回发。
我仍然得到从jQuery返回的错误，并想知道如果我有什么错误配置或其他一些问题。
I wasn't able to get the jquery ajax to work so I backed up and tried just putting the div and the jquery on the page itself and created a webservice.asmx page to handle the postbacks. I'm still getting the error returned from the jquery and wondering if I've got something configured wrong or some other issue.
这里的todo.aspx
Here's the 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不变。有没有办法找出是什么原因造成的错误？
The webservice.asmx is unchanged from the default bit Visual Studio created. Is there a way to find out what is causing the error?
推荐答案
为了使用jQuery做这个，你介绍，你需要将它发送到您ASPX.cs文件中的装饰方法，你不能直接发送到的.ascx方法。好消息是，aspx.cs方法可以调用ASCX之一，因此它确实是pretty方便，你可以使用它作为一个传递到这一点。
In order to do this with jQuery as you describe, you need to sent it to a decorated method in your ASPX.cs file, you cannot send directly to the .ascx method. The good news is that the aspx.cs method can call the ascx one, so it is really pretty easy and you can just use it as a pass through to that.
[WebMethod]
public static string AddTodo2(myTodo todo2add)
{
//call your ascx method here
mymethod(todo2add.td1Id,todo2add.description);
return "yea!";
}
在aspx.cs结束时，或在另一个类库放在你的类，因此它知道如何去code中的东西：
at the end of the aspx.cs, or in another class library put in your class so it knows how to decode the stuff:
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调用：
slight change to the ajax call:
$("#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");
}
});
});
这篇关于C＃的用户控件的jQuery阿贾克斯异步回发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
