javascript - 当我需要运行服务器端代码时，如何响应按钮的点击(不提交页面)？

Question

这有点像我的 ASP.NET (Sharepoint) WebPart/页面的第 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) 如果用户选择了“生成 PDF”按钮，则运行代码:

private void GeneratePDF(List<ListColumns> 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() 的第一行有一个断点，但我没有到达它，dod-durn 它。

更新 2

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

tmr.Tick += TickHandler;
tmr.Init += InitHandler;
tmr.Enabled = true;
message.Text = "Converting the data to a PDF file has been successful";

(我确实看到了消息文本，尽管这不是真的)。​​

两种方法都有断点:

private void TickHandler(object sender, object e)
{
    GeneratePDF(listOfListItems);
}

private void InitHandler(object sender, object e)
{
    GeneratePDF(listOfListItems);
}

...两者都没有达到。为什么不？从理论上讲，这似乎应该可行...(我知道，理论上一切都可行)。

Answer 1

您希望完成的事情可以通过网络服务和 ajax 来完成。

Jquery.ajax 可用于向网络服务(或网页，或其他)发送请求。这是我的一个网站的示例:

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "FoamServices.asmx/GetFoamNames",
    data: "{'term':'" + $("#txtFoamName").val() + "'}",
    success: function (data) {
        //whatever you want to do with the data
    },
    error: function (result) {
        alert("Error");
    }
    });

有关此示例的更多信息，请访问 Jquery.ajax website。 ，但要点是我设置了一个网络服务，FoamServices.asmx 和该网络服务中的 GetFoamNames 方法。 GetFoamNames 将“术语”作为参数。成功后，我会获取从该网站收到的数据并执行我想要的操作(检查真实值，将其注入(inject)页面，等等)。

在服务器端，这是我的网络服务:

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]


[System.Web.Script.Services.ScriptService]
public class FoamServices : System.Web.Services.WebService {

public FoamServices () {

    //Uncomment the following line if using designed components 
    //InitializeComponent(); 
}

[WebMethod]
public string[] GetFoamNames(string term) {
    List<Foam> foams = Foam.Read(term);
    string[] foamNames = new string[foams.Count];
    for(int i = 0; i < foams.Count; i++)
    {
        foamNames[i] = foams[i].FoamName;
    }
    return foamNames;
}

}                        

这是 web 服务的基本设置，它还允许它接受来自 javascript (JQuery) 请求的参数。

我的服务所做的是针对数据库查询搜索词并返回结果。这是自动完成 JQuery 框的基本设置。

您可以根据自己的喜好调整它，或者您也可以使用 ajax 调用网页而不是 webservice 并让它做一些事情。

希望这对您有所帮助!