Question

我正在使用mvc 4，我需要使用ajax调用控制器操作。所以我在Scripts文件夹中创建了一个新的scripts.js文件。在我的项目中有很多控制器，我为每个控制器编写了ajax函数。相同的js文件。除了默认控制器之外，其他控制器不是由ajax代码启动的。 Scripts.js文件包含：

$(document).ready(function () {

    //END COUNTRY ................................................................




     $("#savecountry").click(function () {
            //var car = { id: 4, name: "India" }
            $.ajax({
                type: "POST",
                url: '/Country/SaveCountry',
                data: {name: $('#country').val() },
                dataType: 'json', encode: true,
                async: false,
                cache: false,
                //contentType: 'application/json; charset=utf-8',


                success: function (data, status, jqXHR) {
                   // alert("success");
                    console.log(jqXHR);
                    console.log(status);
                     console.log(data);

                    //$.each(data, function (index, customer) {
                    //    alert(customer.Name + " " + customer.UserName);
                    //});
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    //console.log(jqXHR);
                    //console.log(textStatus);
                    //console.log(errorThrown);
                    if (typeof (console) != 'undefined') {
                       alert("oooppss");
                    }
                    else { alert("something went wrong"); }
                }          
            });
        });


        $("#updatecountry").click(function () {
            //var car = { id: 4, name: "India" }

            $.ajax({
                type: "POST",

                url: '/Country/Update',
                data: { id:$('#id').val(), name:$('#country').val() },

                dataType: 'json', encode : true,
                async: false,
                cache: false,
                success: function (data, status, jqXHR) {
                    alert("success");
                    //$.each(data, function (index, customer) {
                    //    alert(customer.Name + " " + customer.UserName);
                    //});
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(jqXHR);

                    if (typeof (console) != 'undefined') {
                        alert("oooppss");
                    }
                    else { alert("something went wrong"); }
                }
            });
        });

        $('#cancel').click(function () {

            $('input:text').val('');

        });


        //$('.deleteRow').click(function () {

        //    alert('ewewrwr');
        //    $.ajax({
        //        type: "POST",
        //        data: { id: $('#id').val() },
        //        url: "/Country/DeleteCountry",


        //        dataType: 'json', encode: true,
        //        async: false,
        //        cache: false,
        //        success: function (data, status, jqXHR) {
        //            alert("success");
        //            //$.each(data, function (index, customer) {
        //            //    alert(customer.Name + " " + customer.UserName);
        //            //});
        //        },
        //        error: function (jqXHR, textStatus, errorThrown) {
        //            console.log(jqXHR);

        //            if (typeof (console) != 'undefined') {
        //                alert("oooppss");
        //            }
        //            else { alert("something went wrong"); }
        //        }
        //    });



        //});


        $("#updateoffer").click(function () {

            //var car = { id: 4, name: "India" }

            $.ajax({
                type: "POST",
                url: '/Offer/Update',
                // contentType: "application/json; charset=utf-8",
                data: { id: $('#id').val(), name: $('#offer').val(), description: $('#description') },

                dataType: 'json', encode: true,
                async: false,
                cache: false,
                success: function (data, status, jqXHR) {
                    alert("success");
                    //$.each(data, function (index, customer) {
                    //    alert(customer.Name + " " + customer.UserName);
                    //});
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(jqXHR);

                    if (typeof (console) != 'undefined') {
                        alert("oooppss");
                    }
                    else { alert("something went wrong"); }
                }
            });
        });
    });

这里Country是默认控制器，ajax调用运行良好。但是调用Offer控制器更新ajax无效。将导致页面无响应错误。

Answer 1

您应该将项目名称带到baseUrl以调用ajax函数。

$(document).ready(function(){
var baseurl = "";//your project name
 $("#savecountry").click(function () {
        $.ajax({
            type: "POST",
            url: baseurl+'/Country/SaveCountry',     //  baserurl+"/controller name/action"
            .....
   }

Answer 2

接受的答案在商业部署中存在严重缺陷，因此提供替代方案。

是的，您需要网站的基地址，但不希望将其硬连接到代码中。

选项1

您可以将全局javascript变量作为字符串常量注入主页。

e.g。把它放在主页的顶部

<script>
     window.baseurl = "@Url.Content("~/")";
</script>

然后只需使用window.baseurl作为您的网址

e.g

$("#savecountry").click(function () {
    $.ajax({
        type: "POST",
        url: window.baseurl+'/Country/SaveCountry',

选项2

您可以在主页面的DOM中注入data-属性。例如在身体标签上

然后使用jQuery提取它：

e.g。

var baseurl = $('body').data('baseurl');
$("#savecountry").click(function () {
    $.ajax({
        type: "POST",
        url: baseurl+'/Country/SaveCountry',

选项3（我不建议这个）

将字符串文字注入Javascript

$("#savecountry").click(function () {
    $.ajax({
        type: "POST",
        url: "@Url.Action("SaveCountry", "Country")",

这对于维护和调试很不利，因为代码必须处于Razor视图才能工作。

我们过去经常使用选项2，但现在倾向于使用选项1。

Ajax调用不适用于每个控制器

2 个答案: