jQuery .load（）在本地工作，但不在服务器上工作

Question

I am not quite sure what is causing the issue here. I am trying to load a view into a Jquery dialog using the .load() function. On my local machine everything works fine, but on the server the URL that ends up being created is not correct because it is adding the parameter to the URL twice.

The links are dynamic from a webgrid which is where the @item.GrouperIDForLookip comes from.

<div id="groupersDialog"></div>
<a id="GrouperField_@item.GrouperIDForLookup" class="grouper">Groupers</a>
...
<script>
    $(".grouper").on("click", function () {
        var id = $(this).attr("id").split("_")[1];
        $('#groupersDialog').dialog({
            autoOpen: true,
            width: 1000,
            height: 600,
            resizable: true,
            draggable: true,
            title: "Groupers",
            model: true,
            show: 'slide',
            closeText: 'x',
            dialogClass: 'alert',
            closeOnEscape: true,
            open: function () {
                //Load the Partial View Here using Controller and Action
                $('#groupersDialog').load('/Home/_Groupers/?GroupIDForLookup=' + id);
            },

            close: function () {
                $(this).dialog('close');
            }
        });
});
</script>

On my local machine everything works fine and the URL for the load works. But on the server when running it the URL that ends up being created is %2fHome%2f_Groupers%2f%3fGroupIDForLookup%3d2&GroupIDForLookup=2 which doubles the GroupIDForLookup gives me a GET 404 (page not found).

Does anyone happen to know what would cause this to happen? If you need more code just let me know.

Answer 1

Please update the URL in the load function in the below code.

<div id="groupersDialog"></div>
<a id="GrouperField_@item.GrouperIDForLookup" class="grouper">Groupers</a>
...
<script>
    $(".grouper").on("click", function () {
        var id = $(this).attr("id").split("_")[1];
        $('#groupersDialog').dialog({
            autoOpen: true,
            width: 1000,
            height: 600,
            resizable: true,
            draggable: true,
            title: "Groupers",
            model: true,
            show: 'slide',
            closeText: 'x',
            dialogClass: 'alert',
            closeOnEscape: true,
            open: function () {
                //Load the Partial View Here using Controller and Action
                $('#groupersDialog').load(
                '@URL.Action("_Groupers", "Home")?GroupIDForLookup' + id);
            },

            close: function () {
                $(this).dialog('close');
            }
        });
});
</script>