ASP.NET中的JQUERY .show（）和div標記

Question

基本上，當頁面加載時，我將div可見性設置爲false。當我點擊按鈕時，我想要調用函數後面的代碼，並將div標記顯示爲true。

$('#Button2').click(function() { 
     $('#edit').show(function() { 

     }); 
    }); 


    <input type="submit" id="Button2" runat="server" value="Search" OnServerClick="Button1_Click" /> 

但是當點擊按鈕時，頁面回傳，導致div標籤始終不可見。

我可以設置按鈕的onlclick事件的返回false，但我也需要調用該函數。

Answer 1

如果你不想的形式提交，防止事件的默認操作應該工作：

$('#Button2').click(function (evt) 
{ 
    $('#edit').show(function() 
    { 

    }); 

    evt.preventDefault(); 
}); 


<input type="submit" id="Button2" runat="server" value="Search" OnServerClick="Button1_Click" /> 

如果做希望表單提交，那麼你將不得不在服務器上找出div是否應該在頁面加載時顯示（基於表單提交/驗證/等的標準）。 jQuery只能在特定頁面加載期間的頁面內動作。

Answer 2

您必須在函數結束時返回false。

$('#Button2').click(function() { 
    ...some code 
    return false 
}); 

在另一種情況下按鈕

提交和頁面重定向

Answer 3

看起來你有你的答案，但這裏是一些可能有助於雖然你的問題是你的目的是什麼有點含糊。

---

更新包含的UpdatePanel和jQuery解決方案

這是使用的模板，雖然你可以這樣做在幾個不同的方式jQuery的解決方案。你不需要使用模板，但我可能是最簡單的方法。通過僅返回JSON，開銷遠遠小於UpdatePanel解決方案。

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.min.js" type="text/javascript"></script> 

<script id="productTemplate" type="text/html"> 
    <tr> 
     <td>${Name}</td><td>${Price}</td> 
    </tr> 
</script> 

<script type="text/javascript"> 

    $(function() { 

     $("#searching").ajaxStart(function() { 
      $(this).show(); 
     }); 

     $("#searching").ajaxStop(function() { 
      $(this).hide(); 
     }); 

     $("#btnSearch").click(function (evt) { 

      // JSON.stringify requires json2.js for all browser support 
      //https://github.com/douglascrockford/JSON-js 

      //post to WebMethod 
      var p = { product: $("#product").val() }; 
      $.ajax({ 
       type: "POST", 
       url: "Default.aspx/Search", 
       data: JSON.stringify(p), 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (data) { 
        //unwrap response if using .NET 3.5+ 
        var results = data.d; 

        //jQuery templates make it much easier to render repeat data 
        $("#productTemplate").tmpl(results).appendTo($("#products").empty()); 
        $("#results").show('slow'); 
       } 
      }); 

      evt.preventDefault(); 
     }); 

</script> 

HTML

<div id="searching" style="display:none;"> 
    Searching Please Wait.... 
    <img src="Products/ajax-loader.gif" alt="Searching" /> 
</div> 
<input type="text" id="product" /> 
<input type="submit" id="btnSearch" value="Search" /> 

<div id="results" style="display:none;"> 
    <table cellspacing="0" border="1" style="border-collapse:collapse;"> 
     <tbody><tr><th scope="col">Product</th><th scope="col">Price</th></tr></tbody> 
     <tbody id="products"></tbody> 
    </table> 
</div> 

後面的代碼 - 你需要使用System.Web.Services包括;

//If you're going to be using this in multiple locations then I'd put this into a seperate WebService.asmx 
[WebMethod] 
public static List<Product> Search(string product) 
{ 

    //Simulate database call 
    System.Threading.Thread.Sleep(2000); 

    //Do your database code here 

    //Using strongly typed model makes generating the JSON much easier 
    var products = new List<Product>(); 

    for (int i = 0; i < 10; i++) { 
     products.Add(new Product() { Name = String.Format("Product {0} {1}", product, i), Price = 10 * i }); 
    } 

    return products; 
} 

public class Product 
{ 
    public string Name { get; set; } 
    public int Price { get; set; } 
} 

更新面板解決方案對於普通的ASP.NET可能更爲熟悉，但它有隱藏Postback循環的缺點。您仍然在每個請求上發回完整的ViewState和HTMl。

<asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager> 

<!-- Grab a nice loading gif http://www.ajaxload.info/ --> 
<asp:UpdateProgress ID="MainUpdateProgress" runat="server" 
    AssociatedUpdatePanelID="MainUpdatePanel"> 
    <ProgressTemplate> 
     Searching Please Wait.... 
     <img src="ajax-loader.gif" alt="Searching"/> 
    </ProgressTemplate> 
</asp:UpdateProgress> 

<asp:UpdatePanel ID="MainUpdatePanel" runat="server"> 

<ContentTemplate> 
<asp:TextBox id="tbProduct" runat="server" /> 
<asp:Button ID="btnSearch" runat="server" Text="Search Products" 
     onclick="btnSearch_Click" /> 


<asp:GridView ID="grdvProducts" runat="server"></asp:GridView> 

<br /> 

<!-- if you dont want to use a gridview then a repeater will do --> 
<asp:Repeater ID="rProducts" runat="server"> 
    <HeaderTemplate> 
     <table cellspacing="0" border="1" style="border-collapse:collapse;"> 
     <tbody> 
     <tr><th scope="col">Product</th><th scope="col">Price</th></tr> 
    </HeaderTemplate> 
    <ItemTemplate> 
     <tr><td><%# Eval("Product") %></td><td><%# Eval("Price") %></td></tr> 
    </ItemTemplate> 
    <FooterTemplate> 
     </tbody> 
     </table> 
    </FooterTemplate> 
</asp:Repeater> 

</ContentTemplate> 

</asp:UpdatePanel> 

代碼後面

protected void btnSearch_Click(object sender, EventArgs e) 
    { 

     //Do Validation 
     string product = tbProduct.Text; 

     //Do database calls here 
     Thread.Sleep(2000); //Simulate long search time 

     var dt = new DataTable(); 
     dt.Columns.Add("Product"); 
     dt.Columns.Add("Price"); 

     for (int i = 0; i < 10; i++) { 
      dt.Rows.Add(String.Format("Product {0} {1}", product, i), i * 10); 
     } 

     grdvProducts.DataSource = dt; 
     grdvProducts.DataBind(); 

     rProducts.DataSource = dt; 
     rProducts.DataBind(); 

    }