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

شنبه 5 اردیبهشت 1394

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

 

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

تاکنون هیچ کاربری از این پست تشکر نکرده است

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید