在外部 javascript 中虚拟化 jQuery 代码中的链接

发布于 2024-09-30 19:21:41 字数 637 浏览 3 评论 0原文

我使用以下函数来虚拟化路径和对我的应用程序资源的引用

<%= Html.Image( Url.Content( "~/_assets/images/login.png" ), "Login" )%>

，这在解析部署应用程序的虚拟目录方面非常有效，例如

http://someserver/xyz/_assets/images/login.png

，当指向 CSS 内的资源

body { background: #F4F4F4 url('/_assets/images/backgr_grad.png') repeat-x 0 0; }

和来自外部js文件中的javascript函数？

function loadCustomers() {
    $.ajax({
        type: "get",
        dataType: "html",
        url: '/Customers/AllCustomers',
        data: {},
        success: function(response) {
        }
    });
}

原文

I am using the following function to virtualize path and reference to my application resources

<%= Html.Image( Url.Content( "~/_assets/images/login.png" ), "Login" )%>

and this works very fine in resolving the virtual directory where the application has been deployed, for example

http://someserver/xyz/_assets/images/login.png

how can I achieve the same result when pointing to resources inside a CSS

body { background: #F4F4F4 url('/_assets/images/backgr_grad.png') repeat-x 0 0; }

and from a javascript function inside an external js file?

function loadCustomers() {
    $.ajax({
        type: "get",
        dataType: "html",
        url: '/Customers/AllCustomers',
        data: {},
        success: function(response) {
        }
    });
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

氛圍 2024-10-07 19:21:41

在 CSS 中，您始终可以使用相对路径（在 CSS 中，它是相对于 CSS 文件位置的）：

body { 
    background: #F4F4F4 url('../images/backgr_grad.png') repeat-x 0 0; 
}

在 JS 中，有不同的技术，但其中一种包括在视图中定义全局 js 变量：

<script type="text/javascript">
    var customersUrl = '<%: Url.Action("AllCustomers") %>';
</script>

然后在外部 javascript 文件中使用此变量：

function loadCustomers() {
    $.ajax({
        type: 'get',
        dataType: 'html',
        url: customersUrl,
        data: { },
        success: function(response) {
        }
    });
}

另一种技术涉及渐进增强：

<%: Html.ActionLink("Load customers", "AllCustomers", 
    null, new { id = "customersLink" }) %>

并在js中渐进增强此链接：

$(function() {
    $('#customersLink').click(function() {
        $.ajax({
            type: 'get',
            dataType: "html",
            url: this.href,
            success: function(response) {
            }
        });

        // make sure to cancel the default action
        return false;
    });
});

From CSS you could always use relative paths (in CSS it is relative to the CSS file location):

body { 
    background: #F4F4F4 url('../images/backgr_grad.png') repeat-x 0 0; 
}

From JS there are different techniques but one consist of defining a global js variable in the view:

<script type="text/javascript">
    var customersUrl = '<%: Url.Action("AllCustomers") %>';
</script>

and then use this variable in the external javascript file:

function loadCustomers() {
    $.ajax({
        type: 'get',
        dataType: 'html',
        url: customersUrl,
        data: { },
        success: function(response) {
        }
    });
}

Another technique involves progressive enhancement:

<%: Html.ActionLink("Load customers", "AllCustomers", 
    null, new { id = "customersLink" }) %>

And in js progressively enhance this link:

$(function() {
    $('#customersLink').click(function() {
        $.ajax({
            type: 'get',
            dataType: "html",
            url: this.href,
            success: function(response) {
            }
        });

        // make sure to cancel the default action
        return false;
    });
});

回复收藏 0 原文