خوب اگه بخواهیم این اطلاعات رو رکورد به رکورد بخونیم و در یک بانک درج کنیم ممکنه زمان زیادی طول بکشه
روشی که برای ذخیره اطلاعات با حجم زیاد در sql وجود داره اینه که ابتدا باید داده ها رو در یک datatable و یا یک datareader قرار بدیم و بعد با استفاده از دستورات زیر اطلاعات رو در مدت زمان کوتاهی در بانک مورد نظر ذخیره کنیم
SqlBulkCopy
sbc = new SqlBulkCopy(@"Data Source=10.4.10.8;Initial "Catalog=dbname;Integrated Security=SSPI
sbc.DestinationTableName = tablename;
sbc.WriteToServer(datatablename);
sbc.Close();
با استفاده از دستورات بالا، محتویات datatable ما در جدول مورد نظر درج خواهد شد
دقت دارید که ساختار datatable باید شبیه به جدول بانک اطلاعاتی باشد .
]]>مثلا هر رکورد در یک خط ذخیره شده و هر فیلد از هر رکورد آن با کاراکتر تب( t\ ) از هم جدا شده
و می خواهیم اطلاعات این فایل رو در یک جدول از بانک sql ذخیره کنیم
فرض کنید محتویات فایل به شکل زیر باشه
]]>amir niazai 123
mohammad sadeghi 456
برای ذخیره این فایل درون یک جدول Sql ( که جدول باید دارای 3 فیلد باشه ) به شکل زیر عمل می کنیم
bulk insert fegh.dbo.treemain
FROM 'C:\Users\Niazi\Desktop\table\tree.txt'
WITH
(
FIELDTERMINATOR ='\t',
ROWTERMINATOR ='\n',
codepage='1256'
)که نام جدول و بانک رو جلوی دستور bulk insert میاریم
آدرس فایل رو هم جلوی دستور from
و ساختار فایل رو هم در قسمت with
یکی از تکنیک هایی که برای تسریع لود صفحه در چنین سایت‌های بزرگ از آن استفاده میشود CDN است. برای پیاده سازی مفهوم CDN در یک سایت از ایجاد سرورهای مختلف در نقاط جغرافیایی مختلف استفاده می‌کنند. بدین ترتیب کاربر اطلاعات را از سروری که از لحاظ جغرافیایی به او نزدیکتر است دریافت می‌کند. البته در این روش اغلب دیتای استاتیک مثل تصاویر و فایل های سی‌اس‌اس را در سرورهای CDN قرار می‌دهند.
برخی از مزایایی که استفاده از CDN ها به ارمغان می‌آورد :
- بالارفتن سرعت لود صفحات
- استفاده از تصاویری مختلف در محدوده‌های مختلف
- کمتر شدن فشار وارده به سرور مرکزی در مواقعی که ترافیک سایت بالا می‌رود
- تهیه پشتیبان از فایل‌ها به صورت غیر متمرکز
اما ممکن است سایتی که ما در حال توسعه آن باشیم یا سایتی که متعلق به ماست یک سایت محلی یا منطقه‌ای باشد , در اینصورت مسلما استفاده از CDN به صورت ذکرشده مقرون به صرفه نیست. اما با این حال هم CDN می‌تواند برای سایت های کوچک مفید باشد , چطور؟
فرض کنید ما برای ساخت یک سایت از کتابخانه جی‌کوئری هم استفاده کرده باشیم , در این صورت میتوان گفت که اگر لینک به فایل جی‌کوئری را از یکی از CDN ها دریافت کنیم سرعت لود سایت ما بالاتر می‌رود. علت سریعتر شدن لود سایت به دلیل نزدیکی جغرافیایی نیست بلکه به این دلیل است که ممکن است کاربر قبلا به سایتی مراجه کرده باشد که همان فایل را از همان CDN بر روی کامپیوتر کاربر دانلود کرده باشد و فایل , داخل کش مرورگر قرار گرفته باشد در اینصورت به علت یکی بودن آدرس فایل‌ها اصلا نیازی به دانلود مجدد فایل نیست.
از طرفی مزیت دیگر این روش در این است که در صورتی که بازدید سایت شما زیاد شود , بابت دانلود فایلی که در CDN قرار دارد از Bandwith هاست شما استفاده نمی‌شود.
درحال حاضر پراستفاده ترین فایل CDN , فایل کتابخانه جی‌کوئری است که در سرور CDN گوگل به آدرس زیر قرار دارد :
http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
برای دریافت آدرس کتابخانه‌های معروف به صورت تگ اسکریپت از CDN گوگل از این سایت استفاده کنید.
]]>در این پست و پست های بعدی قصد داریم به معرفی
افزونه های jquey و نحوه ارتباط آنها در ASP.Net بپردازیم.
در این مقاله می خواهیم نحوه استفاده از افروزنه autocomplete در asp.net به منظور بازیابی اطلاعات از یک webmethod را توسط Ajax نشان دهیم.
برای این منظور ابتدا دو افزونه jquery-1.4.1.min.js و jquery-ui.min.js و یک کلاس jquery-ui-1.8.13.custom.css رو به صفحه اضافه می کنیم.
<head >
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<link href="Styles/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />
نحوه استفاده از افزونه نیز به صورت زیر می باشد:
<script type="text/javascript">
$(function () {
$("#PersonName").autocomplete({
source: function (request, response) {
$.ajax({
url: "Default.aspx/GetPerson",//متدی که اطلاعات به آن فرستاده و خوانده می شود
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
data: "{ 'name': '" + request.term + "'}",//پارامتری که به متد فرستاده می شود
success: function (data) {
response($.map(data.d, function (item) {
return {
value: item.ProductName//افزودن اطلاعات به منو
}
}));
}
});
},
minLength: 1
});
});
</script>
بعد از مشخص کردن کنترلی که می خواهیم افزونه را به آن اعمال کنیم$("#PersonName") در قسمت source منبع اطلاعاتی رو مشخص می کنیم که در اینجا از طریق Ajax اطلاعات را از یک WebMethod دریافت می کنیم.توضیحات بیشتر در مورد Ajax رو می تونید از اینجا مشاهده کنید.به ازای هر کاراکتری که در کنترل textbox وارد می شود اطلاعات توسط دستور request به WebMethod ارسال شده و اطلاعات بازگشتی با دستور response به منوی autocomplete در صورت وجود اضافه می شود.
minLength:حداقل تعداد کاراکتری که باید وارد شود تا افزونه عمل کند.
[WebMethod]
public static List<Person> GetPerson(string name)
{
var context = new Person();
var query = from Person c in context.GetPerson() where c.PersonName.StartsWith(name) select new Person() { PersonName = c.PersonName };
return query.ToList();
}
در این متد هر مقداری که توسط دستور request ارسال می شود جستجو شده و نتیجه به صورت List برمی گردد.
توسط کلاس .ui-autocomplete می توان تغییراتی در ظاهر افزونه ایجاد کرد که از جمله خصوصیات عبارتند از:
max-height: حداکثر ارتفاع منو.در صورت لزوم Scroll عمودی فعال می شود.
max-width: حداکثر پهنای منو.در صورت لزوم Scroll افقی فعال می شود.
padding-righ:فاصله آیتم ها از لبه سمت راست منو
padding-left: فاصله آیتم ها از لبه سمت چپ منو
همچنین توسط کلاس .ui-autocomplete-loading می توان یک آیکون loading به کنترل اضافه کرد.
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
$( "#selectable" ).selectable();
});
</script>
<div class="demo">
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
</div><!-- End demo -->
<div style="display: none;" class="demo-description">
<p>Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections. </p>
</div><!-- End demo-description -->شاید تا بحال سایت هایی رو دیده باشید که از فونت هایی خاص برای طراحی صفحات خود استفاده می کنند.همان طور که می دانید برای طراحی سایت مجاز به استفاده از هر فونتی نمی باشیم.این محدودیت برای پارسی زبان ها نیز وجود دارد و معمولا از فونت های Times New Roman و Tahoma برای طراحی سایت استفاده می کنند.
اما این محدویت در CSS3 بر طرف شده و شما می توانید از هر فونتی که می خواهید در طراحی سایت خود استفاده کنید.
برای این منظور از دستور font-face@ برای تعریف فونت در فایل CSS استفاده می شود.
برای شروع کد زیر را به
فایل CSS اضافه می کنیم.
@font-face
{
font-family: myfont;
src: url('../Fonts/BTitrBd.ttf'), /* non-IE */
url('../Fonts/BTitrBd.eot') format("opentype"); /* IE */
}
font-family:برای مشخص کردن نام فونت به کار می رود.این نام می تواند هر اسمی باشد و حتما لازم نیست که دقیقا نام فونت مورد نظر ذکر شود ولی در موقع استفاده از فونت باید دقیقا از نامی که در font-family تعیین کردیم استفاده کنیم.
url:در این قسمت مسیر فایل موردنظر جهت استفاده از فونت تعیین می
شود.
مرورگر های Opera,Firefox,Chrome,Safari از هر دو نوع فونت TrueTypeFont ttf و OpenTypeFont otf پشتیبانی می کنند.IE هم طبق معمول ساز مخالف می زنه و فقط از نوع Embedded OpenType eot پشتیبانی می کند.
هنگام استفاده از font-face@ تعیین مقدار برای font-family و src الزامی می باشد.سایر گزینه ها که مقداردهی آنها اختیاری می باشد عبارتند از:
font-stretch,font-style,font-weight,unicode-range
برای اعمال در صفحه
div
{
font-family: myfont,tahoma;
}
در کد بالا در صورتی که به
هر دلیلی نتواند "myfont" را اجرا کند فونت پیش فرض tahoma اجرا می شود.
@font-face
{
font-family: myfont;
src: local('B Titr'), url('../Fonts/BTitrBd.ttf'), /* non-IE */
url('../Fonts/BTitrBd.eot') format("opentype"); /* IE */
}
نکته ای که در کد بالا وجود دارد استفاده از دستور local می باشد.
باعث می شود در صورتی که فونت مورد نظر در سرور نصب شده باشد از این Local
فونت استفاده کند در غیر این صورت از مسیر تعیین شده برای خواندن فونت استفاده می کند.
نکته اول:اگر بخواهیم از چندین فونت در طراحی صفحات استفاده کنیم به ازای هر فونت باید دستور font-face@ را به کار بریم.
نکته دوم:برای تبدیل فونت ttf به eot از این سایت استفاده کنید.
گاهی اوقات نیاز است که کاربر بتواند شی رو روی صفحه جابجا کنه. بعنوام مثال در هنگام پرینت گرفتن یک صفحه می تواند شی را جابجا کند تا شی در جای مورد نظر خود قرار بگیرد. من داشتم یه صفحه پرینت می ساختم که میخواست روی یک فرم کاغذی آماده چاپ بشه با استفاده از این پلاگین موقعیت اشیا رو کاربر میتونست عوض کنه تا دقیقا اونجایی که نیازه بیفته و بعد من اونو توی دیتابیس ذخیره میکردم که بعدا خواست پرینت بگیره به مشکلی برخورد نکنه و موقعیتهاش ذخیره بشه.
در جی کوئری پلاگینی به نام jqueryui وجود داره که کارهای نسبتا زیادی باهاش میشه انجام داد یکی از این کاره اینه که اشیا رو بشه توی صفحه جابجا کرد. این تابع draggable نام داره. کافیه یک شی بسازیم بعدش id شی را با تابع draggable صدا بزنیم. البته باید خصوصیت position شی رو بصورت relative قرار بدیم.
مثلا کد زیر چنین کاری رو انجام میده و لینکش هم اینجاست
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</head>
<body style="cursor: auto;">
<div id="move" style="width: 150px; height: 150px; background-color: pink; border: 1px solid rgb(153, 153, 153); position: relative; left: 116px; top: -1px;"> </div>
<script>
$(document).ready(function(){
$("#move").draggable();
});
</script>
</body>
</html>
]]>در حال حاضر دغدغه‌ی بسیاری از وبمسترها بالابردن سرعت لود یا پایین آوردن حجم صفحات وبسایت هست که نتیجه‌ی هر دو جلب رضایت کاربر و افزایش میزان بازدید است. حالا فرض کنید که این وبمستر بخت برگشته ساکن ایران باشه و البته اکثر بازدیدکننده‌هایش هم ساکن ایران باشند. در اینصورت بالا بردن سرعت لود وبسایت یک کار اساسی برای بنا کردن یک سایت محسوب میشود. تکنیک های زیادی برای افزایش سرعت لود وجود دارد که اکثر آنها به واسطه‌ی کم کردن حجم صفحه و فایل‌های پیوست شده به صفحه این کار را انجام می‌دهند.طی این پست و پست‌های آینده ترفندهایی که برای افزایش سرعت لود صفحه استفاده می‌شوند, ارائه میشود. بنابراین همراه ما باشید.
لود غیرهمزمان(کند,تنبل) یا به اصطلاح lazy loading برای تصاویر صفحه:
برای پیاده‌سازی این تکنیک از یک پلاگین که برای
جی‌کوئری نوشته شده استفاده میکنیم.
روش کار این تکنیک به اینصورت است که هنگام لود صفحه , جاوااسکریپت لینک تمامی
عکسها رو از دیدbrowser مخفی می‌کند و فقط هر عکسی که در کادر browser , بدون نیاز به اسکرول کردن صفحه, دیده
شود , لود میشود. و در زمان اسکرول کردن صفحه , هر عکس لود نشده‌ای که در کادر browser قرار بگیرد , همان لحظه لود میشود.
به این ترتیب تمام تصاویر موجود در صفحه به طور همزمان لود نمی‌شوند و در نتیجه
سرعت لود صفحه بالا می‌رود و در مواردی حتی سرعت لود چندین برابر میشود.
برای مثال می‌توانید به آدرس زیر مراجعه کنید و
بعد از لود شدن سایت شروع به اسکرول کردن کنید و به نحوه‌ی لود شدن تصاویر توجه
کنید.
http://deanhume.com/Home/BlogPost/set-up-iis-7-to-run-a-secure-site-locally---https/21
برای شروع ابتدا پلاگین jquery.lazyload.js را از اینجا دانلود میکنیم.
حالا هم جی‌کوئری و هم lazyload را به صفحه اضافه میکنیم:
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
در انتها پلاگین lazyload را برای تصاویر صفحه فراخوانی میکنیم:
<script type="text/javascript" language="JavaScript">
$(function(){
});
</script>
این عبارت :
$("img").lazyload();
به این معنی است که این پلاگین را بر روی تمام تگهای img اعمال کن.
شاید زمانی که از این تکنیک به شکل بالا استفاده
کنید لود شدن تصاویر در هنگام اسکرول کردن را حس نکنید. اما برای لود شدن تصویر
افکت های در نظر گرفته شده که با تعیین آنها این احساس که عکس ها در همان لطظه‌ی
اسکرول کردن لود می‌شوند , بیشتر احساس میشود.
این افکت به صورت زیر تعیین میشود:
$("img").lazyload({effect: "fadeIn"});
در اینصورت وقتی که تصویر داخل محدوده‌ی قابل
رویت مرورگر قرار بگیرد به آرامی ظاهر میشود.
تنظیمات دیگری برای این پلاگین وجود دارد که می‌توانید با مراجعه به وبسایتهای زیر از آنها مطلع شوید.
]]>عناصر فرم ، عناصری هستند که به کاربر اجازه می دهند تا اطلاعات را (مثل فیلدهای متنی ، فیلدهای text area ، دکمه های رادیویی ، چک باکس ها و…) در فرم وارد کند.
تگ form در html 4.01 هم وجود داشت ولی در html5 خصوصیت accept از آن حذف شده است و دو خصوصیت جدید به آن اضافه شده است كه عبارتند از :
- خصوصیت autocomplete :
این خصوصیت دارای دو مقدار on و off می باشد و اگر در حالت on باشد (پیش فرض) ، باعث میشود كه مرورگر، داده ورودی برای یك فیلد را پیش بینی كند. زمانیكه كاربر شروع به تایپ داده مورد نظرش می كند ، لیستی از داده های نوشته شده در فیلد مورد نظر نمایش داده می شود.
* این اطلاعات بر حسب نوعی كه برای خصوصیت type در نظر گرفته ایم ، لیست می شوند.
- خصوصیت novalidate:
اگر تگ فرم دارای این خصوصیت باشد ، به این معنی است كه نیازی نیست كه داده های ورودی تایید اعتبار شوند . به عنوان مثال ، اگر نوعی داده ای بر حسب email است ، هیچگونه اعتبارسنجی برای آن انجام نخواهد شد كه آیا آدرس ایمیل به صورت كامل نوشته شده است یه خیر .
نحوه استفاده این خصوصیت در فرم به دو صورت است :
<form novalidate>
و یا :
<form novalidate=”novalidate”>
برای تگ های فرم همیشه یك دكمه ای برای submit وجود دارد كه جهت ارسال اطلاعات استفاده می شود.
مثلا در اكثر سایت ها بخشی برای نظریات وجود دارد. تمامی اطلاعات كاربران از قبیل اسم ، ایمیل ، آدرس سایت و نظر كاربر را می توانیم در یك تگ form قرار دهیم و دكمه ای كه نوع آن submit می باشد .
زمانیكه كاربر اطلاعات فیلد ها را كامل كرد و روی دكمه كلیك كرد، اطلاعات او به صفحه ای ارسال خواهد شد. در تگ form خصوصیت action مشخص می كند كه پس از فشردن دكمه submit داده های فرم به كدام صفحه ارسال شود.
<form action="form_action.aspx" >
كد html زیر نمونه ای از فرم نظریات را برای یك سایت طراحی كرده است :
<!doctype html>
<html>
<head>
<title>Form</title>
</head>
<body>
<div >
<form action="form_action.aspx" novalidate>
<h3>Post a comment</h3>
<p>
<label for="name">Name</label>
<input name="name" id="name" type="text" maxlength ="10" required />
</p>
<p>
<label for="email">E-mail</label>
<input name="email" id="email" type="email" required />
</p>
<p>
<label for="website">Website</label>
<input name="website" id="website" type="url" />
</p>
<p>
<label for="comment">Comment</label>
<textarea name="comment" id="comment" required></textarea>
</p>
<p><input type="submit" value="Post comment" /></p>
</form>
</div>
</body>
</html>
| ISBN | Title | Price |
|---|---|---|
| 3476896 | My first HTML | $53 |
url : “PageName.Ext/MethodName”
برای مثال میخواهیم کاربر وقتی روی یک باتن کلیک کرد اطلاعات مربوط به یک کاربر مشخص را نمایش دهیم . برای این کار ما از یک webmethod در صفحه ی جاری استفاده میکنیم.
کد مربوط به سرور به این شکل است: