75 articles Javascript Page 4 / 8

ASP MVC Remove Validation

Posted on June 18, 2015 by Chandra Oemaryadi

Berikut contoh penggunaan remove validation pada model di ASP MVC. Remove validation hanya berfungsi jika fungsi client side validation diaktifkan. [code language=”csharp”] [Remote("CheckForUniqueEmail", "Membership", "SecurityGuard", AdditionalFields="User.UserName", ErrorMessage = "This {0} is already used.")] public string Email { get; set; } [/code] [code language=”html”] <div class="form-group"> @Html.LabelFor(model => model.Email, new { @class = "col-xs-2 control-label" })…

ASP Add Callback to jQuery Form Validation on Invalid

Posted on June 17, 2015 by Chandra Oemaryadi

Fungsi untuk menangani callback setelah terjadi error pada validasi form client side menggunakan jQuery [code language=”javascript”] $(‘#main-form’).bind(‘invalid-form.validate’, function () { $(‘form button, form input[type=submit]’).removeAttr(‘disabled’); }); [/code] main-form adalah id dari form yang divalidasi. http://stackoverflow.com/questions/3873534/how-can-i-add-callbacks-to-jquery-validation-when-used-in-mvc-2

Kendo UI Combobox

Posted on June 16, 2015November 29, 2017 by Chandra Oemaryadi

Contoh penggunaan Kendo UI Combobox, dengan mewajibkan user memilih salah satu nilai yang valid dari Combobox. [code language=”javascript”] function comboBoxOnChange(e){ if (this.value() && this.selectedIndex == -1) { //or use this.dataItem to see if it has an object this.text(”); } } $(‘#Disposition1Email’).kendoComboBox({ dataTextField: "Text", dataValueField: "Value", autoBind: false, dataSource: { data: @Html.Raw(Model.GetAssigneeOptionsAsJson()) }, change : comboBoxOnChange,…

Kendo UI AutoComplete Example

Posted on June 9, 2015June 9, 2015 by Chandra Oemaryadi

Contoh kode javascript menggunakan Kendo UI AutoComplete [code language=”javascript”] var assigneeValid = false; $("#Assignee").kendoAutoComplete({ placeholder: "Silakan Pilih", dataTextField: "Text", filter: "contains", minLength: 2, dataSource: new kendo.data.DataSource({ data: @Html.Raw(Model.GetAssigneeOptionsAsJson()) }), open: function(e){ assigneeValid = false; }, select: function (e) { var item = e.item; var dataItem = this.dataItem(e.item.index()); $("#Assignee").val(dataItem.Text); assigneeValid = true; }, close: function(e){ if(!assigneeValid)…

Angular JS – Custom Built Editor Template ASP.NET MVC

Posted on June 8, 2015June 8, 2015 by Septu Jamasoka

Untuk dapat menggunakan custom built editor template, pastikan terlebih dahulu terdapat file-file berikut. ~/Infrastructure/Abstract/IObjectExtender.cs ~/Infrastructure/Concrete/ObjectExtender.cs ~/Extension/HtmlExtensions.cs Untuk cara penggunaan sendiri: Textbox [code lang=”html”] @Html.AngularEditorFor(<expression>, <ngModel>, <htmlAttributes | optional>) [/code] Example: [code lang=”html”] @Html.AngularEditorFor(model => model.Test, "val.test", new { @class = "" }) [/code] Numeric Textbox [code lang=”html”] @Html.AngularEditorFor(<expression>, <ngModel>, <htmlAttributes | optional>) [/code] Example:…

Angular JS – ASP.NET MVC Bundling & Minification

Posted on June 5, 2015 by Septu Jamasoka

Bundling Angular JS [code lang=”csharp”] var scriptBundle = new ScriptBundle("~/bundles/app") .IncludeDirectory("~/Scripts/app/", "*.js", searchSubdirectories: true); bundles.Add(scriptBundle); [/code] Minification Permasalahan dalam minification angular JS adalah sistem minification akan mengubah semua dependency yang tidak didefinisikan sebelumnya menjadi sebuah huruf. Before Minification [code lang=”javascript”] app.controller(‘intraController’, function ($scope, $rootScope, $location, $routeParams, $route, intraDataSource, intraService) { var intraId = $routeParams.id; ……

Angular JS – Custom Directives

Posted on May 27, 2015May 27, 2015 by Septu Jamasoka

Directive memungkinkan untuk menulis HTML yang mengekspresikan behavior dari aplikasi yang dibuat. Template-expanding Directive paling gampang karena: mendefinisikan custom tag atau attribute yang bisa terus bertambah atau digantikan bisa terdapat controller logic, jika dibutuhkan Directive juga dapat digunakan untuk: Mengekspresikan complex UI Memanggil event dan mendaftarkan event handler Reuse komponen yang sering dipergunakan Cara penggunaan…

Angular JS – ASP.NET MVC Example

Posted on May 27, 2015May 27, 2015 by Septu Jamasoka

Folder Structure Untuk menginstall angular JS pada ASP.NET, buka Package Manager Console, kemudian ketik Install-Package AngularJS.Core Install-Package AngularJS.Route Scripts/app/app.js [code lang=”js”] var app = angular.module(‘intraApp’, [‘kendo.directives’, ‘ngRoute’, ‘ngAnimate’, ‘IntraService’]) .config(function ($routeProvider) { $routeProvider .when(‘/’, { templateUrl: ‘/Intra/Intra’, controller: ‘intraController’ }) .when(‘/create’, { templateUrl: ‘/Intra/Create’, controller: ‘intraController’ }) .when(‘/edit/:id’, { templateUrl: ‘/Intra/Create’, controller: ‘intraController’ }) .otherwise(…

Angular JS – Module, Directives, Controller & Model

Posted on May 27, 2015May 27, 2015 by Septu Jamasoka

Module Angular menggunakan module sebagai basis dari untuk membuat aplikasi angular. Module digunakan karena membuat kode lebih maintanable, testable, dan readable. Selain itu, pada module juga dapat dideklarasikan keperluan akan module lain sehingga tidak membingungkan. Untuk mendeklarasikan module, buat sebuah file javascript dengan potongan kode dibawah terdapat dalam file tersebut. [code type=”javascript”] var app =…

Angular JS – What & Why

Posted on May 27, 2015May 27, 2015 by Septu Jamasoka

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. Angular simplifies application development by presenting a higher level of abstraction to the developer. Like any abstraction, it comes at a cost of…