我想通过ajax调用在webform中调用web方法函数，该调用更新名为“First”的分区中的文本框值，而不刷新整个页面，只覆盖那些文本框或分区。我的asp.net代码包含带有jQuery的ajax，如下所示：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="test_with_ajax.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="First" style="margin-left:45%">
<asp:TextBox ID="TextBoxName" runat="server"></asp:TextBox>
<br />
<br />
<asp:TextBox ID="TextBoxID" runat="server"></asp:TextBox>
</div>
<br />
<div id="Second" style="margin-left:50%">
<asp:Button ID="ShowButton" runat="server" Text="Show"/>
</div>
<asp:ScriptManager ID="ScriptManager" runat="server" EnableCdn="true" AjaxFrameworkMode="Disabled">
<Scripts>
<asp:ScriptReference Path="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"/>
</Scripts>
</asp:ScriptManager>
<script>
var pageurl = '<%=ResolveUrl("~/WebForm1.aspx/Show()") %>';
$('document').ready
(
function () {
$("#ShowButton").click
(
function (e) {
e.preventDefault();
$.ajax
(
{
type: 'POST',
URL: pageurl,
async: "true",
success: function (x) {
alert("Done Successfully with " + x.msg);
},
error: function (e) { alert("The call got failed due to " + e.msg); }
}
);
//$("#First").html("").append(data);
}
);
}
)
</script>
</form>
</body>
</html>
我的webform类包含am调用的函数：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace test_with_ajax
{
public partial class WebForm1 : System.Web.UI.Page
{
[WebMethod]
public static void Show()
{
WebForm1 t = new WebForm1();
t.TextBoxName.Text = "Sarthak";
t.TextBoxID.Text = "66";
}
}
}
但我没有得到我想要的预期结果。它显示了ajax调用成功部分的警告消息，但根本不更新文本框。
答案 0 :(得分：0)
这不是更新文本框的正确方法，因为您正在创建webform的新对象并将值分配给文本框。您应该从webmethod返回数据并在javascript代码中更新文本框。还要在ajax调用中添加数据类型。
试试这个
[WebMethod]
public static string Show()
{
return "Hello world";
}
比你在ajax成功写得像这样
success: function (x) {
alert("Done Successfully with " + x.msg);
$('#TextBoxName').val(x.d);
},
这只是一个字符串，你可以返回数组或列表或obejct你需要的任何东西。
答案 1 :(得分：0)
试试这个，在函数后面的代码中修复断点，如果它命中，然后将类型更改为字符串并返回您想要的内容，然后在客户端完成您的更改
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="First" style="margin-left:45%">
<asp:TextBox ID="TextBoxName" runat="server"></asp:TextBox>
<br />
<br />
<asp:TextBox ID="TextBoxID" runat="server"></asp:TextBox>
</div>
<br />
<div id="Second" style="margin-left:50%">
<asp:Button ID="ShowButton" runat="server" Text="Show"/>
</div>
<script type="text/javascript" src="jquery.js"></script> <!--add your jquery source path in src -->
<script type="text/javascript">
var sample="hai"
$('document').ready
(
function () {
$("#ShowButton").click
(
function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "WebForm1.aspx/Show",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg)
{
//$("#TextBoxName").value(msg.d);
}
});
//$("#First").html("").append(data);
}
);
}
</script>
</form>
</body>
</html>
背后的代码
[WebMethod]
public static string Show(string sample)
{
return sample;
}
答案 2 :(得分：0)
类型：“GET” - 是必需的。 DataType：“json”应该没问题。 Webmethod需要返回一些可序列化的数据，在这种情况下可以返回字符串。在Inside Success函数中，您可以使用Jquery和$（“＃TextBoxName”）。val（'someval'）;
处理这类错误的最佳方法是使用Firefox并安装Firebug。在Firebug中，使用“脚本”选项卡，您可以在其中查看正在发生的事情以及从webMethod获取的数据。
答案 3 :(得分：0)
Imports System
Imports System.Web
Imports System.Web.Services
Partial Class _Default
Inherits System.Web.UI.Page
<WebMethod()> _
Public Shared Function isDuplicate() As String
Return "Hello text"
End Function
End Class<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript">
function getData() {
$.ajax({
type: 'POST',
url: 'Default.aspx/isDuplicate',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert("Done Successfully with " + data.d);
$("#TextBox1").val(data.d);
$("#TextBox2").val(data.d);
$("#TextBox3").val(data.d);
}
}
);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server" ID="scr"></asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="upd"></asp:UpdatePanel>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:Label runat="server" ID="lbl"></asp:Label>
<asp:Button runat="server" ID="btn" Text="Click" OnClientClick="getData(); return false;" />
</div>
</form>
</body>
</html>
尝试这样的事情。
答案 4 :(得分：0)
由于没有回发，服务器端代码（在本例中为Show方法）无法通过Jquery Ajax呈现任何内容。
尝试使用webmethod将JSON数据返回给客户端，并使用相同的数据更新$ .ajax（）的成功回调函数中的texbox;
试试这个：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace test_with_ajax
{
public partial class WebForm1 : System.Web.UI.Page
{
[WebMethod]
public static object Show()
{
object result = new
{
TextboxName = "Sarthak";
TextBoxID = "66";
}
return result;
}
}
}
你的Ajax调用应该是：
<script>
var pageurl = '<%=ResolveUrl("~/WebForm1.aspx/Show()") %>';
$('document').ready
(
function () {
$("#ShowButton").click
(
function (e) {
e.preventDefault();
$.ajax
(
{
type: 'POST',
URL: pageurl,
async: "true",
success: function (x) {
var data = JSON.parse(x.d);
$('#TextboxName').val(data.TextboxName);
$('#TextboxID').val(data.TextboxID);
},
error: function (e) { alert("The call got failed due to " + e.msg); }
}
);
}
);
}
)
</script>