Ö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.

 



Basit SignalR uygulaması - 2 Server to Client

clock Mart 4, 2016 17:40 by author OzgurOzvaris

Merhaba Arkadaşlar,

Geçen gün ki çalışmamızda n client'ın birbiri ile signalr ile haberleşmesini dair basit bir mvc3 uygulaması gördük

Basit SignalR uygulaması - 1 Client to Client .

Bu gün ise dışarıya açık bir webapi yazacağız ve 3. party bir uygulama be web api aracılığı ile clientlarımıza mesaj gönderecek. Biz kendi uygulamamızda santral uygulamasının web api aracılığı ile client'larımıza çalan telefona göre pencere açması için bu yöntemi kullandık. Sizlerde istediğiniz benzer amaçlar için kullanabilirsiniz.

Kaynaklar,

How to create Web API using MVC 3.0

Routing with Multiple Parameters using ASP.NET MVC

Örnek projemizin kaynak kodu SignalRSample.zip (9,18 mb) (vs 2010 mvc 3)

Öncelikle bir nuget paketi yüklemelisiniz

Install-Package Microsoft.AspNet.WebApi -Version 4.0.30506

Ardından global.asax a bir route satırı eklemek geliyor. !Beni biraz uğraştırdı. Bu route satırının diğer route satırlarının üstüne eklemenizi tavsiye ederim. Aksi taktirde çalışmayabilir. ! 

using System.Web.Http;
routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new {id = RouteParameter.Optional}
                );

Artık yazacağımız web api'ye http://sitename/api/ApiName?paramaters şeklinde erişebiliriz. 

Şimdi geçen uygulamamızda geliştirdirdiğimiz uygulamamızdaki client lara mesaj gönderen bir örnek api uygulaması yazalım.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;

namespace SignalRSample.Controllers
{
    /// <summary>
    /// http://stackoverflow.com/questions/11472920/send-signalr-message-from-server-to-all-clients
    /// http://stackoverflow.com/questions/21519911/how-to-create-web-api-using-mvc-3-0
    /// http://stackoverflow.com/questions/2246481/routing-with-multiple-parameters-using-asp-net-mvc
    /// 3. nolu global.asax route basamağını diğer routların üstüne yazmayınca çalışmadı
    /// </summary>
    public class ValuesController : ApiController
    {

        public string Get(string id, string Message)
        {
            SignalRHost.OpenPopUp(id, Message);
            return "1";
        }

    }
}

Şimdi uygulamamızı çalıştıralım.ve client id olarak 1 Set edelim

test apimizi adres bardan çağıralım.

http://localhost:50995/api/Values?id=1&message=Merhaba%20D%C3%BCnya

Eğer sorunsuz bir şekilde basamakları uyguladı iseniz. Ekranda merhaba dünya mesajını görmüş olmanız gerekiyor.

 

Örnek projemizin kaynak kodu SignalRSample.zip (9,18 mb) (vs 2010 mvc 3)

İyi çalışmalar.

 

 



Basit SignalR uygulaması - 1 Client to Client

clock Mart 4, 2016 11:37 by author OzgurOzvaris

Merhaba,

Web yazılımlarında bazen client'lar ın birbiri ile etkileşim içinde olması yada serverdan bazı clientlara yada tamamına mesajlar göndermeniz gerekebilir. Bir çok benzer senearyado signalR güzel bir mesajlaşma imkanı sağlıyor.

Burada örneklerde paylaşacağım signalR uygulaması signalR 1.0 örnekleridir. yinede 2.0 için size yol gösterecektir.

Kaynaklar 

ASP.NET SignalR

Örnek projemizin kaynak kodu SignalRSample.zip (9,18 mb) (vs 2010 mvc 3)

Öncelikle SignalR yi sisteme kurmanız gerekiyor bunun için iki yol var.

1. Yol : Nuget Console üzerinden Install-Package Microsoft.AspNet.SignalR

2. Yol : Manuel kurulum

SignalR sayfasından indiriyoruz.

Dll lerini referans'a ekliyoruz.

 

global.asax Application_Start'a 

RouteTable.Routes.MapHubs() satırını ekliyoruz (bu satır eklenmezse biraz sonra javascript bölümüne ekleyeceğimiz otomatik oluşan signalr/hubs scripti oluşturulmuyor)

Web.config

<validation validateIntegratedModeConfiguration="false" />

<modules runAllManagedModulesForAllRequests="true"/>

satırları olmalı. (Zaten default olarak bu şekilde...)

Javascript

SignalR çalıştırmak istediğiniz sayfaya

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.9.2.blue/js/jquery-1.8.3.js")" ></script>

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.signalR-1.0.0-rc2.min.js")"></script>

<!--Reference the autogenerated SignalR hub script. -->

<script type="text/javascript" src="/signalr/hubs"></script>

javascript dosyalarını referans göstermeniz gerekiyor. jquery daha yüksek olabilir ancak 1.5 gibi versiyonlarda hata alıyorsunuz. Buna dikkat edin.

Şimdi yapmamız gereken basit mvc tabanlı bir SinalR uygulaması. Boş mv3 projesi oluşturalım.

Önce mesaj alıp vermede kullanmak için bir SignalRHost Class'ı oluşturuyoruz.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR.Hubs;
using Microsoft.AspNet.SignalR.Transports;
using Microsoft.AspNet.SignalR.Infrastructure;
using Microsoft.AspNet.SignalR;
using System.Threading.Tasks;
using System.Timers;

namespace CCMWeb1_0
{
    [HubName("CCMainSRHub")]
    public class SignalRHost : Hub
    {

