Özgür Özvarış

Bir yazılımcının kırık dökük dünyası

c# mvc ajax post - 1

clock Eylül 28, 2017 11:07 by author OzgurOzvaris

Merhaba Arkadaşlar,

c# mvc mimarinin en önemli esnekliklerinden biriside sayfayı parçalı olarak yükleyebilmenizdir. Ancak mevcut mvc yapısı çok yalın yalın bir frame work ile geldiği için partial viewların sayfanıza yerleşebilmesi yada kaydet, sil, ara gibi işlemlerin ajax ile iletilip dönen mesajların gösterilmesi gibi işlemler için kendinize ait bir javascript framework oluşturmanız gerekiyor.

Bu gün size kendi oluşturduğum frameworkten controller metodlarını çağırırken kullandığım ajaz yöntemlerden bahsedeceğim. Ne yazıkkı çalışmamız tam bir eğitim olmadığı ve temelden tepeye doğru yükselmediği için biraz tepeden dalma olacak. Ama anlamaya çalışırsanız sizede faydalı olacağını düşünüyorum.

1. Controller metodu ajax ile çağırma senaryosu ayrı ayrı value parametrelerle ile çağırmak

//View javascript:  

var data = { param1: val1, param2: val2, param3: val3}

ajaxMethod(url, data);

//c# controller:
public ActionResult Controllermethod(int param1, int param2, int param3)

2. Controller metodu ajax ile çağırma senaryosu metodu class array parametresi ile çağırmak 

//View javascript: 

var classParameter= new Array();

classParameter.push({ param1: val1, param2: val2, paramn: valn });
...
classParameter.push({ param1: val1, param2: val2, paramn: valn });

ajaxMethod(url, $.postify(classParameter, "classParameter")) 

//c# controller: 

public IEnumerable<ClassType> classParameter

public ActionResult ControllerMetod(IEnumerable<ClassType> classParameter)

 3. Controller metodu ajax ile çağırma senaryosu - metodu serilized form input html elemets class parametresi ile çağırmak 

Burada kullanılan postify metodu serialize edilmiş dizinin sonuna yeni bir class eklemenizi sağlıyor.

Kaynak : Posting Array and Form Data to Controller - MVC Ajax

//View Javascript

var frm = $("#Form1 :input");

var ExtraData = {

    param1: val1,

    param2: val2,

    param2: val3,

}

var data= frm.serializeObject($.postify(ExtraData, "ExtraData"));

ajaxMethod(url, data);

//c# controller

public class FormData
    {
        public int? inputElement1{ get; set; }
        public string inputElement2{ get; set; }
        public string inputElement3{ get; set; }
        ...
        public DateTime? inputElement4 { get; set; }
        public bool? inputElement5 { get; set; }
        public int? inputElement6 { get; set; }


        public ExtraData ExtraData { get; set; }
    }


    public class ExtraData
    {
        public bool param1 { get; set; }
        public string param2 { get; set; }
        ...
        public ICollection<ClassType> param3{ get; set; }
    }

public ActionResult ControllerMetod(FormData classParameter)

4. Controller metodu ajax ile çağırma senaryosu - ajax dataya direk ilaveler yapmak

Daha sonradan serilized edilmiş form datasının bir dizi olduğunu düşünerek postify kullanmadan direk olarak diziye eleman ekleyerek yeni propertiler oluşturdum.

Not : Bu şekilde tekil int,string vs gibi değerleri ekleyebilirsiniz.

//View Javascript

var frm = $("#Form1 :input");

var $data = frm.serializeObject();

$data ['Param1'] = val1;
$data ['Param2'] = val3;


ajaxMethod(url, $data);

//c# controller

public class FormData
    {
        public int? inputElement1{ get; set; }
        public string inputElement2{ get; set; }
        public string inputElement3{ get; set; }
        ...
        public DateTime? inputElement4 { get; set; }
        public bool? inputElement5 { get; set; }
        public int? inputElement6 { get; set; }


        public string Param1{ get; set; }
        public int Param2{ get; set; }

    }

