[Fix] jQuery Ajax URL Problem In Subdomain | Subsite asp.net MVC 5

Relative URL in jQuery POST Call

Asp.Net MVC 5

One of the major problem encountered in my website were, all ajax call placed in separate scripts is broken when I hosted the website as a Sub site. The problem is because of, we have placed the URL like /controller/action (static). Not used the relative path. And we have found three solutions for that

Solutions to get relative URL

1. Place ajax calls in View Page

We need to define all Ajax calls in the view page itself and get the relative URL by using @Url.Action("",""), method

@Styles.Render("~/Content/sitecss")
@Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
  $.ajax({
                url: '@Url.Action("Action", "Controller")',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                type: 'POST',
                async: false,
                data: '{}',
                success: function (msg) {
                 
                    }
                },
                error: function (xhr, textstatus, errorThrown) {
                }
            });
</script>

2. Define javascripts methods with URL parameter

This will help if you are using separate scripts files for your websites, defines your javascript methods with URL receiving parameter, call the method from your view page by defining the click or the specified event in the view page control.

Javascript File

function saveDetails(saveUrl){
  $.ajax({
                url: saveUrl,
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                type: 'POST',
                async: false,
                data: '{}',
                success: function (msg) {
                 
                    }
                },
                error: function (xhr, textstatus, errorThrown) {
                }
            });
}

View Page Control

<input type="button" id="btnSave" value="Save" onclick="saveDetails('@Url.Action("Action","Controller")')"/>

3. Read URL from your view page control

We are using this method. And this will be very helpful if you are using separate script files for all of your javascript code. In this way, we are declaring extra data attribute like (data-saveurl) for view page controls, and we just read the attribute from javascript side by using the control id.

View Page Control

<input type="button" id="btnSave" value="Save" data-saveurl="@Url.Action("Action","Controller")"/>

In Script File

function saveDetails(){
  $.ajax({
                url: $("#btnSave").attr('data-saveurl'),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                type: 'POST',
                async: false,
                data: '{}',
                success: function (msg) {
                 
                    }
                },
                error: function (xhr, textstatus, errorThrown) {
                }
            });
}

I think, now you got the answer for how to place relative URL in your javascript call. If you do have any suggestions, please do comment here.