Hi Everyoneif i post in jquery ajax method i am getting 500 internal error But it is not a problem if I get it but this time the parameter value is nullWhat do I have to do in this situationHTML ltdiv class34row34gt ltdiv class34container34gt lt START FILTER AREA gt ltdiv class34colmd3 clearpadding34gt ltdiv class34filterhead textcenter34gt lth4gt25 Result Found

Hi AliYilmazRefer the below samplelthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegt ltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsjquery191jqueryminjs34gtltscriptgt ltscript type34textjavascript34gt function 39klas39clickfunction var klasID 3434 39klas39eachfunction if thisis39checked39 klasID thisval 3434 var data dataklasId klasIDslice0 klasIDlength 1 ajax url 39CSaspxGetList39 method 39POST39 dataType 34json34 contentType 39applicationjson39

Filter record based on multiple CheckBox using jQuery Ajax in ASP.Net MVC

AliYilma...

SOLVED CLOSED ACTIVE ANSWERED
User: AliYilmaz
Posted: on Oct 23, 2017 02:54 AM
Forum: ASP.Net MVC
Answer: 1
Views: 15649
Sample Code: Download

Hi Everyone,

if i "post" in jquery ajax method i am getting 500 internal error. But it is not a problem if I "get" it, but this time the parameter value is null.

What do I have to do in this situation?

HTML

<div class="row">
        <div class="container">
            <!-- START: FILTER AREA -->
            <div class="col-md-3 clear-padding">
                <div class="filter-head text-center">
                    <h4>25 Result Found Matching Your Search.</h4>
                </div>
                <div class="filter-area">
 
 
 
                    <div class="price-filter filter">
                        <h5><i class="fa fa-usd"></i> Fiyat</h5>
                        <p>
                            <label></label>
                            <input type="text" id="amount" readonly>
                        </p>
                        <div id="price-range"></div>
                    </div>
 
                    <div class="filter">
                        <h5><i class="fa fa-list"></i> Class</h5>
 
                        <ul>
 
                            @foreach (var items in Model)
                            {
                            <li>
 
                      <input class="klas" id="@items.T_Klas.UcretTipi" type="checkbox" value="@items.KlasID" name="KlasID">@items.T_Klas.UcretTipi
 
                            </li>
                            }
 
                        </ul>
 
                    </div>
 
                    <div class="filter">
                        <h5><i class="fa fa-list"></i> Yurtiçi/Yurtdışı</h5>
 
                        <ul>
                            @foreach (var items in Model)
                            {
                            <li><input class="klas" type="checkbox">@items.T_ILCE.ILceAd</li>
                            }
                        </ul>
 
                    </div>
 
                    <div class="filter">
                        <h5><i class="fa fa-list"></i> Konaklama</h5>
 
                        <ul>
                            @foreach (var items in Model)
                            {
                            <li><input class="klas" type="checkbox">@items.T_Konaklama.KonaklamaGece</li>
 
                            }
                        </ul>
 
                    </div>
 
 
                </div>
            </div>
            <!-- END: FILTER AREA -->
            <!-- START: INDIVIDUAL LISTING AREA -->
            <div id="results" class="col-md-9 flight-listing">
 
 
                <div class="clearfix"></div>
                <!-- START: FLIGHT LIST VIEW -->
                @foreach (var item in Model)
                {
 
                <div class="flight-list-v2">
                    <div class="flight-list-main">
                        <div class="col-md-2 col-sm-2 text-center airline">
                            <img src="@item.T_Sirket.SirketLogo" alt="cruise">
                            <h6>@item.T_Sirket.YetkiliAd</h6>
                        </div>
                        <div class="col-md-3 col-sm-3 departure">
                            <h3><i class="fa fa-plane"></i>@item.T_IL.ILAd</h3>
                            <h5 class="bold">@item.GidisTarihi</h5>
                            <h5>@item.T_ILCE.ILceAd</h5>
                        </div>
                        <div class="col-md-4 col-sm-4 stop-duration">
                            <div class="flight-direction">
                            </div>
                            <div class="stop">
                            </div>
 
                            <div class="duration text-center">
                                <span>Tarih : <i class="fa fa-clock-o"></i> @item.TalepTarihi</span>
                            </div>
 
                        </div>
                        <div class="col-md-3 col-sm-3 destination">
                            <h3><i class="fa fa-plane fa-rotate-90"></i> @item.T_IL.ILAd</h3>
                            <h5 class="bold">@item.DonusTarihi</h5>
                            <h5>@item.T_ILCE.ILceAd</h5>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="flight-list-footer">
                        <div class="col-md-6 col-sm-6 col-xs-6 sm-invisible">
                            <span><i class="fa fa-plane"></i> @item.T_Klas.UcretTipi</span>
 
                            <span class="refund"><i class="fa fa-suitcase"></i> Konaklama :<span>@item.T_Konaklama.KonaklamaGece</span></span>
 
                            <span data-toggle="modal" data-target=".@item.ID"><i style="color:red" class="fa fa-info-circle"></i> Detay</span>
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-12 clear-padding">
                            <div class="pull-right">
                                <span>@item.Butce TL / @item.KisiSayisi Kişi</span>
                                <a href="#">Teklif Ver</a>
                            </div>
                        </div>
                    </div>
                </div>
            }
                <div class="clearfix"></div>
                <!-- END: FLIGHT LIST VIEW -->
                <!-- START: PAGINATION -->
                <div class="bottom-pagination">
                    <nav class="pull-right">
                        <ul class="pagination pagination-lg">
                            <li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                            <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                            <li><a href="#">2 <span class="sr-only">(current)</span></a></li>
                            <li><a href="#">3 <span class="sr-only">(current)</span></a></li>
                            <li><a href="#">4 <span class="sr-only">(current)</span></a></li>
                            <li><a href="#">5 <span class="sr-only">(current)</span></a></li>
                            <li><a href="#">6 <span class="sr-only">(current)</span></a></li>
                            <li><a href="#" aria-label="Previous"><span aria-hidden="true">&#187;</span></a></li>
                        </ul>
                    </nav>
                </div>
                <!-- END: PAGINATION -->
            </div>
            <!-- END: INDIVIDUAL LISTING AREA -->
 
 
        </div>
    </div>