public ActionResult ControllerMetod(FormData classParameter)

İyi çalışmalar.

 

 



c# ajax json post

clock Ocak 7, 2017 18:00 by author OzgurOzvaris

Merhaba,

Kaynak : How do I build a JSON object to send to an AJAX WebService

Eğer bir c# mvc metodunu json data göndermek isterseniz aşağıda paylaştığım örmek faydalı olacaktır.

public Response ValidateAddress(Request request1, Request myRequest2)
data: {request1:$.toJSON(myData1), myRequest2:$.toJSON(myData2)}

Yada

data: {request1:JSON.stringify(myData1), myRequest2:JSON.stringify(myData2)}

İyi çalışmalar.

 



Javascript object / Array clone

clock Ekim 7, 2015 15:58 by author OzgurOzvaris

Merhaba arkadaşlar,

Eğer javascripte bir diziyi yada bir objeyi başka bir diziye eşitlerseniz reference type olduğu için clone yapmış olmazsınız. Farklı clone lama yöntemleri var. Sizlerle beğendiğim bir tanesini paylaşacağım.

function clonex(arry) {

    if (Object.prototype.toString.call(arry) === '[object Array]') {
        var clone = [];
        for (var i = 0; i < arry.length; i++)
            clone[i] = clonex(arry[i]);

        return clone;
    }
    else if (typeof (arry) == "object") {
        var clone = {};
        for (var prop in arry)
            if (arry.hasOwnProperty(prop))
                clone[prop] = clonex(arry[prop]);

        return clone;
    }
    else
        return arry;
}

İyi çalışmalar.



Javascript Array

clock Eylül 1, 2015 12:39 by author OzgurOzvaris

Merhaba Arkadaşlar,

Bu gün sizlerle java script arrayların kullanımı syntax ı ile ilgili küçük bir örnek paylaşacağım.

Kaynak : JavaScript Arrays 

Object içeren arraylar da elemanlara erişmek için iki farklı syntax kullanabilirsiniz. Bir tanesi dizi["eleman"] diğeri ise dizi.eleman. Eğer bu diziyi dinamic olarak doldurmanız düzenlemeniz gerekir ise ve eleman değeri parametrik olarak gelecekse elbetteki dizi["eleman"] şeklindeki kullanım çok kullanışlı olacaktır.

Dizilerin nasıl obje olarak tanımlandığı ile ilgili kaynakta geçen şu örnek çok güzel bir örnek

var person = {firstName:"John", lastName:"Doe", age:46};

Burada tek bir objeyi tanımladık. Peki bir obje dizisi yapmak istersek. Bu örnek işinize yarayacaktır. Her iki syntax'ıda kullandım.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var person = []
//lastname iki tırnak içinde tanımlandı
person.push( {firstName:"John", "lastName":"Doe", age:46});
person.push( {firstName:"Tom", "lastName":"Kimber", age:50});

//Gender elemanları sonradan eklendi
person[0]["Gender"] = "Male"; 
person[1]["Gender"] = "Male"; 

//firstName elemanına iki tırnak ile erişildi
document.getElementById("demo").innerHTML = person[1]["firstName"] + ";" + person[1].lastName + ";" + person[1].age + ";" + person[0].Gender;

</script>

</body>
</html>

İyi çalışmalar. 



Loading the XML Document

clock Mart 25, 2013 12:16 by author OzgurOzvaris

Değerli Arkadaşlar,

Eğer bir xml dökümanı farklı browserlarda yüklemek isterseniz...

Kaynak

http://www.w3schools.com/xpath/xpath_examples.asp

<!DOCTYPE html>
<html>
<body>
<script>
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",dname,false);
xhttp.send("");
return xhttp.responseXML;
}

