How to apply Razor syntax "@" into "<div>" tag by using jQuery in asp.net mvc 5?

Question

Can you tell me how to append the line @Html.Partial("_Layout") to <div class="demo"> by jQuery?

I have tried it, but it doesn't work:

<input type="button" id="btn" value="Click me" />
<div class="demo">
</div>

jQuery code:

$('#btn').click(function(){
     $('.demo').append('@@Html.Partial("_Layout")');
     $('.demo').html($('.demo').text());
});

But the result I received was:

<div class="demo">
     @Html.Partial("_Layout")
</div>

Browser understood that @Html.Partial("_Layout") is a plain text, not a Razor syntax.

Please tell me how to fix it? Many thanks!!!

why @@Html.Partial("_Layout") 2 '@'? it is just a copy paste problem? — invernomuto
– invernomuto, Commented Jul 20, 2015 at 19:18
@Infer-On Because that's jQuery syntax inside .cshtml file. If one, it will throw error. — user4090029
– user4090029, Commented Jul 20, 2015 at 19:20
By the time your js executes, it's too late to add things to the page with Razor. Razor is processed on the server side before the page is sent to the client — jmoerdyk
– jmoerdyk, Commented Jul 20, 2015 at 19:20

Josh Crozier · Accepted Answer · 2015-12-10 23:05:56Z

4

The @Html.Partial("_Layout") will be resolved at server side, not client side. If you need to load dynamically you should provide a Action and use the jquery $ajax function:

1) At your controller:

public ActionResult Layout()
{
  return PartialView('_Layout');
}

2) At your view

$('#btn').click(function(){
  $.ajax({
    url: '/Controller/Layout',
    dataType: "html",
    success: function (data) {
    $('.demo').html(data);
   }
  });
});

edited Dec 10, 2015 at 23:05

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

answered Jul 20, 2015 at 19:19

Fals

6,8394 gold badges26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user5135401 · Accepted Answer · 2015-07-20 19:37:37Z

0

The @@ will be interpreted by razor engine as the character '@'.

In my opinion, it will be better if you call using ajax the view _Layout and the result you can publish it inside the div demo.

sample:

<input type="button" id="btn" value="click me"/>
<div id="demo"></div>
<script>
$('#btn').on('click',function(){
    e.preventDefault();
    $.ajax({
      url:'@Url.Action("PartialLayout")',
      type: 'post' // according to haack and scott hanselmen, its recommended to use post in the ajax call
    }).done(function(result){
         $('#demo').html(result);
    });
});
</script>

// in your controller you code this one

[HttpPost]
public ActionResult ParitalLayout()
{
     return PartialView("_Layout");
}

I hope this code will help you

edited Jul 20, 2015 at 19:37

answered Jul 20, 2015 at 19:21

user5135401

2181 silver badge9 bronze badges

Collectives™ on Stack Overflow

How to apply Razor syntax "@" into "<div>" tag by using jQuery in asp.net mvc 5?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related