<template>
  <v-app>
    <v-toolbar app>
      <v-toolbar-title>
        <span>Vuetify</span>
        <span>MATERIAL DESIGN</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn
        flat
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
      >
        <span>Latest Release</span>
      </v-btn>
    </v-toolbar>

    <v-content>
      <HelloWorld/>
    </v-content>
  </v-app>
</template>

<script>


export default {
  name: 'App',
  components: {
    
  },
  data () {
    return {
      //
    }
  }
}
</script>

<template>

  <v-container v-if="loading">
    <div>
      <v-progress-circular
        indeterminate
        :size="150"
        :width="8"
        color="green">
      </v-progress-circular>
    </div>
  </v-container>

  <v-container v-else grid-list-xl>
    <v-layout wrap>
      <v-flex xs4
        v-for="(item, index) in wholeResponse"
        :key="index"
        mb-2>
        <v-card>
          <v-img
            :src="item.Poster"
            aspect-ratio="1"
          ></v-img>

          <v-card-title primary-title>
            <div>
              <h2>{{item.Title}}</h2>
              <div>Year: {{item.Year}}</div>
              <div>Type: {{item.Type}}</div>
              <div>IMDB-id: {{item.imdbID}}</div>
            </div>
          </v-card-title>

          <v-card-actions>
            <v-btn flat
              color="green"
              @click="singleMovie(item.imdbID)"
              >View</v-btn>
          </v-card-actions>

        </v-card>
      </v-flex>
  </v-layout>
  </v-container>
</template>

<script>
import movieApi from '@/services/MovieApi'

export default {
  data () {
    return {
      wholeResponse: [],
      loading: true
    }
  },
  mounted () {
    movieApi.fetchMovieCollection('indiana')
      .then(response => {
        this.wholeResponse = response.Search
        this.loading = false
      })
      .catch(error => {
        console.log(error)
      })
  },
  methods: {
    singleMovie (id) {
      this.$router.push('/movie/' + id)
    }
  }
}
</script>

<style scoped>
  .v-progress-circular
    margin: 1rem
</style>

<template>

  <v-container v-if="loading">
    <div>
        <v-progress-circular
          indeterminate
          :size="150"
          :width="8"
          color="green">
        </v-progress-circular>
      </div>
  </v-container>

  <v-container v-else>
    <v-layout wrap>
      <v-flex xs12 mr-1 ml-1>
        <v-card>
          <v-img
            :src="singleMovie.Poster"
            aspect-ratio="2"
          ></v-img>
          <v-card-title primary-title>
            <div>
              <h2>{{singleMovie.Title}}-{{singleMovie.Year}}</h2>
              <p>{{ singleMovie.Plot}} </p>
              <h3>Actors:</h3>{{singleMovie.Actors}}
               <h4>Awards:</h4> {{singleMovie.Awards}}
               <p>Genre: {{singleMovie.Genre}}</p>
            </div>
          </v-card-title>
          <v-card-actions>
            <v-btn flat color="green" @click="back">back</v-btn>
          </v-card-actions>
        </v-card>
      </v-flex>
    </v-layout>

    <v-layout row wrap>
      <v-flex xs12>
        <div>
        <v-dialog
          v-model="dialog"
          width="500">
          <v-btn
            slot="activator"
            color="green"
            dark>
            View Ratings
          </v-btn>
          <v-card>
            <v-card-title
             
              primary-title
            >
              Ratings
            </v-card-title>
            <v-card-text>
              <table style="width:100%" border="1" >
                <tr>
                  <th>Source</th>
                  <th>Ratings</th>
                </tr>
                <tr v-for="(rating,index) in this.ratings" :key="index">
                  <td align="center">{{ratings[index].Source}}</td>
                  <td align="center"><v-rating :half-increments="true" :value="ratings[index].Value"></v-rating></td>
                </tr>
              </table>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn
                color="primary"
                flat
                @click="dialog = false"
              >
                OK
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </div>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import movieApi from '@/services/MovieApi'
export default {
  props: ['id'],

  data () {
    return {
      singleMovie: '',
      dialog: false,
      loading: true,
      ratings: ''
    }
  },

  mounted () {
    movieApi.fetchSingleMovie(this.id)
      .then(response => {
        this.singleMovie = response
        this.ratings = this.singleMovie.Ratings
        this.ratings.forEach(function (element) {
          element.Value = parseFloat(element.Value.split(/\/|%/)[0])
          element.Value = element.Value <= 10 ? element.Value / 2 : element.Value / 20
        }
        )
        this.loading = false
      })
      .catch(error => {
        console.log(error)
      })
  },
  methods: {
    back () {
      this.$router.push('/')
    }
  }
}

