Use Razor in Jquery

Question

I am writing AJAX call which looks as follow:

 <script type="text/javascript">
                            $(function () {
                            $.ajax({
                              url: @(Url.Action("_ModulePartial", "Home")),
                              dataType: 'html',
                              success: function(data) {
                                 $('#_ModulePartial').html(data);
                              },
                           });
                         });
                        </script>
            }

i want to call _ModulePatial action in Home controller in default Area using Url.Action

<script type="text/javascript">
                                    $(function () {
                                    $.ajax({
                                      url: /Home/_ModulePartial,
                                      dataType: 'html',
                                      success: function(data) {
                                         $('#_ModulePartial').html(data);
                                      },
                                   });
                                 });
                                </script>
                    }

/Home/_ModulePartial works fine but i want to achive this using @Url.Action because we have 2 different URl http:/TestUrl.com/Test/User/Login and http://TestUrl.com/User/Login so the above Url will not work under one of the server. as 1st Url contains "Test" it is not able to find Home controller.

So can we use Url.Action in Jquery?

Firebug gives this error

SyntaxError: missing } after property list
[Break On This Error]   

url: /Home/_ModulePartial,

when trying to call using @Url.Action in 1st script

score 1 · Answer 1 · answered Apr 08 '13 at 06:41

You need to include the area name in your ajax call and you have to do it like this:

'@Url.Action("_ModulePartial", "Home", new { area = "Test" })'

Here's the complete ajax call:

<script type="text/javascript">
    $(function () {
        $.ajax({
            url: '@Url.Action("_ModulePartial", "Home", new { area = "Test" })',
                dataType: 'html',
                success: function(data) {
                    $('#_ModulePartial').html(data);
                },
            });
    });
</script>

Also, ensure that the extra "}" after the script tag is just a copy-paste error.

score 0 · Accepted Answer · answered Apr 08 '13 at 06:41

0

Got it... :)

Just use single quotes. and it works

<script type="text/javascript">
                            $(function () {
                            $.ajax({
                              url: '@(Url.Action("_ModulePartial", "Home"))',
                              dataType: 'html',
                              success: function(data) {
                                 $('#_ModulePartial').html(data);
                              },
                           });
                         });
                        </script>
            }

answered Apr 08 '13 at 06:41

Rahul Rajput

1,427
3
17
38

To expand on this, remember that ASP.NET calls such as Razor are performed at the server level, before the page is sent to the client. What you are doing is setting a placeholder for text to be injected by the server. Once the page is sent to the client, the placeholder text will already have been changed. jQuery is a client-side language, and is interpretted by the browser. All of the server-side code will have been replaced, and the browser will only see the result of the ASP.NET calls. I hope that makes sense. – Apache Oct 05 '15 at 02:19

Use Razor in Jquery

2 Answers2