مقادیر پایه (Primitive Values) و ارجاعی (Reference Values)
در جاوا اسکریپت، متغیرها شامل دادههایی از نوع پایه و یا ارجاعی میباشند. مقادیر String ، Number ، Boolean ، Null و Undefined به عنوان مقادیر پایه محسوب میگردند. در این نوع متغیرها تغییرات، مستقیما بر روی مقدار ذخیره شده در متغیر اعمال میشوند. اشیاء نیز که از مجموعهای از مقادیر پایه ساخته شدهاند، مقادیر ارجاعی نامیده میشوند. در این نوع مقادیر، شما به اشارهگری از شیء دسترسی دارید. بنابراین تغییرات مستقیما بر روی دادههای ذخیره شده اعمال نمیشوند. به مثالهای زیر توجه کنید:
var num1 = 10; var num2 = num1; alert("Num1=" + num1 + ", Num2=" + num2); num2 = 20; alert("Num1=" + num1 + ", Num2=" + num2); num1 = 30; alert("Num1=" + num1 + ", Num2=" + num2);
خروجی :
"Num1=10, Num2=10"
"Num1=10, Num2=20"
"Num1=30, Num2=20"
همانطور که از خروجی مثال فوق پیداست، در انتساب num1 به num2 ، مقدار num1 در num2 کپی شدهاست. بنابراین تغییراتی که بر روی num1 یا num2 صورت میگیرد، مستقیما بر روی مقدار ذخیره شده در هر یک از این متغیرها تاثیر میگذارد. رفتار مقادیر پایه همیشه به همین صورت میباشد.
var obj1 = new Object(); obj1.num = 10; var obj2 = obj1; alert("Obj1.Num=" + obj1.num + ", Obj2.Num=" + obj2.num); obj2.num = 20; alert("Obj1.Num=" + obj1.num + ", Obj2.Num=" + obj2.num); obj1.num = 30; alert("Obj1.Num=" + obj1.num + ", Obj2.Num=" + obj2.num);
خروجی :
"Obj1.Num=10, Obj2.Num=10"
"Obj1.Num=20, Obj2.Num=20"
"Obj1.Num=30, Obj2.Num=30"
با استفاده از نوع ارجاعی Object میتوانیم اشیاء جدیدی را ایجاد کنیم و ویژگیهایی را به صورت پویا به آنها اختصاص دهیم. همانطور که قبلا گفته شد، اشیاء از نوع ارجاعی میباشند و حاوی اشارهگری به مقادیر ذخیره شده میباشند. بنابراین انتساب obj1 به obj2 به معنای انتساب اشارهگر obj1 به obj2 میباشد. به عبارتی دیگر obj2 به همانجایی اشاره میکند که obj1 نیز اشاره مینماید. پس هر تغییری که بر روی ویژگیهای obj1 رخ دهد، obj2 نیز تاثیرات آن را میبیند و بالعکس. همانطور که در خروجی مشاهده مینمایید، در مرحلهی اول obj1 به obj2 نسبت داده شد، پس مقدار ویژگی num برای هر دو آنها یکسان میباشد. در مرحلهی دوم، مقدار ویژگی num را در obj2 تغییر دادیم؛ ولی مقدار این ویژگی، در obj1 نیز تغییر نمود. در مرحلهی سوم نیز همان اتفاقات مرحلهی دوم تکرار شد.
با توجه به مثالهای فوق قطعا به تفاوتهای مقادیر پایه و ارجاعی پی بردید. همچنین در یک نمونهی کوچک و ساده نیز، یکی از روشهای ایجاد شیء را که استفاده از نوع ارجاعی Object میباشد، مشاهده نمودید. این دانستهها مقدمه ای بر شروع برنامه نویسی شیء گرا میباشند. ولی قبل از شروع برنامه نویسی شیء گرا در جاوا اسکریپت، به بررسی نکات و تکنیکهای دیگری میپردازیم.
توجه:
به انواع پایه، انواع دادهای مقداری یا اولیه نیز گفته میشود.
فراخوانی با مقدار (Call by Value)
در این نوع فراخوانی، آرگومانها از نوع مقادیر پایه هستند. بنابراین هر تغییری که بر روی آرگومانها در تابع رخ دهد، هیچ تاثیری بر روی آرگومانهای ارسالی در زمان فراخوانی تابع ندارند. به مثال زیر توجه کنید:
function primitive(a, b) { a += 100; b += 200; alert("a=" + a + ", b=" + b); } var x = 300, y = 400; primitive(x, y); alert("x=" + x + ", y=" + y);
خروجی :
"a=400, b=600"
"x=300, y=400"
x و y دو متغیر پایه میباشند، بنابراین تابع فوق به صورت مقداری فراخوانی شدهاست. یعنی مقدار آرگومانهای x و y در آرگومانهای a و b کپی میشوند. پس هر تغییری که بر روی a و b رخ دهد، هیچ تاثیری بر روی x و y ندارد. همچنین با توجه به توضیحی که در مورد مقادیر پایه داده شد، تغییرات مستقیما بر روی دادهی ذخیره شده در متغیر اعمال میشود. بنابراین تغییراتی که در تابع فوق بر روی a و b رخ داد، مستقیما مقادیر a و b را تغییر دادهاست وهیچ ارتباطی به x و y ندارد. البته توجه داشته باشید که حتی اگر نام آرگومانهای تابع با آرگومانهای ارسالی یکسان بود و یا حتی اگر تابع مقداری را به عنوان خروجی بر میگرداند، هیچ تفاوتی را در خروجی برنامه فوق مشاهده نمیکردید.
فراخوانی با ارجاع (Call by Reference)
در این نوع فراخوانی، آرگومانها از نوع مقادیر ارجاعی هستند. بنابراین هر تغییری که بر روی آرگومانها در تابع رخ دهد، بر روی آرگومانهای ارسالی در زمان فراخوانی تابع نیز تاثیر میگذارند. به مثال زیر توجه کنید:
function reference(obj) { obj.a += 100; obj.b += 200; alert("obj.a=" + obj.a + ", obj.b=" + obj.b); } var calc = new Object(); calc.a = 300; calc.b = 400; reference(calc); alert("calc.a=" + calc.a + ", calc.b=" + calc.b);
خروجی :
"obj.a=400, obj.b=600"
"calc.a=400, calc.b=600"
calc یک مقدار ارجاعی است که به عنوان آرگومان ورودی به تابع ارسال میشود و اشارهگر خود را به obj اختصاص میدهد. بنابراین obj به همان آدرسی اشاره میکند که calc اشاره مینماید. پس هر تغییری که بر روی obj رخ دهد، calc نیز تاثیرات آن را مشاهده مینماید. همانطور که در خروجی نیز مشاهده مینمایید، تغییرات صورت گرفته در تابع به calc نیز منعکس شده است.
حوزه دسترسی به متغیرها (Variable Scope)
متغیرهای محلی (Local Variables)
در اکثر زبانهای برنامه نویسی، متغیرهایی که در یک بلاک کد تعریف میشوند، به صورت محلی و فقط در همان بلاک کد قابل دسترسی میباشند. به این متغیرها، متغیرهای محلی میگویند که با خاتمهی اجرای بلاک کد، از بین خواهند رفت و دیگر قابل دسترسی نمیباشند. اما در جاوا اسکریپت حوزهی اجرایی متغیرها کمی متفاوت میباشد. به مثال زیر توجه کنید:
for (var i = 1; i <= 5; i++) { var sqr = i * i; alert(sqr); } alert(i); alert(sqr);
خروجی :
متغیرهای i و sqr داخل حلقهی for تعریف شدهاند و منطقا نباید خارج از این حلقه قابل دسترسی باشند. ولی با توجه به خروجی فوق، مشاهده نمودید که متغیرهای i و sqr، نه تنها خارج از این حلقه قابل شناسایی میباشند، بلکه آخرین مقدار خود را نیز حفظ نمودهاند. در جاوا اسکریپت، یک متغیر محلی زمانی مفهوم پیدا میکند که در داخل یک تابع تعریف شود. به مثال زیر توجه کنید:
function sqr(num) { var sum = num * num; return sum; } var n = 4; alert(sqr(n)); alert(num); // Error: num is not defined alert(sum); // Error: sum is not defined
خروجی :
16
Error: num is not defined
Error: sum is not defined
همانطور که مشاهده میکنید، متغیرهای num و sum به صورت محلی در تابع فوق تعریف شدهاند؛ بنابراین خارج از تابع قابل دسترسی نمیباشند و موجب بروز خطا میگردند.
متغیرهای عمومی (Global Variables)
در جاوا اسکریپت، متغیرهایی که خارج از تابع تعریف میگردند، به شیء window نسبت داده میشوند و عمومی میباشند. به عبارتی دیگر این متغیرها به عنوان یک ویژگی از شیء window تعریف میشوند و در تمامی توابع و بلاکهای کد قابل دسترسی میباشند. به مثال زیر توجه کنید:
var color = "Red"; function setColor() { color = "Blue"; } alert(color); setColor(); alert(color);
خروجی :
"Red"
"Blue"
در مثال فوق، متغیر color به صورت عمومی تعریف شدهاست. بنابراین در کل برنامه قابل دسترسی میباشد. در alert اول مقدار فعلی متغیر color یعنی “Red” نمایش مییابد. سپس با فراخوانی تابع، مقدار این متغیر تغییر میکند. در alert دوم مقدار تغییر یافتهی متغیر color نمایش خواهد یافت. حال به مثال زیر توجه کنید:
var color = "Red"; function getColor() { var color = "Blue"; return color; } alert(color); alert(getColor()); alert(color);
خروجی :
"Red"
"Blue"
"Red"
در مثال فوق، ابتدا یک متغیر color به صورت عمومی یا Global تعریف شده است. در تابع getColor نیز یک متغیر color به صورت local یا محلی تعریف شده است. زمانی که در alert تابع getColor فراخوانی میشود، متغیر color مقداردهی میگردد. این مقداردهی برای متغیر محلی صورت گرفته است و هیچ ربطی به متغیر color که به صورت عمومی تعریف شده است ندارد.
جهت تعریف متغیر در جاوا اسکریپت، از کلمهی کلیدی var استفاده میشود. اما تعریف متغیر در جاوا اسکریپت اجباری نمیباشد و میتوان یک متغیر را مقداردهی نمود بدون آنکه تعریف شده باشد. در صورتی که متغیر با var اعلان نشود، آن متغیر به شیء window نسبت داده میشود و ماهیت عمومی پیدا میکند. به مثال زیر توجه کنید:
function sum(a, b) { c = a + b; } sum(20, 30); alert(c);
خروجی :
50
همانطور که مشاهده میکنید، متغیر c بدون تعریف شدن مورد استفاده قرار گرفته است. با اینکه به صورت محلی مقداردهی گردیده است، ولی چون توسط var اعلان نشده است، به شیء window نسبت داده شده و ماهیت عمومی پیدا کرده است.
onClickButton: function (e) { var id = $('#grid').jqGrid('getGridParam', 'selrow'); if (id != null) { var idHtml = $('#grid').jqGrid('getCell', id, 'ID_Baker'); //var idHtml = id.ID_Baker; //var idHtml = $('#' + id).children().first().html(); $.ajax({ url: '@(Url.Action("DeleteProfile"))' + '?Id=' + idHtml + '&RowId=' + id, success: function (data) { if (data.Success) { $('#grid').jqGrid('delRowData', data.RowId); } } }); } else { } },
using MvcApplication3.Models; ... namespace MvcApplication3.Controllers { public class StudentController : Controller { public ActionResult Index() { //var data = new StudentsList(); return View(); } public ActionResult DataList() { var data = new StudentsList(); return PartialView("Pv_DataList", data); } #region Edit [HttpGet] public ActionResult Edit(int? id) { var data = new StudentsList().FirstOrDefault(p => p.Id == id); return PartialView("Pv_Edit", data); } [HttpPost] [AjaxOnly] [ValidateAntiForgeryToken] public ActionResult Edit(StudentModel model) { Thread.Sleep(1000); if (this.ModelState.IsValid) { return Json("ok", JsonRequestBehavior.AllowGet); } return Json("error"); } #endregion } }
@using MvcApplication3.Models @{ ViewBag.Title = "Student Index"; } <style> #div_StudentEditDialogContainer { padding: 15px; background-color: silver; border: 1px solid gray; -webkit-border-radius: pxpx; -moz-border-radius: pxpx; border-radius: 10px; display: none; position: absolute; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4); box-shadow: 0 1px 3px rgba(0,0,0,0.5); } </style> <h2>Student Index</h2> <div id="div_StudentListViewContainer"> @{ Html.RenderAction("DataList", "Student");} </div> <div id="div_StudentEditDialogContainer"> @{ Html.RenderAction("Edit", "Student");} </div> <div id="div_StudentAddDialogContainer"> </div> <div id="div_StudentRemoveDialogContainer"> </div> <div id="div_StudentSearchDialogContainer"> </div> @section JavaScript{ <script type="text/javascript"> $(document).ready(function () { $("#div_StudentListViewContainer table input[type='submit']").click(function (e) { //show edit dialog e.preventDefault(); var id = $(this).parent().parent().attr('data-studentid'); var url = '@Url.Action("Edit", "Student")'; $.ajax({ type: "GET", url: url, data: { id: id }, beforeSend: function () { //$(waitingPanel).css("display", "block"); }, success: function (html) { if (html == "nodata") { $("#div_StudentEditDialogContainer").html("دانشجویی با این مشخصات یافت نشد!"); } else { $("#div_StudentEditDialogContainer").css("display", "block"); $("#div_StudentEditDialogContainer").html("").append(html); } }, complete: function () { //$(waitingPanel).css("display", "none"); } }); }); }); </script> }
@using MvcApplication3.Models @model StudentModel @{ var postUrl = Url.Action(actionName: "Edit", controllerName: "Student"); } @using (Html.BeginForm(actionName: "Edit", controllerName: "Student", method: FormMethod.Post, htmlAttributes: new { id = "frm_studentEdit" })) { @Html.ValidationSummary(true) @Html.AntiForgeryToken() <div class="editor-label"> @Html.LabelFor(model => model.Id) </div> <div class="editor-field"> @Html.EditorFor(model => model.Id) @Html.ValidationMessageFor(model => model.Id) </div> <div class="editor-label"> @Html.LabelFor(model => model.Code) </div> <div class="editor-field"> @Html.EditorFor(model => model.Code) @Html.ValidationMessageFor(model => model.Code) </div> <div class="editor-label"> @Html.LabelFor(model => model.FullName) </div> <div class="editor-field"> @Html.EditorFor(model => model.FullName) @Html.ValidationMessageFor(model => model.FullName) </div> <div class="editor-label"> @Html.LabelFor(model => model.BirthDate) </div> <div class="editor-field"> @Html.EditorFor(model => model.BirthDate) @Html.ValidationMessageFor(model => model.BirthDate) </div> <div class="editor-label"> @Html.LabelFor(model => model.IsMale) </div> <div class="editor-field"> @Html.EditorFor(model => model.IsMale) @Html.ValidationMessageFor(model => model.IsMale) </div> <p> <input type="submit" id="btn_Save" value="ذخیره" /> <input type="submit" id="btn_Cancel" value="انصراف" /> </p> } <script type="text/javascript"> $(function () { $("#btn_Save").click(function (e) { e.preventDefault(); var button = $(this); $("#frm_studentEdit").PostMvcFormAjax({ postUrl: '@postUrl', loginUrl: '/login', beforePostHandler: function () { //غیرفعال سازی دکمه ارسال button.attr('disabled', 'disabled'); button.val("..."); }, completeHandler: function (data) { //فعال سازی مجدد دکمه ارسال button.removeAttr('disabled'); button.val("ذخیره"); }, errorHandler: function () { alert('خطایی رخ داده است'); } }); }); $("#btn_Cancel").click(function (e) { e.preventDefault(); var button = $(this); $(".editDialog").parent("div").css("display", "none"); }); }); </script>
کد کارم رو هم میدهم . البته من در WebForm کار کردم.
var $table = $('#browsers-grid'); $table.dataTable({ "bJQueryUI": true, "bProcessing": true, "bSortClasses": false, "bServerSide": true, "bFilter": true, "sPaginationType": "full_numbers", "sScrollY": 400, "sScrollX": "100%", "sScrollXInner": "110%", "bLengthChange": false, "iDisplayLength": 20, "aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]], "bAutoWidth": false, "sAjaxSource": "Commands.aspx?cmd=all", "fnServerData": function (sSource, aoData, fnCallback) { $.ajax({ "dataType": 'json', "type": "POST", "url": sSource, "data": aoData, "success": fnCallback }); }, "aoColumns": [ { "mDataProp": "Code" }, { "mDataProp": "Caption" }, { "mDataProp": "Comment" } ], "oLanguage": { "sUrl": "dataTables.persian.txt" } });
رسم نمودار توسط Kendo Chart
من مشکل مرتب سازی فیلدهای از نوع عددی (int) در Kendo Chart دارم. همانند شکل زیر
کدهای نوشته شده به شکل زیر هستند (Year از جنس عدد هست)
$(document).ready(function () { //چارت 4 $.ajax({ type: 'POST', url: '@Url.Action("TierStatistics4", "Dashboard", new { area = "Tier" })', dataType: 'json', data: { CostCenterId: $("#CostCenterId").val(), QueryIndex: $("#QueryIndex").val() }, success: function (data) { dataSource = new kendo.data.DataSource({ data: data, group: { field: "Series" }, sort: { field: "Year", dir: "desc" } }); $("#chart4").kendoChart({ title: { text: "آمار تعداد/هزینه(ریال) تایر مصرفی شعب به تفکیک مراکز هزینه و ماههای سال", font: "irsans", }, dataSource: dataSource, series: [{ type: "column", field: "Value", categoryField: "Year", name: "#= group.value #", }], categoryAxis: { font: "irsans", labels: { font: "irsans" } }, valueAxis: { labels: { font: "irsans", visible: true, } }, seriesDefaults: { style: "smooth", labels: { position: "Bottom", visible: false, fromat: "{0:n0}", font: "irsans", font: "irsans", format: "{0:n0}", } }, legend: { position: "top", labels: { font: "irsans" } }, tooltip: { visible: true, format: "{0:n0}", template: "#= series.name #: #= value #", font: "irsans", } }) }, error: function (ex) { alert('خطا در بازیابی اطلاعات' + ex); } }); return false; });
public class DashoardViewModel : System.Object { public DashoardThirdViewModel() { } public string Series { get; set; } // ********** public int Year { get; set; } //********** public long Value { get; set; } // ********** }
ممنون از راهنمائی تون.
- تنها caller از پایان یافتن عملیات غیرهمزمان مطلع خواهد شد.
- هندل کردن خطا و همچنین مدیریت چندین عملیات asynchronous به صورت همزمان خیلی سخت خواهد بود.
- پردازش نتایج فراخوانیهای async
- اجرای دیگر عملیات براساس پاسخ
function getCompanyFromOrderId(orderId) { getOrder(orderId, function(order) { getUser(order.userId, function(user) { getCompany(user.companyId, function(company) { // do something with company }); }); }); }
function getCompanyFromOrderId(orderId) { try { getOrder(orderId, function (order) { try { getUser(order.userId, function (user) { try { getCompany(user.companyId, function (company) { try { // do something with company } catch (ex) { // handle exception } }); } catch (ex) { // handle exception } }); } catch (ex) { // handle exception } }); } catch (ex) { // handle exception } }
- Control
- Promise
- pending: یعنی وضعیت اولیه، هنوز به پایان نرسیده است.
- fulfilled: یعنی عملیات با موفقیت پایان پذیرفته است.
- rejected: یعنی عملیات با شکست مواجه شده است.
function getCompanyFromOrderId(orderId) { getOrder(orderId).then(function(order) { return getUser(order.orderId); }).then(function(user) { return getCompany(user.companyId); }).then(function(company) { // do something with company }).then(undefined, function(error) { // handle error }) }
var promise = new Promise(function(resolve, reject) { // انجام یکسری عملیات به عنوان مثال دریافت اطلاعات از سرور و... if (/* اگر کدهای فوق با موفقیت انجام شدند */) { resolve("عملیات با موفقیت انجام پذیرفت"); } else { reject(Error("خطایی رخ داده است")); } });
promise.then(function(result) { console.log(result); // "عملیات با موفقیت انجام پذیرفت " }, function(err) { console.log(err); // Error: "خطایی رخ داده است" });
function get(url){ return new Promise(function(resolve, reject) { $.get(url, function(data) { resolve(data); }) .fail(function(){ reject(); }); }); }
get('users.all').then(function(users){ myController.users = users; }, function(){ delete myController.users; });
get('users.all').then(function(users){ myController.users = users; }) .catch(function(){ delete myController.users; });
var usersPromise = get('users.all'); var postsPromise = get('posts.everyone'); Promise.all([usersPromise, postsPromise]) .then(function(result){ myController.users = result[0]; myController.posts = result[1]; }, function(){ delete myController.users; delete myController.posts; });
get('users.all').then(function(usersString){ return JSON.parse(usersString); }).then(function(users){ myController.users = users; });
get('users.all').then(JSON.parse).then(function(users){ myController.users = users; });
صفحات مودال در بوت استرپ 3
testmodal-(2).html
من خودم اکثر اوقات با json مقادیر مورد نظر رو در مودال نشون میدم ، چیزی شبیه به این :
function gettData(code) { $.ajax({ url: '@Url.Action(MVC.X.Y())', data: { code: code }, type: "POST", success: function (data) { $("#title").html(data.Title); $("#user-image").html(data.imagePath); }, error: function (response) { } }); }
$(document).on('click', '.item', function () { getData($(this).data("code")); $("#SecondModal").modal('toggle'); });
Rss آب و هوای هر شهر در یاهو به صورت یک لینک یکتا میباشد؛ به شکل زیر :
و این لینک http://weather.yahooapis.com/forecastrss?w=28350859&u=c اطلاعات آب و هوای تهران را در قالب یک RSS به شما نمایش خواهد داد.
خوب، حالا پارامتر دوم یعنی پارامتر u چکاری را انجام میدهد؟
* چنانچه مقدار پارامتر u برابر c باشد، یعنی شما دمای آب و هوای شهر مد نظر را بر اساس سانتیگراد میخواهید.
* اگر مقدار پارامتر u برابر f باشد، یعنی شما دمای آب و هوای آن شهر مورد نظر را بر اساس فارنهایت میخواهید.
برای گرفتن WOEID شهرها هم به این سایت بروید http://woeid.rosselliot.co.nz و اسم هر شهری که میخواهید بزنید تا WOEID را به شما نمایش دهد.
در این مثال من از یک DropDown استفاده کردم که کاربر با انتخاب هر شهر از DropDown، آب و هوای آن شهر را مشاهده میکند.
Action مربوط به صفحهی Index به صورت زیر میباشد :
[HttpGet] public ActionResult Index() { ViewBag.ProvinceList = _RPosition.Positions; ShowWeatherProvince(8); return View(); }
حال تابعی را که آب و هوای مربوط به هر شهر را نمایش میدهد، به شرح زیر است:
public ActionResult ShowWeatherProvince(int dpProvince) { XDocument rssXml=null; CountryName CountryName = new CountryName(); if (dpProvince != 0) { switch (dpProvince) { case 1: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2345768&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Azarbayejan-e Sharqhi" }; break; } case 2: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2345767&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Azarbayejan-e Qarbi" }; break; } case 3: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2254335&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Ardebil" }; break; } case 4: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=28350859&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Alborz" }; break; } case 5: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2345787&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Esfahan" }; break; } case 6: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2345775&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Ilam" }; break; } case 7: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2254463&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Bushehr" }; break; } case 8: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=28350859&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Tehran" }; break; } case 9: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2345769&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Chahar Mahall va Bakhtiari" }; break; } case 10: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=56189824&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Razavi Khorasan" }; break; } case 11: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2345789&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Shomali Khorasan" }; break; } case 12: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2345789&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Jonubi Khorasan" }; break; } case 13: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2345778&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Khuzestan" }; break; } case 14: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2255311&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Zanjan" }; break; } case 15: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2345784&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Semnan" }; break; } case 16: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2345770&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Sistan va Baluchestan" }; break; } case 17: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2345772&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Fars" }; break; } case 18: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=20070200&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Qazvin" }; break; } case 19: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2255062&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Qom" }; break; } case 20: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2345779&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Kordestan" }; break; } case 21: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2254796&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Kerman" }; break; } case 22: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2254797&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Kermanshah" }; break; } case 23: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2345771&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Kohgiluyeh va Buyer Ahmad" }; break; } case 24: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=20070201&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Golestan" }; break; } case 25: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2345773&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Gilan" }; break; } case 26: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2345782&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Lorestan" }; break; } case 27: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2345783&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Markazi" }; break; } case 28: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2345780&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Mazandaran" }; break; } case 29: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2254664&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Hamedan" }; break; } case 30: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2345776&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Hormozgan" }; break; } case 31: { rssXml = XDocument.Load("http://weather.yahooapis.com/forecastrss?w=2253355&u=c"); CountryName = new CountryName() { Country = "Iran", City = "Yazd" }; break; } } ViewBag.Location = CountryName; XNamespace yWeatherNS = "http://xml.weather.yahoo.com/ns/rss/1.0"; List<YahooWeatherRssItem> WeatherList = new List<YahooWeatherRssItem>(); for (int i = 0; i < 4; i++) { YahooWeatherRssItem YahooWeatherRssItem = new YahooWeatherRssItem() { Code = Convert.ToInt32(rssXml.Descendants("item").Elements(yWeatherNS + "forecast").ElementAt(i).Attribute("code").Value), Day = rssXml.Descendants("item").Elements(yWeatherNS + "forecast").ElementAt(i).Attribute("day").Value, Low = rssXml.Descendants("item").Elements(yWeatherNS + "forecast").ElementAt(i).Attribute("low").Value, High = rssXml.Descendants("item").Elements(yWeatherNS + "forecast").ElementAt(i).Attribute("high").Value, Text = rssXml.Descendants("item").Elements(yWeatherNS + "forecast").ElementAt(i).Attribute("text").Value, }; WeatherList.Add(YahooWeatherRssItem); } ViewBag.FeedList = WeatherList; } return PartialView("_Weather"); }
حالا کد مربوط به خواندن فایل Rss را برایتان توضیح میدهم : حلقهی for 0 تا 4 (که در کد بالا مشاهده میکنید)یعنی اطلاعات 4 روز آینده را برایم برگردان.
من تگهای Code ، Day ، Low ، High و text فایل RSS را در این حلقه For میخوانم که البته مقادیر این 4 روز را در لیستی اضافه میکنم که نوع این لیست هم از نوع YahooWeatherRssItem میباشد. من این کلاس را در فایل ضمیمه قرار دادم. اکنون هر کدام از این تگها را برایتان توضیح میدهم:
code : هر آب و هوا کدی دارد .مثلا آب و هوای نیمه ابری یک کد ، آب و هوای آفتابی کدی دیگر و ...
Low: حداقل دمای آن روز را به ما میدهد .
High: حداکثر دمای آن روز را به میدهد .
day: نام روز از هفته را بر میگرداند مثلا شنبه ، یکشنبه و ....
text: که توضیحاتی میدهد مثلا اگر هوا آفتابی باشد مقدار sunny را بر میگرداند و ...
خوب، تا اینجا ما Rss مربوط به هر شهر را خواندیم حالا در قسمت Design باید چکار کنیم .
کدهای html صفحهی Index ما شامل کدهای زیر است :
@{ ViewBag.Title = "Weather"; } <link href="~/Content/User/Weather/Weather.css" rel="stylesheet" /> @section scripts{ <script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> <script type="text/javascript"> $("#dpProvince").change(function () { $(this).parents("form").submit(); }); </script> } <h2>Weather</h2> <div id="Progress"> <img src="~/Images/User/Other/ajax-loader.gif" /> </div> <div id="BoxContent"> @Html.Partial("_Weather")</div> @using (Ajax.BeginForm(actionName: "ShowWeatherProvince", ajaxOptions: new AjaxOptions { UpdateTargetId = "BoxContent", LoadingElementId = "Progress", InsertionMode = InsertionMode.Replace })) { <div style="padding-top:15px;"> <div style="float:left; width:133px; ">Select Your Province</div> <div style="float:left"> @Html.DropDownList("dpProvince", new SelectList(ViewBag.ProvinceList, "Id", "Name"),"Select Your Province", new { @class = "webUserDropDown", @style = "width:172px" })</div> </div> }
@{ List<Weather.YahooWeatherRssItem> Feeds = ViewBag.FeedList; } <div> @{ HtmlString StartTable = new HtmlString("<table class='WeatherTable' cellspacing='0' cellpadding='0'><tbody><tr>"); HtmlString EndTable = new HtmlString("</tr></tbody></table>"); HtmlString StartTD = new HtmlString("<td>"); HtmlString EndTD = new HtmlString("</td>"); } <div style="width: 300px;"> @{ @StartTable foreach (var item in Feeds) { @StartTD <div>@item.Day</div> <div> @{ string FileName = ""; switch (item.Code) { case 0: { FileName = "/Images/User/Weather/Tornado.png"; break; } case 1: { FileName = "/Images/User/Weather/storm2.gif"; break; } case 2: { FileName = "/Images/User/Weather/storm2.gif"; break; } case 3: { FileName = "/Images/User/Weather/storm2.gif"; break; } case 4: { FileName = "/Images/User/Weather/15.gif"; break; } case 5: { FileName = "/Images/User/Weather/29.gif"; break; } case 6: { FileName = "/Images/User/Weather/29.gif"; break; } case 7: { FileName = "/Images/User/Weather/29.gif"; break; } case 8: { FileName = "/Images/User/Weather/26.gif"; break; } case 9: { FileName = "/Images/User/Weather/drizzle.png"; break; } case 10: { FileName = "/Images/User/Weather/26.gif"; break; } case 11: { FileName = "/Images/User/Weather/18.gif"; break; } case 12: { FileName = "/Images/User/Weather/18.gif"; break; } case 13: { FileName = "/Images/User/Weather/19.gif"; break; } case 14: { FileName = "/Images/User/Weather/19.gif"; break; } case 15: { FileName = "/Images/User/Weather/19.gif"; break; } case 16: { FileName = "/Images/User/Weather/22.gif"; break; } case 17: { FileName = "/Images/User/Weather/Hail.png"; break; } case 18: { FileName = "/Images/User/Weather/25.gif"; break; } case 19: { FileName = "/Images/User/Weather/dust.png"; break; } case 20: { FileName = "/Images/User/Weather/fog_icon.png"; break; } case 21: { FileName = "/Images/User/Weather/hazy_icon.png"; break; } case 22: { FileName = "/Images/User/Weather/2017737395.png"; break; } case 23: { FileName = "/Images/User/Weather/32.gif"; break; } case 24: { FileName = "/Images/User/Weather/32.gif"; break; } case 25: { FileName = "/Images/User/Weather/31.gif"; break; } case 26: { FileName = "/Images/User/Weather/7.gif"; break; } case 27: { FileName = "/Images/User/Weather/38.gif"; break; } case 28: { FileName = "/Images/User/Weather/6.gif"; break; } case 29: { FileName = "/Images/User/Weather/35.gif"; break; } case 30: { FileName = "/Images/User/Weather/7.gif"; break; } case 31: { FileName = "/Images/User/Weather/33.gif"; break; } case 32: { FileName = "/Images/User/Weather/1.gif"; break; } case 33: { FileName = "/Images/User/Weather/34.gif"; break; } case 34: { FileName = "/Images/User/Weather/2.gif"; break; } case 35: { FileName = "/Images/User/Weather/freezing_rain.png"; break; } case 36: { FileName = "/Images/User/Weather/30.gif"; break; } case 37: { FileName = "/Images/User/Weather/15.gif"; break; } case 38: { FileName = "/Images/User/Weather/15.gif"; break; } case 39: { FileName = "/Images/User/Weather/15.gif"; break; } case 40: { FileName = "/Images/User/Weather/12.gif"; break; } case 41: { FileName = "/Images/User/Weather/22.gif"; break; } case 42: { FileName = "/Images/User/Weather/22.gif"; break; } case 43: { FileName = "/Images/User/Weather/22.gif"; break; } case 44: { FileName = "/Images/User/Weather/39.gif"; break; } case 45: { FileName = "/Images/User/Weather/thundershowers.png"; break; } case 46: { FileName = "/Images/User/Weather/19.gif"; break; } case 47: { FileName = "/Images/User/Weather/thundershowers.png"; break; } case 3200: { FileName = "/Images/User/Weather/1211810662.png"; break; } } } <img alt='@item.Text' title='@item.Text' src='@FileName'> </div> <div> <span>@item.High°</span> <span>@item.Low°</span> </div> @EndTD } } @EndTable </div> </div>
چنانچه در مورد RSS وضعیت آب و هوای یاهو اطلاعات دقیقتری را میخواهید بدانید به این لینک بروید.
در آموزش بعدی قصد دارم برایتان این بخش را توضیح دهم که بر اساس IP بازدید کننده سایت شما، اطلاعات آب و هوایی شهر بازدید کننده را برایش در سایت نمایش دهد.
Files-06bf65bac63d4dd694b15fc24d4cb074.zip
موفق باشید