javascript - 根据单击的提交按钮分配不同的 Onclicks

Question

我有一个 asp.net 表单，其中有 3 个按钮，这些按钮触发单击按钮的相关事件模式，并供用户输入详细信息。当前每个模式都有一个 OnClick 它将带入我的代码后面。

我现在正在尝试实现一个在单击每个模式上的“提交”时显示的成功模式。

我只想让我的其他三个人共享一个成功模式。当初始模式关闭时，我正在工作，然后显示我的成功模式，但它不会写入我的数据库。

如果我将我的一个 OnClick 广告到我的成功模式上的按钮，它会发布到我的数据库，所以我想我需要一些方法，添加一个 OnClick 到成功模式上的“关闭”按钮，但我需要它根据首先选择的按钮填充正确的 OnClick 。

当前代码

数据输入模式提交按钮

<asp:Button CssClass="btn btn-success" ID="btnSubmitNewFunc" runat="server" Text="Submit" ToolTip="Click to submit your request." data-toggle="modal" data-target="#modalSuccess" data-backdrop="static" data-keyboard="false" data-dismiss="modal" OnClick="btnSubmitNewFunc_Click" />
<asp:Button CssClass="btn btn-success" ID="btnSubmitBug" runat="server" Text="Submit" ToolTip="Click to submit your request." data-toggle="modal" data-target="#modalSuccess" data-backdrop="static" data-keyboard="false" data-dismiss="modal" OnClick="btnSubmitBug_Click" />
<asp:Button CssClass="btn btn-success" ID="btnSubmitNewPlace" runat="server" Text="Submit" ToolTip="Click to submit your request." data-toggle="modal" data-target="#modalSuccess" data-backdrop="static" data-keyboard="false" data-dismiss="modal" OnClick="btnSubmitNewPlace_Click" />

成功模式关闭按钮

<asp:Button CssClass="btn btn-warning" ID="btnModalSuccess" runat="server" Text="Close" ToolTip="Click to close this screen." />

Answer 1

如果您想在点击btnModalSuccess时提交数据，可以先将原始命令名称保存在隐藏字段中:

<asp:HiddenField ID="hiddenCommand" runat="server" />
<asp:Button ID="btnSubmitNewFunc" ... OnClientClick="return showSuccess('NewFunc');" />
<asp:Button ID="btnSubmitBug" ... OnClientClick="return showSuccess('Bug');" />
<asp:Button ID="btnSubmitNewPlace" ... OnClientClick="return showSuccess('NewPlace');" />

借助此 Javascript 实用函数:

function showSuccess(cmd) {
    $('#hiddenCommand').val(cmd); 
    $('#modalsuccess').modal('show');
    return false; // To prevent the postback
}

在btnModalSuccess的事件处理程序中，处理将取决于隐藏字段中存储的命令:

protected void btnModalSuccess_Click(object sender, EventArgs e)
{
    switch (hiddenCommand.Value)
    {
        case "NewFunc":
            ProcessNewFunc();
            break;

        case "Bug":
            ProcessBug();
            break;

        case "NewPlace":
            ProcessNewPlace();
            break;
    }
}

<小时/>话虽这么说，我可能建议您先将数据发布到服务器，然后显示成功模式。否则，用户可以看到成功模式并关闭浏览器，而无需单击 btnModalSuccess，从而阻止数据保存到数据库。

它在代码隐藏中可能看起来像这样:

protected void btnSubmitNewFunc_Click(object sender, EventArgs e)
{
    // Save data to DB here
    ...
    ShowSuccessModal();
}

protected void btnSubmitBug_Click(object sender, EventArgs e)
{
    // Save data to DB here
    ...
    ShowSuccessModal();
}

protected void btnSubmitNewPlace_Click(object sender, EventArgs e)
{
    // Save data to DB here
    ...
    ShowSuccessModal();
}

private void ShowSuccessModal()
{
    ScriptManager.RegisterStartupScript(this, this.GetType(), "ShowSuccess", "$('#modalsuccess').modal('show');", true);
}

按钮btnModalSuccess将简单地关闭模式而不会导致回发:

<asp:Button ID="btnModalSuccess" runat="server" Text="Close" ... OnClientClick="$('#modalsuccess').modal('hide'); return false;" />