Jquery ajax call fails when connecting to remote database in asp.net mvc 5

Question

Good day everyone,

I have a jquery ajax method in a cshtml file which retrieves data from the server and displays it in a modal dialog box. The method is as follows:

$("#flowButton").click(function () {
    debugger;
    var $buttonClicked = $(this);
    var id = $buttonClicked.attr('data-id');
    var options = { "backdrop": "static", keyboard: true };
    $.ajax({
        type: "GET",
        url: '@Url.Action("GetSentEntryFlow", "Inbox")',
        contentType: "application/json; charset=utf-8",
        data: $('#inboxSentForm').serialize(),
        datatype: "json",
        success: function (data) {
            debugger;
            $('#flowModalContent').html(data);
            $('#flowModal').modal(options);
            $('#flowModal').modal('show');
        },
        error: function () {
            alert("Dynamic content load failed.");
        }
    });
});

This works fine when I'm using a LocalDB datasource, but when I change the connection string to use a remote database the error message is displayed. I know that the connection to the remote db is ok since every other part of the project works fine using it, only this method fails.

My view code is this:

@foreach (var itemGroup in Model.Entries)
{
    int childCount = itemGroup.Count();
    <tr>
        <td class="text-center">
            @Html.Hidden(string.Format("sentEntries[{0}].Id", rowNumber - 1), itemGroup.First().Id, new { @id = string.Format("sentEntries[{0}].Id", rowNumber - 1) })
            @Html.CheckBox(string.Format("sentEntries[{0}].Selected", rowNumber - 1), itemGroup.First().Selected, new { @id = string.Format("sentEntries[{0}].Selected", rowNumber - 1) })
        </td>
        <td>
            @(rowNumber++)
        </td>
        <td>
            @Html.DisplayFor(modelItem => itemGroup.First().EntryType.TypeFA)
        </td>
        <td>
            @itemGroup.First().GetEntrySubject()
        </td>
    </tr>
    foreach (var item in itemGroup.Skip(1))
    {
        <tr>
            <td class="text-center">
                @Html.Hidden(string.Format("sentEntries[{0}].Id", rowNumber - 1), item.Id, new { @id = string.Format("sentEntries[{0}].Id", rowNumber - 1) })
                @Html.CheckBox(string.Format("sentEntries[{0}].Selected", rowNumber - 1), item.Selected, new { @id = string.Format("sentEntries[{0}].Selected", rowNumber - 1) })
            </td>
            <td>
                @(rowNumber++)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.EntryType.TypeFA)
            </td>
            <td>
                @item.GetEntrySubject()
            </td>
        </tr>
    }
}

and the controller method is this:

public ActionResult GetSentEntryFlow(List<DataTableRow> sentEntries)
{
    DataTableRow selectedRow = sentEntries.FirstOrDefault(i => i.Selected == true);
    InboxSentEntry selectedSentEntry = InboxSentEntryRepository.GetById(selectedRow.Id);

    ICollection<InboxReceivedEntry> firstLevelFlow = InboxReceivedEntryRepository.GetFirstLevelFlowByEntryId(selectedSentEntry.EntryId);

    return PartialView("~/Views/Shared/Modals/_EntryFlowModalPartial.cshtml", firstLevelFlow);
}

the error that I'm getting which is displayed in the developer tools section of Edge is this:

HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier). (XHR)GET - http://localhost:51527/Inbox/GetSentEntryFlow?__RequestVerificationToken=-jXt8frpCtnoDPMwd9eo1DUYn7T3ud6BVjsCGukmu7KwMnkgV-i26zKt68b5MIUOqrwkb__otyTvEKprDHAktqJl_T0sQuyS5WPSdX0ET8xx7RggVuDaz45Z_xE1a5OR7cQ5DAfTR4ygt3TmSZJ8fw2&dt_inbox_length=50&EntryTypeFilterInput=&EntryTypeFilterSelect=&EntryActionTypeFilterInput=&EntryActionTypeFilterSelect=&EntryPriorityFilterInput=&EntryPriorityFilterSelect=&sentEntries%5B0%5D.Id=0ff4995d-61da-4896-a30b-ce597090a26b&sentEntries%5B0%5D.Selected=true&sentEntries%5B0%5D.Selected=false&sentEntries%5B1%5D.Id=4274317e-59f4-4f06-8527-d7976f061b3d&sentEntries%5B1%5D.Selected=false

