خواندن فایل متنی توسط Jquery در Asp.Net
شنبه 5 اردیبهشت 1394خواندن اطلاعات از فایل متنی توسط Jquery و نمایش آنها در Asp.Net
خواندن اطلاعات از فایل متنی توسط Jquery و نمایش آنها با ظاهر زیبا در Asp.Net
یرای این مثال لینک چند مقاله را در فایل متنی قرار می دهیم:
<a target="_blank" href="http://barnamenevisan.org/Articles/Article2844.html"> آشنایی با Owin و Katana </a>Next <a target="_blank" href="http://barnamenevisan.org/Articles/Article2533.html"> استفاده از کتابخانه لوسین برای پیاده سازی جستجوی سریع و انجام AutoComplete </a>Next <a target="_blank" href="http://barnamenevisan.org/Articles/Article2852.html"> شرح مفهوم فیلتر ها و نحوه استفاده و پیاده سازی آنها در MVC </a>Next <a target="_blank" href="http://barnamenevisan.org/Articles/Article2857.html"> Unit Testing در پروژه های MVC </a>Next <a target="_blank" href="http://barnamenevisan.org/Articles/Article2566.html"> چگونه در MVC گرید تو درتو بسازیم </a>Next <a target="_blank" href="http://barnamenevisan.org/Articles/Article2707.html"> AngularJS MVC Repository </a>Next
اگر دقت کنید برا ی جدا کردن تگ ها از یک جدا کننده به نام Next استفاده کرده ام.
ابتدا یک پروژه جدید از نوع وب فرم بسازید و سپس یک صفحه جدید به پروژه اضافه کنید حال آدرس jquery را به صفحه خود میدهیم:
<script src="jquery-2.1.3.min.js"></script>
حال در پایین صفحه یک تابع به شکل زیر مینویسیم:
<script type="text/javascript"> $(document).ready(function () { $.get('myContents.txt', function (data) { var myHrefCollection = '<ul>'; var myData = data.split("Next"); for (i = 0; i < myData.length; i++) { if (myData[i] != null || myData[i] != undefined) myHrefCollection += '<li>' + myData[i] + '</li>'; } myHrefCollection += '</ul>'; $('#container').html(myHrefCollection); }); }); </script>
در تابع بالا داده های داخل فایل متنی را با استفاده از تابع Jquery میگیریم و زمانی که داده دریافت شد ما آنها را از هم جدا کرده برای همین منظور از جدا کننده Next در محتوا استفاده کردیم.
حال از استایل در تگ head صفحه برای نمایش استفاده میکنیم:
<style> a { display: block; margin: 0; padding: 5px 10px 5px 20px; color: #777777; text-decoration: none; border-bottom: 1px dotted #666666; background: url("orange_file.gif") no-repeat 10px center #F9F9F9; outline: none; } ul { margin: 0; padding: 0; list-style: none; } li { margin: 0 0 3px 0; padding: 0; display: list-item; text-align: -webkit-match-parent; } #container { display: block; width: 700px; padding: 25px; background-color: #F9F9F9; margin-bottom: 30px; } </style>
کد کامل صفحه Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="LoadContentsFromNotepad.Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style> a { display: block; margin: 0; padding: 5px 10px 5px 20px; color: #777777; text-decoration: none; border-bottom: 1px dotted #666666; background: url("/Content/orange_file.gif") no-repeat 10px center #F9F9F9; outline: none; } ul { margin: 0; padding: 0; list-style: none; } li { margin: 0 0 3px 0; padding: 0; display: list-item; text-align: -webkit-match-parent; } #container { display: block; width: 700px; padding: 25px; background-color: #F9F9F9; margin-bottom: 30px; } </style> <script src="Scripts/jquery-2.1.3.min.js"></script> </head> <body > <form id="form1" runat="server"> <div id="container"> </div> </form> </body> <script type="text/javascript"> $(document).ready(function () { $.get('myContents.txt', function (data) { var myHrefCollection = '<ul>'; var myData = data.split("Next"); for (i = 0; i < myData.length; i++) { if (myData[i] != null || myData[i] != undefined) myHrefCollection += '<li>' + myData[i] + '</li>'; } myHrefCollection += '</ul>'; $('#container').html(myHrefCollection); }); }); </script> </html> خروجی:
- ASP.net
- 1k بازدید
- 0 تشکر