توضیحات و دانلود

انتخاب ردیف WebGrid و نمایش اطلاعات با Javascript در ASP.NET MVC
1 0
انتخاب ردیف WebGrid و نمایش اطلاعات با Javascript در ASP.NET MVC

در این مقاله توضیح میدهیم كه چگونه میتوان با استفاده از JavaScript ردیف های WebGrid را انتخاب كرد و نمایش داد,در ASP.Net MVC Razor كلیك كنید.

هنگامی كه روی ActionLink درون ردیف WebGrid كلیك می شود، یك تابع JavaScript  اجرا میشود كه داده های ردیف WebGrid را گرفته و با استفاده از جعبه پیام هشدار JavaScript نمایش داده می دهد.

بانك اطلاعاتی

توجه! ما از پایگاه داده Northwind مایكرو سافت استفاده میكنیم كه شما میتوانید از لینك زیر آن را دانلود كنید!دانلود اسكریپت SQL

Model

ابتدا از طریق Entity Framework به جدول پایگاه داده متصل می شویم .

Controller

Controller متشكل از روش عمل زیر است.

عملیات GET 

چارچوب Entity در حال حاضر پیكربندی شده و از این رو اكنون می توانیم Controller ایجاد كنیم و كد را برای بارگیری  اطلاعات مشتریان از جدول Costumers پایگاه Northwind ایجاد كنیم .

در داخل روش Action Index، سوابق مشتری با استفاده از چارچوب Entity چیده شده و به View باز می گردد.

public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            NorthwindEntities entities = new NorthwindEntities();
            return View(entities.Customers.ToList());
        }
    }

View

درون View، در خط اول، مشتری به عنوان IEnumerable اعلام می شود كه مشخص می كند كه مدل به عنوان یك مجموعه در دسترس خواهد بود.

WebGrid با مجموعه ای از مدل IEnumerable از اشیاء كلاس مشتری Entity به عنوان منبع اولیه مشخص شده است.

WebGrid با استفاده از روش GetHtml با پارامترهای زیر ایجاد می شود.

HtmlAttributes - برای تنظیم ویژگی های HTML به جدول HTML ایجاد شده توسط WebGrid مانند شناسه، نام، كلاس و غیره استفاده می شود.

Columns - مشخص میكند كه چه ستون هایی كه در WebGrid نمایش داده شوند و همچنین اجازه می دهد تا متن خاص سربرگ را برای ستون تنظیم كنید.

آخرین ستون WebGrid شامل ActionLink است كه با استفاده از روش Html.ActionLink Helper ایجاد شده است.

ActionLink با یك رویداد كلیك JavaScript مشخص شده است .

در داخل كنترل رویداد كلیك jQuery، مرجع جدول HTML تعیین شده و سپس با استفاده از این مرجع، داده ها از هر سلول fetched با استفاده از جعبه پیام هشدار JavaScript نمایش داده شده .

@model IEnumerable<Customer>
@{
    Layout = null;
    WebGrid webGrid = new WebGrid(source: Model, canSort: false);
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body {
            font-familyArial;
            font-size10pt;
        }
 
        .Grid {
            border1px solid #ccc;
            border-collapsecollapse;
        }
 
            .Grid th {
                background-color#F7F7F7;
                font-weightbold;
            }
 
            .Grid th.Grid td {
                padding5px;
                border1px solid #ccc;
            }
 
            .Grid.Grid table td {
                border0px solid #ccc;
            }
 
                .Grid a.Grid a:visited {
                    colorblue;
                }
    </style>
</head>
<body>
    @webGrid.GetHtml(
        htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
        columns: webGrid.Columns(
                 webGrid.Column("CustomerID""كد مشتری"),
                 webGrid.Column("ContactName""نام مشتری"),
                 webGrid.Column("City""شهر"),
                 webGrid.Column("Country""كشور"),
                 webGrid.Column(nullnull, format: @<text>@Html.ActionLink("انتخاب"nullnullnew { @onclick = "return GetSelectedRow(this);" })</text>)
      ))
    <script type="text/javascript">
        function GetSelectedRow(link) {
            var row = link.parentNode.parentNode;
            var message = "انتخاب ردیف:";
            message += "\n\كد مشتری: " + row.getElementsByTagName("TD")[0].innerHTML;
            message += "\nنام مشتری: " + row.getElementsByTagName("TD")[1].innerHTML;
            message += "\nشهر: " + row.getElementsByTagName("TD")[2].innerHTML;
            message += "\nكشور: " + row.getElementsByTagName("TD")[3].innerHTML;
            alert(message);
            return false;
        }
    </script>
</body>
</html>


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :