1

我进行了一些 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.js 的 javascript 文件中，以便我可以将 ajax 调用添加到一个文件，而不是将它们写入每个视图。

有谁知道这是否可能？

我试过把

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

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

4

4 回答 4

7

只要您使用内联剃须刀语法@(Url.Action(，就无法将其移动到js文件

您可以通过指定 url 来做到这一点

url: '/Project/ProjectPartial',

或在 View.cshtml

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

在 RenderParial.js

url: projectUrl,
于 2013-10-04T15:40:46.247 回答
2

有两种方法可以做到：

  1. 通过使用AJAX.BeginForm。使用它可以帮助您不编写 javascript/jquery ajax 调用，但当您只使用一种表单执行某项操作时，它很有用。当您的表单呈现时，它会为您创建 javascript，这使您的视图非常干净。

  2. 我通常使用 html5 的data-属性来读取此类数据，这些数据很容易从我的 js 文件中的视图中获得。因为在很多情况下，您希望在您的视图中从服务器读取某些内容，并且您还希望在您的 javascript 代码中访问该数据，主要是在另一个视图中。使用 razor syntac 将数据放入 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、contenttype 等。并像这样使用：

$.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);
});
于 2013-10-04T16:03:10.740 回答
0

如何将以下内容移动到 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>
于 2013-10-04T15:48:47.717 回答
0

我在最近的项目中使用的一种避免污染全局命名空间的模式是将函数和配置变量封装到一个对象中——

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();

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

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

于 2013-10-04T21:40:24.703 回答