خواندن فایل متنی توسط Jquery در Asp.Net

خواندن اطلاعات از فایل متنی توسط Jquery و نمایش آنها در Asp.Net

خواندن فایل متنی توسط 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>
خروجی:

 

دانلود فایل های ضمیمه مخصوص اعضای سایت می باشد !
کاربر مهمان! جهت دانلود و استفاده از امکانات سایت لطفا وارد سایت شوید و یا ثبت نام کنید