ImageButton被点击后Toastr通知c# aspx

Question

我在c#中使用。aspx创建食品订购系统。现在我的问题是在菜单部分，我需要在我点击这个图像按钮后显示烤面包机通知。

<asp:ImageButton ID="btnAdd" runat="server" BorderStyle="None" Height="52px"  ImageUrl="~/assets/img/Cart.png" Width="151px" CommandName="AddtoCart" />

现在，我试着从NuGet包中使用toastr

<link href="content/toastr.css" rel="stylesheet" />
<script src="Scripts/toastr.js"></script>

<script type="text/javascript">
$(function () {
$("#btnAdd").click(function () {
toastr["success"]("Items added To Cart")
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
});

});
</script> 

我的问题是alert(")只适用于这个脚本而不是toastr，但是如果我创建一个非runat='server'按钮，toastr就会工作，比如这个<button id="add">Add to Cart</button>

但是在

中不起作用

<asp:Button ID="test" class="btn btn-primary" Text="Test" runat="server"  />

和

<asp:ImageButton ID="btnAdd" runat="server" BorderStyle="None" Height="52px"  ImageUrl="~/assets/img/Cart.png" Width="151px" CommandName="AddtoCart" />

里面的

<form  runat="server">
</form>

Answer 1

我加上这一点是为了让大家明白其中的原因。

1. 您可能正在使用Master Pages或User Control，这将改变您引用javascript的ID#btnAdd。解决方案可以使用clientIdMode = static，它不会改变控件的ID。但是要注意重复的Id问题。

2. 通常服务器控件有一个导致回发的服务器方法，在这种情况下，您的客户端脚本将无法工作。所以你需要考虑你想用它做什么。OnClientClick是我记得用于客户端函数的方法。

Answer 2

哎呀，刚刚找到了我的问题的解决方案，在这里。您可以将此代码放在母版页内容头部或aspx内容头部:

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<link media="screen" rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script>

<script type="text/javascript">
function success(msg) {
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
toastr.success(msg, "Success");
return false;
}

</script>

<script type="text/javascript">
function error(msg) {
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
toastr.error(msg, "Error");
return false;
}

</script>

加上把这段代码放到aspx.cs中，就像这样

protected void Test_Click(object sender, EventArgs e){
ScriptManager.RegisterStartupScript(this, typeof(Page), "Success", "<script> success('Item added to Cart')</script>", false);
}

这也与带有按钮或图像按钮的datalistitems兼容，就像这样:

if (e.CommandName.Equals("AddtoCart"))
{
img = (Image)e.Item.FindControl("Img") as Image;
name = (Label)e.Item.FindControl("lblProdName");
price = (Label)e.Item.FindControl("lblProdPrice");
stock = (Label)e.Item.FindControl("lblProdStock");
tx = (TextBox)e.Item.FindControl("txtQty");
String n = name.Text.Trim();
String p = price.Text.Trim();

if (Session["Username"] == null)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "script", "swal('You must Login first!','Redirecting to Login......', 'error').then((value) => { window.location ='Login.aspx'; });", true);
}
else
{

if (tx.Text == null || tx.Text == "0" || tx.Text == "")
{
// ScriptManager.RegisterStartupScript(this, this.GetType(), "script", "swal('Error', 'Select Quantity!', 'error');", true);
ScriptManager.RegisterStartupScript(this, typeof(Page), "Success", "<script> error('Select Quantity')</script>", false);
}
else if (ValueExist(n))//Check if item exist on cart
{
// ScriptManager.RegisterStartupScript(this, this.GetType(), "script", "swal('Error', 'Item already in Cart!', 'error');", true);
ScriptManager.RegisterStartupScript(this, typeof(Page), "Success", "<script> error('Item already in Cart')</script>", false);
}
else
{
int s = Int32.Parse(stock.Text);
int q = Int32.Parse(tx.Text);
string username = session.Text;
int total = Int32.Parse(p) * q;
if (q > s)//Checks if stocks is enough
{
//ScriptManager.RegisterStartupScript(this, this.GetType(), "script", "swal('Error', 'Not Enough Stocks!', 'error');", true);
ScriptManager.RegisterStartupScript(this, typeof(Page), "Success", "<script> error('Not Enough Stocks')</script>", false);
}
else
{
//insert
String str = "insert into Cart values(@user, @img, @name, @qty, @price, @tprice)";
con.Open();
SqlCommand cmd = new SqlCommand(str, con);
cmd.Parameters.AddWithValue("@user", username);
cmd.Parameters.AddWithValue("@img", img.ImageUrl);
cmd.Parameters.AddWithValue("@name", n);
cmd.Parameters.AddWithValue("@qty", q);
cmd.Parameters.AddWithValue("@price", p);
cmd.Parameters.AddWithValue("@tprice", total);
cmd.ExecuteNonQuery();

//  Response.Redirect("Menu.aspx");
SqlCommand cmd1 = new SqlCommand("SELECT COUNT(*) FROM Cart WHERE Username=@user", con);
cmd1.Parameters.AddWithValue("@user", session.Text);
Int32 count = (Int32)cmd1.ExecuteScalar();
CartItems.Text = count.ToString();
noreload.Update();
ScriptManager.RegisterStartupScript(this, typeof(Page), "Success", "<script> success('Item added to Cart')</script>", false);
con.Close();
}
}

}
}

谢谢大家的帮助