这是用于操纵Employee Management系统（练习ADO.NET）的jQuery代码。我正在通过调用存储过程在ASP.NET中实现CRUD操作。该存储过程具有一个输出参数，并且工作正常，因为我已经在SSMS中进行了检查。
我的问题是，一旦选择“插入”选项，文本框就会进入以获取Employee的值。之后，我想在标签文本中显示OUT参数。但是，这不会发生。这是因为我正在实现$('#DropDownList1').change()中的逻辑。如果是这样，我如何确保在单击“提交”按钮后我能够看到该雇员的ID？
jQuery:
<script type="text/javascript">
$(function () {
$('#View').hide();
$('#Insert').hide();
debugger;
$('#DropDownList1').change(function() {
if ($(this).val() === 'View')
$('#View').show();
else
$('#View').hide();
if ($(this).val() === 'Insert') {
$('#Insert').show();
$('#Button2').click(function () {
$('#Label1').show();
});
} else
$('#Insert').hide();
});
});
</script>
Corresponding ASP.NET code:
protected void Button2_Click(object sender, EventArgs e)
{
using (SqlConnection con=new SqlConnection(CS))
{
try
{
SqlCommand cmd= new SqlCommand("sp_InsertNewEmployee",con);
//Stored Procedure checked and verified .It is returning data.
//Need to check jQuery for loading of Label Text.
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@first_name", TextBox3.Text);
cmd.Parameters.AddWithValue("@last_name", TextBox4.Text);
cmd.Parameters.AddWithValue("@salary", TextBox5.Text);
cmd.Parameters.AddWithValue("@city", TextBox6.Text);
//Add the output parameter to the command object
SqlParameter outPutParameter = new SqlParameter();
outPutParameter.ParameterName = "@id";
outPutParameter.SqlDbType = System.Data.SqlDbType.Int;
outPutParameter.Direction = System.Data.ParameterDirection.Output;
cmd.Parameters.Add(outPutParameter);
con.Open();
cmd.ExecuteNonQuery();
//Retrieve the value of the output parameter
string id = outPutParameter.Value.ToString();
Label1.Text = "Employee Id = " + id;
// SqlCommand cmd2 = new SqlCommand("sp_SelectAllEmployees", con);
// cmd2.CommandType = CommandType.StoredProcedure;
// cmd2.ExecuteReader();
con.Close();
con.Dispose();
}
catch (SqlException exception)
{
Console.WriteLine(exception);
throw;
}
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CRUD_WebForm.aspx.cs" Inherits="ADO_Demo.CRUD_WebForm" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js"></script>
<script type="text/javascript">
$(function () {
$('#View').hide();
$('#Insert').hide();
debugger;
$('#DropDownList1').change(function() {
if ($(this).val() === 'View')
$('#View').show();
else
$('#View').hide();
if ($(this).val() === 'Insert') {
$('#Insert').show();
$('#Button2').click(function () {
$('#Label1').show();
});
} else
$('#Insert').hide();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
What would you like to do?<br />
<asp:DropDownList ID="DropDownList1" runat="server" Height="16px" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" Width="148px">
<asp:ListItem></asp:ListItem>
<asp:ListItem>Insert</asp:ListItem>
<asp:ListItem>Update</asp:ListItem>
<asp:ListItem>Delete</asp:ListItem>
<asp:ListItem>View</asp:ListItem>
</asp:DropDownList>
<div id="View">
<br />
Enter the First Name Of Employee:
<asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_TextChanged" Width="153px"></asp:TextBox>
<br />
Enter the Last Name Of Employee :<asp:TextBox ID="TextBox2" runat="server" style="margin-left: 20px"></asp:TextBox>
<br />
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Submit" Width="153px" />
<br />
<br />
<br />
</div>
<div id="Insert">
Enter the Employee First Name
<asp:TextBox ID="TextBox3" runat="server" Width="196px"></asp:TextBox>
<br />
<br />
Enter the Employee Second Name:
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
<br />
<br />
Enter the Employee Salary:
<asp:TextBox ID="TextBox5" runat="server" OnTextChanged="TextBox5_TextChanged"></asp:TextBox>
<br />
<br />
Enter Location Of Employee:
<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
<br />
<br />
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Insert" Width="128px" />
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<br />
<br />
</div>
<asp:GridView ID="GridView1" runat="server" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
<FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
<HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
<PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
<RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FFF1D4" />
<SortedAscendingHeaderStyle BackColor="#B95C30" />
<SortedDescendingCellStyle BackColor="#F1E5CE" />
<SortedDescendingHeaderStyle BackColor="#93451F" />
</asp:GridView>
</form>
</body>
</html>