网页表单执行需要服务器端吗,javascript - 当我需要运行服务器端代码时,如何响应单击按钮(不提交页面)? - 堆栈内存溢出...

我的ASP.NET(Sharepoint)WebPart /页面有点像Catch-22。 我需要对按钮单击做出响应,但是这样做需要代码是客户端(jQuery),因为服务器端/代码背后似乎仅可用于“提交”过程,而我不希望在这种情况下提交页面。

更清楚地说,这就是我可以做的事情:拥有一个按钮(更精确地说,是一个HtmlButton),并在不提交表单的情况下响应单击它:

服务器端(C#):

HtmlButton btnAddFoapalRow = null;

. . .

btnAddFoapalRow = new HtmlButton();

btnAddFoapalRow.Attributes["type"] = "button";

btnAddFoapalRow.InnerHtml = "+";

btnAddFoapalRow.ID = "btnAddFoapalRow";

this.Controls.Add(btnAddFoapalRow);

客户端(jQuery):

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {

... script elided for brevity

});

这很好。

我可以在服务器端(在C#中)为“提交”按钮完成所有操作,如下所示:

Button btnSave = new Button();

btnSave.Text = "Save";

btnSave.Click += new EventHandler(btnSave_Click);

this.Controls.Add(btnSave);

. . .

private void btnSave_Click(object sender, EventArgs e)

{

. . . code elided for brevity

}

但是问题的症结在于,我需要在不提交表单的情况下响应单击按钮,然后在服务器端运行一些代码。 我可以满足jQuery中的第一个要求(如上面的HtmlButton btnAddFoapalRow所示),但最终需要调用一些C#代码来响应单击-我需要在服务器端执行操作。

所以我的问题是:如何从客户端代码“戳”服务器端代码以“唤醒并调用此(某些)函数”?

也许我可以像这样更新在C#中创建的变量(HiddenField):

HiddenField PDFGenBtnClicked = null;

. . .

PDFGenBtnClicked = new HiddenField();

PDFGenBtnClicked.ID = "pdfgenbtnclicked";

PDFGenBtnClicked.Value = "no";

this.Controls.Add(PDFGenBtnClicked);

...来自jQuery,就像这样:

$(document).on("click", '[id$=btnGeneratePDF]', function () {

$('[id$=pdfgenbtnclicked]').val("yes");

});

..然后在服务器端使用如下代码启动该方法的调用:

if (PDFGenBtnClicked.Value == "yes")

{

GeneratePDF(listOfListItems);

}

...但是如何使这(最后)代码被调用? 我可以在页面上放置一个计时器,让它每隔一段时间检查一次PDFGenBtnClicked.Value的状态吗? 这可能是可能的,但几乎可以肯定是戈德堡式的。

谁有更好的主意?

更新

从理论上讲(我认为!),这应该可以工作(从客户端代码间接运行服务器端代码的非Ajax方式):

0)创建计时器

private Timer tmr = null;

1)创建“生成PDF”按钮和计时器:

btnGeneratePDF = new HtmlButton();

btnGeneratePDF.Attributes["type"] = "button";

btnGeneratePDF.InnerHtml = "Generate PDF";

btnGeneratePDF.ID = "btnGeneratePDF ";

this.Controls.Add(btnGeneratePDF);

tmr = new Timer();

tmr.Interval = 3000; // three seconds

tmr.Tick += TickHandler;

tmr.Enabled = true;

2)当计时器跳闸时调用方法:

private void TickHandler(object sender, object e)

{

GeneratePDF(listOfListItems);

}

3)如果用户选择了“ Generate PDF”按钮,请运行代码:

private void GeneratePDF(List listOfListItems)

{

if (PDFGenBtnClicked.Value != "yes")

{

return;

}

tmr.Enabled = false; // only run this once, after val has changed to "yes" by the user clicking the "btnGeneratePDF" button (set from "no" to "yes" in jQuery's response to the clicking of the button)

. . .

但是,我在GeneratePDF()的第一行有一个断点,但没有到达,断断续续地断了它。

更新2

我什至为init添加了另一个事件处理程序:

tmr.Tick += TickHandler;

tmr.Init += InitHandler;

tmr.Enabled = true;

message.Text = "Converting the data to a PDF file has been successful";

(虽然不是,但我确实看到了消息Text)。

两种方法都有断点:

private void TickHandler(object sender, object e)

{

GeneratePDF(listOfListItems);

}

private void InitHandler(object sender, object e)

{

GeneratePDF(listOfListItems);

}

...都没有达到。 为什么不? 从理论上讲,这似乎应该起作用...(我知道,一切都在理论上起作用)。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这个应用可以使用前端技术(如HTML、CSS、JavaScript)和后端技术(如PHP、Node.js、Java等)来实现。 下面是一个简单的示例代码,用于前端HTML页面中的表单部分: ```html <form id="feedback-form"> <label for="name">姓名:</label> <input type="text" id="name" name="name"><br> <label for="email">电子邮件:</label> <input type="email" id="email" name="email"><br> <label for="message">留言:</label> <textarea id="message" name="message"></textarea><br> <button type="button" onclick="submitFeedback()">确定</button> </form> ``` 在表单中,用户需要输入姓名、电子邮件和留言内容。当用户单击“确定”按钮,会调用JavaScript函数 `submitFeedback()` 来提交表单数据到服务器。 下面是一个简单的示例代码,用于前端JavaScript部分: ```javascript function submitFeedback() { // 获取表单数据 var name = document.getElementById("name").value; var email = document.getElementById("email").value; var message = document.getElementById("message").value; // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 设置请求方法和URL xhr.open("POST", "/submit-feedback.php", true); // 设置请求头 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 设置回调函数 xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { // 成功提交表单后,商家可以向用户返回信息 var response = xhr.responseText; alert(response); } else { alert("提交表单失败!请稍后再试。"); } } }; // 发送表单数据到服务器 var data = "name=" + encodeURIComponent(name) + "&email=" + encodeURIComponent(email) + "&message=" + encodeURIComponent(message); xhr.send(data); } ``` 在JavaScript函数 `submitFeedback()` 中,我们首先获取了表单中的三个输入框内容,并创建了一个XMLHttpRequest对象来向服务器发送请求。在这个例子中,我们使用POST请求将表单数据提交到服务器的 `submit-feedback.php` 脚本。 在发送请求之前,我们设置了请求头 `Content-Type` 为 `application/x-www-form-urlencoded`,这是一种常见的表单数据编码方式。然后,我们设置了回调函数 `onreadystatechange`,当服务器返回响应,该函数将被调用。 在回调函数中,我们首先检查XMLHttpRequest对象的 `readyState` 是否为 `XMLHttpRequest.DONE`,表示服务器已经返回了完整的响应。如果响应状态码为200,则表示表单已经成功提交到服务器。商家可以根据用户留言,向用户返回相应的信息。如果响应状态码不是200,则表示表单提交失败。 最后,我们将表单数据编码为URL格式,并通过 `xhr.send(data)` 发送到服务器。商家可以在服务器端解析表单数据,并根据用户意见向用户返回信息。这个部分可以使用PHP、Node.js、Java等后端技术来实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值