CODEWITHSUNDEEP
javascriptajaxasp.net-mvcasp.net-mvc-5
Cathal O 'Donnell
Cathal O 'Donnell

Reputation: 525

MVC - Failed to load resource: the server responded with a status of 500 (Internal Server Error)

I am having a problem with some Ajax code I wrote for my MVC 5 project, I am trying to implement a search bar for my table using ajax but I am running into this error "Failed to load resource: the server responded with a status of 500 (Internal Server Error)".

This is my Partial View code which includes the JavaScript Ajax code:

@model IEnumerable<ToDo.Models.Venue>   

@*Search Box*@
@using (Html.BeginForm())
{
    <p>
        <input type="text" class="form-control" id="txtSearch">
        <span class="btn btn-sm btn-warning" id="btnCustomerInc" onclick="VenueSearch();">Search</span>
    </p>
}

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.VenueName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.VenueType)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.VenueTown)
        </th>
        <th>
            @*blank*@
        </th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.VenueName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.VenueType)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.VenueTown)
            </td>
            <td>
                @Html.ActionLink("Details", "Details", new { id = item.VenueID }, new { @class = "btn btn-primary" })
            </td>
        </tr>
    }

</table>

<script>
    function VenueSearch() {
        console.log("Venue Search function hit");

        var search = document.getElementById("txtSearch").value;
        console.log(search);

        $.ajax({
            type: "GET",
            url: '@Url.Action("VenuesTablePartialView", "Venues")',
            data: { searchString: search },
            success: function (data) {

                $('#VenueTable').html(data);
                $('#VenueTable').fadeIn("fast")

            }
        });
    }
</script>

This is my controller action for the partial view:

 [ChildActionOnly]
        public ActionResult VenuesTablePartialView(string searchString)
        {    
            var venues = from v in db.Venues
                         select v;

            //Search
            if (!String.IsNullOrEmpty(searchString))
            {
                venues = venues.Where(v => v.VenueName.ToUpper().Contains(searchString.ToUpper()));
            }


            return PartialView("_VenuesTable", venues.ToList());
        }
    }

This image shows the error and the console messages

Upvotes: 1

Views: 24802

Answers (2)

ERaufi
ERaufi

Reputation: 1663

Add this code to system.webServer section in web.config file

<validation validateIntegratedModeConfiguration="false" />

Upvotes: 1

Cathal O &#39;Donnell
Cathal O &#39;Donnell

Reputation: 525

I was able to resolve this issue by removing the [ChildActionOnly] line, this was causing problems as it meant that this controller action was only accessible by child requests.

public ActionResult VenuesTablePartialView(string searchString)
{    
    var venues = from v in db.Venues select v;

    //Search
    if (!String.IsNullOrEmpty(searchString))
    {
       venues = venues.Where(v => v.VenueName.ToUpper().Contains(searchString.ToUpper()));
    }

    return PartialView("_VenuesTable", venues.ToList());
}

Upvotes: 0

Related Questions