        /// <summary>
        /// http://stackoverflow.com/questions/14439389/sending-json-with-signalr
        /// </summary>
        /// <param name="name"></param>
        /// <param name="message"></param>
        public void Send(string ClientID, string MessageType, string Message)
        {
            // Call the broadcastMessage method to update clients.
            Clients.All.broadcastMessage(ClientID, MessageType, Message);

        }

        public static void OpenPopUp(string ClientID)
        {
            IHubContext context = GlobalHost.ConnectionManager.GetHubContext<SignalRHost>();
            context.Clients.All.broadcastMessage(ClientID, "OpenPopUp", "OK");
        }
    }
}

 Views->Home->Index.chtml içine bir kaç java script fonksyonu ekliyoruz.

@{
    ViewBag.Title = "Home Page";
}
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.9.2.blue/js/jquery-1.8.3.js")" ></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.signalR-1.0.0-rc2.min.js")"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script type="text/javascript" src="/signalr/hubs"></script>
<script type="text/javascript">
    var $lib = {};
</script>
<script type="text/javascript">
    $(document).ready(function() {

    });

    //Client'ın kendine özel id'sini set ediyor
    function SetID() {



        $("#hdnConnectionID").val($("#txtConnectionID").val());

        $("#lblConnection_ID").text($("#txtConnectionID").val());

        $lib.ClientID = $("#txtConnectionID").val();

        //alert($("#hdnConnectionID").val());

    }

    $(function () {
        // Declare a proxy to reference the hub. 
        //var CCMainSR = $.connection.CCMainSRHub;


        // Create a function that the hub can call to broadcast messages.
        //Serverdan gelen mesajları alıp yönetiyor
        $.connection.CCMainSRHub.client.broadcastMessage =
        function (pClientID, MessageType, Message) {



            if (pClientID == $lib.ClientID || pClientID == "All" || pClientID == "all") {
                //alert(pClientID);
                //alert(Message);
                $('#txtReceivedMessage').val($('#txtReceivedMessage').val() + Message + "\n");

            }

        };


        //Bu satır önemli...
        $.connection.hub.start().done(function () { });
    });

    //Server'a clientlara gönderilmek üzere mesaj gönderiyor
    function SendSignalR(ClientID, MessageType, Message) {
        if (ClientID == "") {
            alert("Have to Enter Receiver ID");
            return;

        }

        
        
        $.connection.CCMainSRHub.server.send(ClientID, MessageType, Message);
    }

</script>

<h2>@ViewBag.Message</h2>
<p>
    <input type="hidden" id="hdnConnectionID"/>
    <table>
        <tr>
            <td>
                <span >Connection ID</span>
            </td>
            <td>
                <span id="lblConnection_ID">0</span>
            </td>
        </tr>
        <tr>
            <td>
                <span >Set Connection ID</span>
            </td>
            <td>
                <input type="text" id="txtConnectionID"/>
            </td> 
            <td> <input type="button" onclick="SetID();" value="SetID"/></td>
        </tr> 
        <tr>
            <td>
                <span >Receivers ID (multiple user sperate with comma , )</span>
            </td>
            <td>
                <input type="text" id="txtReceiver"/>  <span >Set value "All" to send all user</span>
            </td> 
            <td> </td>
        </tr>
        <tr>
            <td>
                <span >Message</span>
            </td>
            <td>
                <input type="text" id="txtMessage"/>
            </td> 
            <td> <input type="button" onclick="SendSignalR($('#txtReceiver').val(),'Test',$('#txtMessage').val());" value="Send Message"/></td>
        </tr>
        
        <tr>
            <td>
                <span >Recived Messages</span>
            </td>
            <td colspan="3">
                <textarea id="txtReceivedMessage" cols="40" rows="5" style="width:500px; height:250px;" ></textarea>    
                
            </td> 
            
        </tr>
    </table>
    
    
</p>

Afiyetle artık basit bir chat signalR uygulamanız oldu.

Set Client ID diyerek istediğiniz kadar client ekranı browserda açabilirsiniz. Mesaj göndermek istediğini client'ın id sini yazarak yada All diyerek bütün client lara mesaj gönderebilirsiniz.

Örnek projemizin kaynak kodu SignalRSample.zip (9,18 mb) (vs 2010 mvc 3)

İsterseniz bu yapıya bir de web api ekleyerek bir sonraki projede bağımsız bir merkezden clientlarımıza mesaj gönderelim ne dersiniz?

Görüşmek üzere.

 

 

 



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.



iframe li sayfalara parent'ın javascript variable larına erişme

clock Eylül 21, 2015 12:21 by author OzgurOzvaris

Merhaba Arkadaşlar,

Kaynaklar :

Sharing global javascript variable of a page with an iframe within that page 

Yaptığım projede jquery ui ile tabs menüsü kullandım ve iframeler içinde sayfalarımı açıyorum. Eğer sayfanızın içinden iframe dışında kalan tab menüsü kapatmak isterseniz dış kütüphanedeki javascript variablelarını kullanmanız gerekicektir. Bu durumda aşağıdaki şu kodu kullanmalısınız.

<script>
 var my_var = 'hello world!';
</script>

iframe
<script>
  function some_fn(){
    alert(parent.my_var); //helo world!
  }
</script>

Eğer yukarı kütüphaneden bir jquery elemanın erişmek istersenizde

parent.$object

syntaxını kullanmanız gerekmektedir.

İ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



Hakkımızda  AboneOl 

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

Month List

RecentPosts

Sign In