22 Ağustos 2013 Perşembe

Asp Net Mvc Jqery Kullanımı

Mvc sayfa yenilemedn kaydetmek ve listelemek ( nesne kullanarak)

Controlu müzde olması gerekeneler:

  [HttpPost]
        public string FormdanAl(bilgiler b)
        {
            if (!String.IsNullOrEmpty(b.adi) && !String.IsNullOrEmpty(b.soyadi))
            {
                //TODO: Save the data in database
                bilgiler bdb = new bilgiler() { adi=b.adi, soyadi=b.soyadi,  kayittarihi = DateTime.Now, onay = true };
                db.bilgilers.Add(bdb);
                db.SaveChanges();
                return "Teşekkürler " +b.adi + ". Kayıt Alındı";
            }
            else
                return "Boş Alanları Doldurunuz.";
        }
        public JsonResult KisiListesi()
        {
            var result = from r in db.bilgilers.ToList()
                         select new { r.adi, r.soyadi };
            return Json(result, JsonRequestBehavior.AllowGet);
        }

---------
Conroller bittikten sonra

-------------------------------
sayfamız sayfanın üstünede scriptimizin yolunu yazmalıyız scripti yazınca

<script src="~/Scripts/script.js"></script>


<div>  

    <form id="frm" action="/Home/FormdanAl" method="post">
<p>
    Enter your name
    <br />
    @Html.TextBox("Adi")
</p>
<p>
    Enter your address
    <br />
    @Html.TextBox("Soyadi")
</p>

<input type="button" value="Kaydet" id="Kaydet" />
        <span id="msg" style="color:red;"/>
</form>
</div>

<p>
    <input type="submit" id="KisiListesi" value="Getir"/>
    <input  type="submit" id="Gizle" value="Gizle" />
</p>
<p id="rData">
</p>

  ----------------------
sayfamızda bir form var bu form bilgileri yollayacak

---------------------------
scriptimiz de şu şekilde


$(document).ready(function () {

    $('#Kaydet').click(function () {

        var form = $("#frm");
        var url = form.attr("action");
        var formData = form.serialize();
        $.post(url, formData, function (data) {
            $("#msg").html(data);
            $('#KisiListesi').click();
        });
    });

    $('#KisiListesi').click(function () {
        $.getJSON('/Home/KisiListesi/', function (data) {
            $('#rData').show(500);
            $('#Gizle').show(800);
            $('#KisiListesi').hide(600);
            var items = '<table><tr><th>Adı</th><th>Soyadı</th></tr>';
            $.each(data, function (i, b) {
                items += "<tr><td>" + b.adi + "</td><td>" + b.soyadi + "</td></tr>";
            });
            items += "</table>";

            $('#rData').html(items);
        });
    });

    $('#Gizle').click(function () {
        $('#rData').hide(500);
        $('#Gizle').hide(800);
        $('#KisiListesi').show(600);
    });
});


bu kadar kolay gelsin. :)

Hiç yorum yok:

Yorum Gönder