您的位置：首页 > Web前端 > JQuery

How to use jquery plugin jquery.blockUI.js?

2010-06-07 19:29 363 查看

一、前台aspx

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>jQuery BlockUI Plugin with LINQ to SQL</title>
<mce:script language="javascript" type="text/javascript" src="Scripts/jquery-1.3.2.js" mce_src="Scripts/jquery-1.3.2.js"></mce:script>
<mce:script language="javascript" type="text/javascript" src="Scripts/jquery.blockUI.js?v2.24" mce_src="Scripts/jquery.blockUI.js?v2.24"></mce:script>
<mce:script language="javascript" type="text/javascript"><!--
$(document).ready(function() {
$('#btnFetchData').click(function() {
$.blockUI({
css: {
padding: 0,
margin: 0,
width: '30%',
top: '40%',
left: '35%',
textAlign: 'center',
color: '#000000',
border: '3px solid #aaa',
backgroundColor: '#ffffff',
cursor: 'wait'
},
// styles for the overlay
overlayCSS: {
backgroundColor: '#000',
opacity: 0.6
},
message: '<img src="wait.gif" mce_src="wait.gif"> <b>Searching the database.  Please wait.</b>',
bindEvents: true
});
$.ajax({
type: "POST",
url: "Default.aspx/FetchCustomers",
data: "{contactName:/"" + $("#txtContactName").val() + "/"}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function(msg) {
$.unblockUI();
var customers = msg.d;
if (customers.length > 0) {
$("#result").text("");
for (var i = 0; i < customers.length; i++) {
$("#result").append(customers[i].CustomerID + ", ");
$("#result").append(customers[i].CompanyName + ", ");
$("#result").append(customers[i].ContactName + ", ");
$("#result").append(customers[i].ContactTitle + ", ");
$("#result").append(customers[i].Address + ", ");
$("#result").append(customers[i].City + ", ");
$("#result").append(customers[i].Region + "<br />");
}
}
else {
// validation failed
$("#result").text("No matching records were found.");
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$.unblockUI();
alert(textStatus);
}
});
return false;
});
});

// --></mce:script>
</head>
<body>
<form id="form1" runat="server">
<input id="txtContactName" type="text" />
<input id="btnFetchData" type="submit" value="Fetch Data"/>
<div id="result"></div>
</form>
</body>
</html>

二、后台CS

using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Web.Services;

namespace WebApplication1
{
public partial class _Default : System.Web.UI.Page
{
[WebMethod]
public static List<Customer> FetchCustomers(string contactName)
{
var customers = new List<Customer>();
using (var dc = new NorthwindDataContext() )
{
customers = (from p in dc.Customers
where p.ContactName.StartsWith(contactName)
select p).ToList();
}

for (int i = 0; i < 1; i++)
{
Thread.Sleep(1000);
}
return customers;
}
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航