</script>

<style scoped>
  .v-progress-circular
    margin: 1rem
</style>

<template>

  <v-container v-if="loading">
    <div>
      <v-progress-circular
        indeterminate
        :size="150"
        :width="8"
        color="green">
      </v-progress-circular>
    </div>
  </v-container>

  <v-container v-else-if="noData">
    <div>
    <h2>No Movie in API with {{this.name}}</h2>
    </div>
  </v-container>

  <v-container v-else grid-list-xl>
    <v-layout wrap>
      <v-flex xs4
        v-for="(item, index) in movieResponse"
        :key="index"
        mb-2>
        <v-card>
          <v-img
            :src="item.Poster"
            aspect-ratio="1"
          ></v-img>

          <v-card-title primary-title>
            <div>
              <h2>{{item.Title}}</h2>
              <div>Year: {{item.Year}}</div>
              <div>Type: {{item.Type}}</div>
              <div>IMDB-id: {{item.imdbID}}</div>
            </div>
          </v-card-title>

          <v-card-actions>
            <v-btn flat
              color="green"
              @click="singleMovie(item.imdbID)"
              >View</v-btn>
          </v-card-actions>

        </v-card>
      </v-flex>
  </v-layout>
  </v-container>
</template>

<script>
// در همه کامپوننتها جهت واکشی اطلاعات ایمپورت میشود
import movieApi from '@/services/MovieApi'

export default {
  // route پارامتر مورد استفاده در 
  props: ['name'],
  data () {
    return {
      // آرایه ای برای دریافت فیلمها
      movieResponse: [],
      // جهت نمایش لودینگ در زمان بارگذاری اطلاعات
      loading: true,
      // مشخص کردن آیا اطللاعاتی با سرچ انجام شده پیدا شده یا خیر
      noData: false
    }
  },
  // تعریف متدهایی که در برنامه استفاده میکنیم
  methods: {
    // این تابع باعث میشود که 
    // route
    // تعریف شده با نام
    // Movie
    // فراخوانی شود و آدرس بار هم تغییر میکنید به آدرسی شبیه زیر
    // my-site/movie/tt4715356 
    singleMovie (id) 
      this.$router.push('/movie/' + id)
    },

    fetchResult (value) {
      movieApi.fetchMovieCollection(value)
        .then(response => {
          if (response.Response === 'True') {
            this.movieResponse = response.Search
            this.loading = false
            this.noData = false
          } else {
            this.noData = true
            this.loading = false
          }
        })
        .catch(error => {
          console.log(error)
        })
    }
  },
  // جز توابع
  // life cycle
  // vue.js
  // میباشد و زمانی که تمپلیت رندر شد اجرا میشود
  // همچنین با هر بار تغییر در 
  // virtual dom
  // این تابع اجرا میشود
  mounted () {
    this.fetchResult(this.name)
  },
  // watch‌ها // کار ردیابی تغییرات را انجام میدهند و به محض تغییر مقدار  پراپرتی 
  // name
  // کد مورد نظر در بلاک زیر انجام میشود
  watch: {
    name (value) {
      this.fetchResult(value)
    }
  }
}
</script>

<style scoped>
  .v-progress-circular
    margin: 1rem
</style>

import axios from 'axios'

import axios from 'axios'

export default {

  fetchMovieCollection (name) {
    return axios.get('&s=' + name)
      .then(response => {
        return response.data
      })
  },

  fetchSingleMovie (id) {
    return axios.get('&i=' + id)
      .then(response => {
        return response.data
      })
  }
}

import Vue from 'vue'
import VueRouter from 'vue-router'
// برای رجیستر کردن کامپوننت‌ها در بخش روتر، آنها را ایمپورت میکنیم
import LatestMovie from '@/components/LatestMovie'
import Movie from '@/components/Movie'
import SearchMovie from '@/components/SearchMovie'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      // مسیری هست که برای این کامپوننت در نظر گرفته شده(صفحه اصلی)بدون پارامتر
      path: '/',
      // نام روت
      name: 'LatestMovie',
      // نام کامپوننت مورد نظر
      component: LatestMovie
    },
    {
      // پارامتری هست که به این کامپوننت ارسال میشه id
      // برای دستیابی به این کامپوننت نیاز هست با آدرسی شبیه زیر اقدام کرد
      // my-site/movie/tt4715356
      path: '/movie/:id',
      name: 'Movie',
      // در کامپوننت جاری یک پراپرتی وجود دارد 
      //id که میتوان با نام 
      // به آن دسترسی پیدا کرد
      props: true,
      component: Movie
    },
    {
      path: '/search/:name',
      name: 'SearchMovie',
      props: true,
      component: SearchMovie
    }
  ],
  // achieve URL navigation without a page reload
  // When using history mode, the URL will look "normal," e.g. http://oursite.com/user/id. Beautiful!
  // در آدرس # قرار نمیگیرد
  mode: 'history'
})