Controller

public JsonResult GetList(int KlasID)
       {
           List<T_Talepler> talep = new List<T_Talepler>();
 
           talep = (from v in shy.T_Talepler where v.KlasID == KlasID select v).ToList();         
 
           return Json(talep, JsonRequestBehavior.AllowGet);
     
       }

Ajax

<script type="text/javascript">  
 
        $('.klas').change(function () {
                var data = {};
                data.KlasID = $(this).val();             
 
                $.ajax({                   
                    url: '@Url.Action("GetList", "Talepler")',
                    method: 'POST',
                    dataType: "json",
                    contentType: 'application/json',
                    data: JSON.stringify(data),             
                    success: function (response) {
                        console.log(response);
                        $('#results').html(response.KlasID);
                    },
                    error: function (err, response) {
                        console.log(err);
                        alert(err, response);
                    }
                })
            });   
    </script>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 12

Reply
ANSWER
User: dharmendr
Replied: on Oct 26, 2017 12:12 AM
Modified: on Oct 27, 2017 12:55 AM
Report

Hi AliYilmaz,

Refer the below sample.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.klas').click(function () {
                var klasID = "";
                $('.klas').each(function () {
                    if ($(this).is(':checked')) {
                        klasID += $(this).val() + ",";
                    }
                });
                var data = {};
                data.klasId = klasID.slice(0, klasID.length - 1);
                $.ajax({
                    url: 'CS.aspx/GetList',
                    method: 'POST',
                    dataType: "json",
                    contentType: 'application/json',
                    data: JSON.stringify(data),
                    success: function (response) {
                        var customers = JSON.parse(response.d);
                        var table = $("#tblCustomers");
                        table.find("tr:not(:first)").remove();
                        $.each(customers, function (i, customer) {
                            var row = table[0].insertRow(-1);
                            $(row).append("<td />");
                            $(row).find("td").eq(0).html(customer.CustomerId);
                            $(row).append("<td />");
                            $(row).find("td").eq(1).html(customer.Name);
                            $(row).append("<td />");
                            $(row).find("td").eq(2).html(customer.Country);
                        });
                    },
                    error: function (err, response) {
                        console.log(err, response);
                        alert(err, response.responseText);
                    }
                })
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    <input class="klas" id="Checkbox1" type="checkbox" value="1" name="KlasID" />Economy
                </td>
                <td>
                    <input class="klas" id="Checkbox2" type="checkbox" value="2" name="KlasID" />Business
                </td>
            </tr>
        </table>
    </div>
    <table id="tblCustomers">
        <tr>
            <th>
                Customer Id
            </th>
            <th>
                Name
            </th>
            <th>
                Country
            </th>
        </tr>
    </table>
    </form>
</body>
</html>

[WebMethod]
public static string GetList(string klasId)
{
    TestEntities entities = new TestEntities();
    var ids = new List<int>();
    IQueryable<Customer> rows = null;
    if (!string.IsNullOrEmpty(klasId))
    {
        for (int i = 0; i < klasId.Split(',').Length; i++)
        {
            ids.Add(Convert.ToInt32(klasId.Split(',')[i]));
        }
        rows = entities.Customers.Where(t => ids.Contains(t.CustomerId));
    }
    else
    {
        rows = entities.Customers.Take(5);
    }
    var talep = (from v in rows
                    select new
                    {
                        v.CustomerId,
                        v.Name,
                        v.Country
                    }).ToList();
    return (new JavaScriptSerializer().Serialize(talep));
}

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Filter record based on multiple CheckBox using jQuery Ajax in ASP.Net MVC

Company

Explore

Follow us

Contact Us