xml=loadXMLDoc("books.xml");
path="/bookstore/book/title"
// code for IE
if (window.ActiveXObject)
{
var nodes=xml.selectNodes(path);

for (i=0;i<nodes.length;i++)
  {
  document.write(nodes[i].childNodes[0].nodeValue);
  document.write("<br>");
  }
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
{
var nodes=xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result=nodes.iterateNext();

while (result)
  {
  document.write(result.childNodes[0].nodeValue);
  document.write("<br>");
  result=nodes.iterateNext();
  }
}
</script>

</body>
</html>

İyi çalışmalar.



Json Serializer

clock Ocak 2, 2013 08:56 by author OzgurOzvaris

Değerli arkadaşlar,

Yeni web dünyasında artık olmazsa olmaz konulardan biri jquery diğeride json data paketleri gibi gözüküyor. Bu günki örneğimizde client tarafına yüklenmiş bir dropdown listin nasıl tekrar server'a postback olmadan başka bir doropdown list tarafından master detail ilişki ile yönetildiğini göreceğiz.

Hemen bir kaç kaynak linki verelim.

JSON Serialization and Deserialization in ASP.NET

Adding options to a select using Jquery/javascript

What's the best way to query an array in javascript to get just the items from it I want?

Using core jQuery, how do you remove all the options of a select box, then add one option and select it?

Gördüğünüz gibi basit uygulamalarda bile ne kadar çok yardıma ihtiyaç duyuyoruz. Varın siz bir de bir projenin kaç kırıntı ve köklü bilgi parçasından meydan geldiğini hesap edin. Her neyse.

JsonSerializer.zip (175,35 kb)

 



jquery iframe data yönetimi - 2

clock Aralık 18, 2012 09:32 by author OzgurOzvaris

Bir önceki yazımızda iframe içine bir div koyarak içeriğine erişip değiştirmiştik. Şimdi ise daha farklı bir yaklaşım dan bahsedeceğim.

Kaynağına buradan erişebilirsiniz.

<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
      $(document).ready(function(){
        var locations = ["http://webPage1.com", "http://webPage2.com"];
        var len = locations.length;
        var iframe = $('#frame');
        var i = 0;
        setInterval(function () {
            $(iframe).attr('src', locations[++i % len]);
        }, 30000);
      });
    </script>
  </head>
  <body>
    <iframe id="frame"></iframe>
  </body>
</html>



Örnekte görüldüldüğü üzere

$(iframe).attr('src', '...');.

Komutu ile iframe'in src tagını değiştirebiliyoruz. Örnekte birde setinterval kullanılmış. Sebebi asenkron olarak iframe yüklendikten sonra srcyi değiştirebilmek. Bazen direk olarak bu değişikliği yapmaya çalışırsanız daha iframe derlenmediği için sonuç alınamayabilir.

İyi çalışmalar



jquery iframe data yönetimi

clock Aralık 11, 2012 10:15 by author OzgurOzvaris

iframe içindeki datanın yönetilebilmesi için güzel bir örnek buldum.

http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

<iframe id="iframeID" ...></iframe>

iframe içine bir div yerleştirilir.

<div id="someID">Hello world!</div>

sonra dive erişilerek data yönetilir.

$('#iframeID').contents().find('#someID').html();


Ext JS Dünyası

clock Aralık 7, 2012 11:03 by author OzgurOzvaris

Gerçekten çok güzel bir Javascript kütüphanesi. http://docs.sencha.com/ adresinden en güncel versiyonu takip edebilirsiniz.

Multi windows yada tabs diyebileceğimiz uygulama mantığı çok güzel.

"Web Desktop" örnek uygulamalarına hayranım.

http://docs.sencha.com/ext-js/4-0/#!/example/desktop/desktop.html (Web Desktop uygulamasının lnki versiyonla değişiyor)

Tavsiye Ederim.

Herkese Selamlar.



Hakkımızda  AboneOl 

Blog Yayınımıza Hoşgeldiniz.

Month List

RecentPosts

Sign In