npm install

function deleteFile(location, filename)//حذف فیزیکی و منطقی فایل
{
    $.prompt("آیا برای حذف فایل موجود اطمینان دارید ؟", {
        title: '<img src="Images/warning.png" />',
        buttons: { "بله": true, "خیر": false },
        focus: 2,
        submit: function (e, v, m, f) {
            if (v == true) {
                var getdate = new Date();  //Used to prevent caching during ajax call
                if (xmlhttp) {
                    $("p#vtip").fadeOut("slow").remove(); //محو شدن tooltip
                    var id = document.getElementById("id").value;
                    var i = '3';
                    params = "id=" + id + "&i=" + i + "&filename=" + filename + "&location=" + location;
                    xmlhttp.open("POST", "FetchData/dbSearchDocument1.php", true);
                    xmlhttp.onreadystatechange = handleServerResponse4;
                    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                    xmlhttp.send(params);
                }
            }
            else {
            }
        }
    });
}
//-----------------------------------------------------------------------
function handleServerResponse4() {
    if ((xmlhttp.readyState == 1) || (xmlhttp.readyState == 2) || (xmlhttp.readyState == 3))//loading
    {
        document.getElementById("content").innerHTML = "<img src='Images/bigloading.gif'/>";
    }
    else if (xmlhttp.readyState == 4) //ready
    {
        if (xmlhttp.status == 200) {
            if (xmlhttp.responseText == 1) {
                $.prompt(". حذف فایل با موفقیت انجام شد ", {
                    title: '<img src="Images/warning3.png" />',
                    buttons: { "بستن": true }
                });
            }
            else {
                $.prompt("! حذف فایل با خطا مواجه شده است", {
                    title: '<img src="Images/warning2.png" />',
                    buttons: { "بستن": true }
                });
            }
        }
        else {
            alert("Error during AJAX call. Please try again");
        }
    }
}
//-----------------------------------------------------------------------

    public class Customer
    {
        public int Id { get; set; }

        public string Name { get; set; }

        public string Email { get; set; }

        public string Website { get; set; }

        public string Phone { get; set; }
    }

    public class Customers
    {
        public IList<Customer> GetList()
        {
            return new List<Customer>()
            {
                new Customer()
                {
                     Id=1,
                     Name="mohsen.d",
                     Email="email@domain.com",
                     Website="domain.com",
                     Phone="213214321"
                }
            };
        }

        public IList<Customer> GetEmptyList()
        {
            return new List<Customer>();
        }
    }

    public class HomeController : Controller
    {
        public ActionResult List()
        {
            var model = new Customers().GetList();
            return View(model);
        }

        public ActionResult EmptyList()
        {
            var model = new Customers().GetEmptyList();
            return View("list", model);
        }
    }

@helper GenerateList(IEnumerable<object> items, List<WebGridColumn> columns)
{
    var grid = new WebGrid(items);
    
    <div>  
        @grid.GetHtml(
                        tableStyle: "list",
                        headerStyle: "list-header",
                        footerStyle: "list-footer",
                        alternatingRowStyle: "list-alt",
                        selectedRowStyle: "list-selected",
                        rowStyle: "list-row",
                        htmlAttributes: new { id = "listItems" },
                        mode: WebGridPagerModes.All,
                        columns: columns
    )

    </div>
}

using System;
using System.Collections.Generic;
using System.IO;
using System.Reflection;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.HtmlControls;

namespace AjaxTest
{
   public class KeyVal
   {
       public string Key { set; get; }
       public object Value { set; get; }
   }

