MVC 4 Ajax请求 – 引用javascript文件

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

脚本代码是

 $.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); });  

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

有谁知道这是否可能？

我试过试试

在我的页面顶部，但我得到的是错误function。

Answer 1

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

您可以在指定url之类的地方执行此操作

 url: '/Project/ProjectPartial', 

或者在View.cshtml中

在RenderParial.js中

 url: projectUrl, 

Answer 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); }); 

Answer 3

如何将以下内容移动到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); }); } 

在你看来：

Answer 4

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

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

这有助于封装代码，在处理大量外部库以避免可变冲突时非常有用，并且在重复使用变量名称和覆盖值时避免编码错误。

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