MV4 Jquery ve ajax işlemleri, DropdownList Controlleri

Merhaba bu makalemizde birbiriyle ilişkili iki tablodan $.ajax methodlarıyla dropdownlistlere dolduracağız. sayfa ilk açıldığında kurs dropdown ı dolmakta, bu seçime göre de kinci dropdawn tetiklenmektedir. Tarayıcının F12 tuşlarına basrak gidenve gelen veriyi ayrıntılı görebilirsiniz. Veya fiddler programı ilede bu aradaki iletişimi göreblirsiniz.

Öncelikle Action metholarımızı yazalım. Ben hazır School veri tabanını kullandım. Studio 2012 de EntitiyFramework to Reverse işlemini tabi tutarak veri tabanından gittim, boylece POCO claslarımıda elde etmiş oldum.

using JqueryAjaxIslemleri.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace JqueryAjaxIslemleri.Controllers
{
    public class KursController : Controller
    {
        //
        // GET: /Kurs/

        public ActionResult Index()
        {
            SchoolContext db = new SchoolContext();
            var kurslar = db.Courses.ToList();
            return View(kurslar);
        }

        public JsonResult List(int? id)
        {
            SchoolContext db= new SchoolContext();
            IQueryable kurslar;
            if (id != null)
            {
                 kurslar = from k in db.Courses
                              where k.DepartmentID == id
                              select new
                              {
                                  k.CourseID,
                                  k.Title,
                                  k.Credits,
                                  k.DepartmentID
                              };
            }
            else
            {
                 kurslar = from k in db.Courses
                             select new
                             {
                                 k.CourseID,
                                 k.Title,
                                 k.Credits,
                                 k.DepartmentID
                             };

            }
            return Json(kurslar, JsonRequestBehavior.AllowGet);
        }

        public JsonResult DepartmentList(int? id)
        {
            SchoolContext db = new SchoolContext();
            IQueryable department;
            if (id != null)
            {
                department = from k in db.Departments
                                 where k.DepartmentID == id
                                 select new
                                 {
                                     k.DepartmentID,
                                     k.Name,
                                 };
            }
            else
            {
                department = from k in db.Departments
                                 select new
                                 {
                                     k.DepartmentID,
                                     k.Name,
                                 };

            }

            return Json(department, JsonRequestBehavior.AllowGet);
        }





    }
}

Daha sonra html tarafında yaptığımız java kodlarını yazalım..

@model IEnumerable<JqueryAjaxIslemleri.Models.Course>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

  <select id="DepartmentList"> </select>
  <select id="KurslarListe"> </select>
 

<script>
    $(function () {
    $.ajax({
        type: "post",
        url: "/Kurs/DepartmentList",
        data: "",
        datatype:"json",
        error: function (hata) {alert("Error Message");},
        success: function (Liste) {
            $("#DepartmentList").html(ListItemAdd(Liste));
        },
        complete: function (tamam) {  }

    });
    
    })
    $("#DepartmentList").change(function () {
        var Birim = { id: $(this).val(), name: $(this).val() };
        $.ajax({
            type: "Post",
            url: "/Kurs/List",
            //data: JSON.stringify(Birim),
            data: "id=" + $("#DepartmentList").val() ,
            dataType: "json",
            error:function () {alert("error message")    },
            //contentType: "application/json; charset=utf-8",
            success: function (response) {
                $("#KurslarListe").html(CourseAdd(response));
            },
            complete: function () {  }
        });
    });
    //$("#btnVeriGetir").click(function () {
    
    function ListItemAdd(IncommingList) {
        var items = "<option value=\"0\"> Please  select department..</option>";
        $.each(IncommingList, function (i, item) {
            items += "<option value=\"" + item.DepartmentID + "\">" + item.Name + "</option>";
        });
        return items;
    }


    function CourseAdd(IncommingList) {
        var items = "<option value=\"0\"> Please  select course...</option>";
        $.each(IncommingList,function(i,item)
        {
            items += "<option value=\"" + item.CourseID + "\">" + item.Title + "</option>";
    });
    return items;
    }
</script>

@section head{
    <script type="text/javascript" src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    }

Ben Layout şablon dosyasında head isimli section açtım ve jquery kütüphanelerini ekledim. Bizler bu işlemleri Html helper yontemlerini kullanarak veya takrar bunu düzenleyerek veya webapi kullanarak aynı işlemleri yapabiliriz. Son kısımdaki option stringlerini üreten kısımda Dont Repeat Code(kod tekrarını) engelemek için generic bir class veya web api yazılabilir.

Bir sonraki makalede görüşmek üzere hoşçakalın.