   /// <summary>
   /// Summary description for Ajax
   /// </summary>
   [ScriptService]
   [WebService(Namespace = "http://tempuri.org/")]
   [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
   [System.ComponentModel.ToolboxItem(false)]
   public class Ajax : WebService
   {
       /// <summary>
       /// Removes Form tags using Regular Expression
       /// </summary>
       private static string cleanHtml(string html)
       {
           return Regex.Replace(html, @"<[/]?(form)[^>]*?>", string.Empty, RegexOptions.IgnoreCase);
       }

       /// <summary>
       /// تبدیل یک یوزر کنترل به معادل اچ تی ام ال آن
       /// </summary>
       /// <param name="path">مسیر یوزر کنترل</param>
       /// <param name="properties">لیست خواص به همراه مقادیر مورد نظر</param>
       /// <returns></returns>
       /// <exception cref="NotImplementedException"><c>NotImplementedException</c>.</exception>
       [WebMethod(EnableSession = true)]
       [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
       public string RenderUserControl(string path,
             List<KeyVal> properties)
       {
           Page pageHolder = new Page();

           UserControl viewControl =
              (UserControl)pageHolder.LoadControl(path);

           viewControl.EnableViewState = false;

           Type viewControlType = viewControl.GetType();

           if (properties != null)
               foreach (var pair in properties)
               {
                   if (pair.Key != null)
                   {
                       PropertyInfo property =
                           viewControlType.GetProperty(pair.Key);

                       if (property != null)
                       {
                           if (pair.Value != null) property.SetValue(viewControl, pair.Value, null);
                       }
                       else
                       {
                           throw new NotImplementedException(string.Format(
                                                                 "UserControl: {0} does not have a public {1} property.",
                                                                 path, pair.Key));
                       }
                   }
               }

           //Form control is mandatory on page control to process User Controls
           HtmlForm form = new HtmlForm();

           //Add user control to the form
           form.Controls.Add(viewControl);

           //Add form to the page
           pageHolder.Controls.Add(form);

           //Write the control Html to text writer
           StringWriter textWriter = new StringWriter();

           //execute page on server
           HttpContext.Current.Server.Execute(pageHolder, textWriter, false);

           // Clean up code and return html
           return cleanHtml(textWriter.ToString());
       }       
   }
}

 <system.web.extensions>
   <scripting>
     <webServices>
       <jsonSerialization maxJsonLength="10000000"></jsonSerialization>
     </webServices>
   </scripting>
 </system.web.extensions>

$.fn.advloaduc = function(options) {
   var defaults = {
       webServiceName: 'Ajax.asmx', //نام فایل وب سرویس ما
       renderUCMethod: 'RenderUserControl', //متد وب سرویس
       ucMethodJsonParams: '{path:\'\'}',//پارامترهایی که قرار است پاس شوند
       completeHandler: null //پس از پایان کار وب سرویس این متد جاوا اسکریپتی فراخوانی می‌شود
   };
   var options = $.extend(defaults, options);

   return this.each(function() {
       var obj = $(this);
       obj.prepend("<div align='center'> لطفا اندکی تامل بفرمائید... <img src=\"images/loading.gif\"/></div>");

       $.ajax({
           type: "POST",
           url: options.webServiceName + "/" + options.renderUCMethod,
           data: options.ucMethodJsonParams,
           contentType: "application/json; charset=utf-8",
           dataType: "json",
           success:
                   function(msg) {
                       obj.html(msg.d);

                       // if specified make callback and pass element
                       if (options.completeHandler)
                           options.completeHandler(this);
                   },
           error:
                   function(XMLHttpRequest, textStatus, errorThrown) {
                       obj.html("امکان اتصال به سرور در این لحظه مقدور نیست. لطفا مجددا سعی کنید.");
                   }
       });
   });
};

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="part1.ascx.cs" Inherits="TestJQueryAjax.part1" %>
<asp:Label runat="server" ID="lblData" ></asp:Label>

using System;
using System.Threading;

namespace TestJQueryAjax
{
   public partial class part1 : System.Web.UI.UserControl
   {
       public string Text1 { set; get; }
       public string Text2 { set; get; }

       protected void Page_Load(object sender, EventArgs e)
       {
           Thread.Sleep(3000);
           if (!string.IsNullOrEmpty(Text1) && !string.IsNullOrEmpty(Text2))
               lblData.Text = Text1 + "<br/>" + Text2;
       }
   }
}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestJQueryAjax._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title></title>

   <script src="js/jquery.js" type="text/javascript"></script>
   <script src="js/jquery.advloaduc.js" type="text/javascript"></script>
   <script src="js/json2.js" type="text/javascript"></script>

   <script type="text/javascript">
       function showAlert() {
           alert('finished!');
       }

       //تشکیل پارامترهای متد وب سرویس جهت ارسال به آن
       var fileName = 'part1.ascx';
       var props = [{ 'Key': 'Text1', 'Value': 'سطر یک' }, { 'Key': 'Text2', 'Value': 'سطر 2'}];
       var jsonText = JSON.stringify({ path: fileName, properties: props });

       $(document).ready(function() {
           $("#loadMyUc").advloaduc({
               webServiceName: 'Ajax.asmx',
               renderUCMethod: 'RenderUserControl',
               ucMethodJsonParams: jsonText,
               completeHandler: showAlert
           });
       });
  
   </script>

</head>
<body>
   <form id="form1" runat="server">
   <div id="loadMyUc">
   </div>
   </form>
</body>

</html>

    $(".test").bind( "click mouseover mouseout", function() { console.log('fired!') } );

$(".test").unbind( "click");

$("#area").on('click','.test',function(e){...});

$("body").on('click','.test',function(e){...});

<div> <a> <b>text</b> </a> </div>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
        <script src="http://code.jquery.com/jquery-migrate-1.4.1.js"></script>
    <script>
    $(document).ready(function(){
      $(".myspan").on( "click",".test", function(e) {
        e.stopPropagation();
        console.log('test fired!') } );
      $(".myspan").on( "click", function() { console.log(' myspan fired!') } );
      $(".mydiv").on( "click", function() { console.log(' mydiv fired!') } );

    });
    </script>
  </head>
  <body>
<div class="mydiv">
  <span class="myspan">
    <button type="button" class="test">Ok</button>
  </span>

</div>
  </body>
</html>

$().on({
    'click': function (e) {
       // function
    },
    'hover': function (e) {
       // function    
    }
});

$.prompt( msg , options )

• promptloaded
  معادل loaded در optionها .
  
  
• promptsubmit
  هنگام submit شدن ( کلیک شدن یکی از دکمه‌های ) state فعال می‌شود .
  
  
• promptclose
  معادل callback در optionها .
  
  
• promptstatechanging
  معادل statechanging در optionها .
  
  
• promptstatechanged
  معادل statechanged در optionها .

• ‪jQuery.prompt.setDefaults(options)
  تعیین مقادیر پیشفرض برای همه‌ی prompt‌ها .
  

  jQuery.prompt.setDefaults({
  prefix: 'myPrompt',
  show: 'slideDown'
  });

• ‪jQuery.prompt.setStateDefaults(options)
  تعیین مقادیر پیشفرض برای stateها .
  

  jQuery.prompt.setStateDefaults({
  buttons: { Ok:true, Cancel:false },
  focus: 1
  });

• ‪jQuery.prompt.getCurrentState()
  یک شئ jQuery از state جاری برمی‌گرداند .
  
  
• ‪jQuery.prompt.getCurrentStateName()
  نام state جاری را برمی‌گرداند .
  
  
• ‪jQuery.prompt.getStateContent(stateName)
  یک شئ jQuery از state مشخص شده برمی‌گرداند .
  
  
• ‪jQuery.prompt.goToState(stateName, callback)
  state مشخص شده را در prompt نمایش می‌دهد .
  callback تابعی است که بعد از تغییر state فراخوانی می‌شود .
  
  
• ‪jQuery.prompt.nextState(callback)
  prompt را به state بعدی منتقل می‌کند .
  
  
• ‪jQuery.prompt.prevState(callback)
  prompt را به state قبلی منتقل می‌کند .
  
  
• ‪jQuery.prompt.close()
  prompt را می‌بندد .

• alert
  

  $.prompt("یک پیام تستی",
      {
          prefix: 'dnt',
          buttons: { 'تایید': true }
      });
  
  
  
  
  
  
  

  
  نتیجه :
  
  

  
  
  

• confirm
  

  $.prompt("درخواست تایید - موافقید ؟",
      {
          prefix: 'dnt',
          buttons: { 'تایید': true, 'انصراف': false }
      });

  
  نتیجه :
  

  
  
  

• prompt
  یک فرم html مخفی برای نمایش در prompt :
  
  

  <div class="prompt-content" style="display: none;">
      <span>نام خود را وارد نمایید : </span>
      <span>
          <input type="text" name="name" />
      </span>
  </div>

  
     
  نمایش prompt :
  
  

  $.prompt(
      $(".prompt-content").html(),
      {
          prefix: 'dnt',
          buttons: { 'تایید': true, 'انصراف': false }
      });

  
  نتیجه :