MVC 4 Ajax 请求 - 引用 JavaScript 文件

MVC 4 Ajax Requests - referencing a javascript file

本文关键字：引用 JavaScript 文件 请求 Ajax MVC      更新时间：2023-09-26

我进行一些ajax调用以返回一些部分视图，当脚本在视图中编写时，这些视图工作正常。

脚本代码为 

<script type="text/javascript">
$.ajax({
    url: "@(Url.Action("ProjectPartial", "Project"))",
    contentType: 'application/html; charset=utf-8',
    type: 'POST',
    dataType: 'html',
    data: {
        documentType: $('#DocumentType').val(),
        sectionName: $('#SectionName').val()
    }
})
.success(function (result) {
// Display the section contents.
$('#Projects').html(result);
})
.error(function (xhr, status) {
alert(xhr.responseText);
});
</script>

我想做的是将它们存储在一个名为 renderpartial 的 javascript 文件中.js这样我就可以将 ajax 调用添加到一个文件中，而不是将它们写入每个视图中。

有谁知道这是否可能？

我试过把

<script src="~/Scripts/RenderPartial.js"></script>

在我的页面顶部，但我得到的只是错误功能。

只要你使用像@(Url.Action(这样的内联剃须刀语法，你就不能把它移动到js文件

您可以通过指定网址来执行此操作，例如

url: '/Project/ProjectPartial',

或在 View.cshtml 中

<script type="text/javascript">
var projectUrl="@(Url.Action("ProjectPartial", "Project"))"
</script>

在渲染Parial中.js

url: projectUrl,

有两种方法可以做到这一点：

  1. 通过使用 AJAX。开始形式。使用它，可以帮助你不写你的JavaScript/jQuery Ajax调用，但它在你只用一种形式做某事。当您的表单呈现它时，则为你创建JavaScript，使你的视图非常干净。

  2. 我通常使用 html5 的 data- 属性来读取此类数据这很容易从我的JS文件中的视图中获得。因为那里在许多情况下，您希望从服务器读取某些内容视图，并且您还希望在JavaScript中访问该数据代码，主要在另一个视图中。使用剃刀语法将数据放入 data-属性如下：

    //I assume you write this attribute in any control like this

    data-url="@(Url.Action("ProjectPartial", "Project")"

    //or if you want to write it in any html helper control as html attribute like this

    new { data_url="@(Url.Action("ProjectPartial", "Project")"}

现在，在您的外部 js 文件中，您可以在进行 ajax 调用时读取 url。您可以根据需要编写任意数量的数据属性，并制作剃刀语法来为您提供数据，例如：type-post/get，内容类型等，并像这样使用：

$.ajax({
    url: $('anyinput').attr('data-url');,
    contentType: 'application/html; charset=utf-8',
    type: 'POST',
    dataType: 'html',
    data: {
        documentType: $('#DocumentType').val(),
        sectionName: $('#SectionName').val()
    }
})
.success(function (result) {
// Display the section contents.
$('#Projects').html(result);
})
.error(function (xhr, status) {
alert(xhr.responseText);
});

如何将以下内容移动到 js 文件中。

function getPartial(UrlToGet) {
    $.ajax({
        url: UrlToGet,
        contentType: 'application/html; charset=utf-8',
        type: 'POST',
        dataType: 'html',
        data: {
            documentType: $('#DocumentType').val(),
            sectionName: $('#SectionName').val()
        }
    })
    .success(function (result) {
        // Display the section contents.
        $('#Projects').html(result);
    })
    .error(function (xhr, status) {
        alert(xhr.responseText);
    });
}

在您看来：

<script type="text/javascript">
$(function () {
    getPartial('@(Url.Action("ProjectPartial", "Project"))');
});
</script>

我在最近的项目上使用的一种模式是将函数和配置变量封装到一个对象中

var projectHelpers {
   config: {
       projectUrl: null
   },
   init: function() {
      //Do any page setup here...
   },
   getPartial: function() {
   if (projectHelpers.config.projectUrl) {
         $.ajax({   
            url: projectHelpers.config.projectUrl,
            contentType: 'application/html; charset=utf-8',
            type: 'POST',
            dataType: 'html',
            data: {
                documentType: $('#DocumentType').val(),
                sectionName: $('#SectionName').val()
            },
            error: function (xhr, status) {
            alert(xhr.responseText); //Consider if console.log is more appropriate here
            },
            success: function (result) {    
                $('#Projects').html(result); // Display the section contents.
            }});
        } else {
            console.log("Missing project URL);
        }
   }
};

然后在页面中——

projectHelpers.config.projectUrl = "@(Url.Action("ProjectPartial", "Project"))";
projectHelpers.init();

这有助于封装代码，在使用大量外部库以避免变量冲突以及避免重复使用变量名和覆盖值时的编码错误时特别有用。

请参阅全局命名空间会被污染是什么意思？和使用对象组织代码。

相关文章：