Current window: localhost/Inbox/Sent

Any ideas what is causing the problem? Thanks in advance

When you step through the controller, what error message do you get? — nurdyguy, Oct 13 '17 at 15:24
You also may be able to see the stack trace on the networks tab if you click the request and look at the response. — nurdyguy, Oct 13 '17 at 15:27
The code execution does not get to the controller at all. It stops at the jquery. I'll add the jquery error to the post. — Morteza A. Sharbaf, Oct 13 '17 at 15:27
Can you create a .net fiddle please ? https://dotnetfiddle.net/ — GGO, Oct 13 '17 at 15:34
Well, there is no way that just changing dbs could cause a 404. Double check that everything is running (compiled and spun up) then check to make sure you didn't make any other changes somewhere. — nurdyguy, Oct 13 '17 at 15:35
I'm having this problem for 2 weeks now. I know it sounds strange. But it only happens when I run the project using remote db. — Morteza A. Sharbaf, Oct 13 '17 at 15:38
Can you post the request info as it shows in the network tab? — nurdyguy, Oct 13 '17 at 15:41
I noticed the weirdest thing just now. When I remove the second foreach in the view code, everything works fine. I can't figure out how it is related to the problem. I need that second loop. Again it all happens when I'm using a remote db. — Morteza A. Sharbaf, Oct 13 '17 at 15:42
the network tab is empty after the error. to be honest I have never worked with this feature — Morteza A. Sharbaf, Oct 13 '17 at 15:45
Is the data in your local db the same as on the other db? Feels like a data difference could be causing this. — nurdyguy, Oct 13 '17 at 15:51
Pop this open in Chrome, easier to debug in there. Then, in the networks tab click the request and a panel should open to the right and have a bunch of details. — nurdyguy, Oct 13 '17 at 15:53
I did as you said. In the columns that show up in there the error is the same, status: 404, Type: xhr, Initiator: jquery.min.js — Morteza A. Sharbaf, Oct 13 '17 at 16:01
It also says:Most likely causes: Request filtering is configured on the Web server to deny the request because the query string is too long. — Morteza A. Sharbaf, Oct 13 '17 at 16:22
the only difference between the local and remote db is that the remote one contains much more records — Morteza A. Sharbaf, Oct 13 '17 at 16:25
the url for the action method which returns the partial is '/Inbox/GetSentEntryFlow' — Morteza A. Sharbaf, Oct 13 '17 at 16:27
Here is the deal. Because the data is different, the loops on the page are different. Something in the logic of your second loop works fine locally (with more records) but not on the other db (with fewer records). My hunch is it has something to do with `.skip(1)` but I can't be sure. I can't say exactly what is wrong because I need more info about the exact difference between the requests (when it is local vs other db). — nurdyguy, Oct 13 '17 at 16:30

score 0 · Accepted Answer · answered Oct 13 '17 at 16:45

0

Thanks to nurdyguy for helping me find the error details, I found the solution. The reason for the error was that the remote database contains much more records and the project was not configured to allow requests of any length. So I searched the error and found the following link which tells how to change web.confing to allow that: How to configure the web.config to allow requests of any length

answered Oct 13 '17 at 16:45

Morteza A. Sharbaf

61
1
1
7

If your request is really that long then you might consider sending a `post` request instead of a `get`. – nurdyguy Oct 13 '17 at 17:20

Jquery ajax call fails when connecting to remote database in asp.net mvc 5

1 Answers1