Can anyone provide me solution for how to dynamically add some code into the page in MVC.

I was doing this way but in this code the page fails to identity index javascript variable , as it is not identifying the index javascript variable.

$(document).on('click', '.add-option', function () {           
  var index = $("div.ques-options").size();
  if (index < 5) {
    $('.MainContainer').append('@Html.Partial("_Options", index)')
  }
});

Can anyone provide me solution for how to dynamically add some code into the page in MVC.

I was doing this way but in this code the page fails to identity index javascript variable , as it is not identifying the index javascript variable.

$(document).on('click', '.add-option', function () {           
  var index = $("div.ques-options").size();
  if (index < 5) {
    $('.MainContainer').append('@Html.Partial("_Options", index)')
  }
});

• javascript
• jquery
• asp-mvc
• asp-mvc-4
• razor

• Is index a parameter to your route? You're mixing a JS variable and trying to make C# plete your route with that. You should build your route by yourself at JS or in C# at server level, but not mix in the way you did. Your code is probably not piling. – sergiogarciadev Commented Jul 14, 2014 at 20:11
• No Index is just a java script variable that I am using it for setting the index of dynamically generated the Answer list so that at post i will receive a list of Answers and in partial view I am doing Like this: @model Int32 "<input type='text' name='Answers[" + index + "].AnswerText'/>". – usFarswan Commented Jul 15, 2014 at 2:18
• @Sergio can you plz explain your solution statement with example. How can i add route. I am not calling any server side code. I want to set at client only – usFarswan Commented Jul 15, 2014 at 2:26
• @Html.Partial("_Options", index) isn't a C# code and index isn't a javascript variable? – sergiogarciadev Commented Jul 15, 2014 at 3:22
• @Html.Partial("_Options", index) is written in javscript and indes the javascript variable. I am dynamically loading the div with the content of strongly type partial view as written in above code – usFarswan Commented Jul 15, 2014 at 3:56

2 Answers 2

it would be better to use jQuery load() or call by ajax action in the controller, this approach described there ASP.NET MVC rendering partial view with jQuery ajax

As mentioned in the answer by Sergey Boiko, this approach is not remended as you can utilize ajax instead to have the server return the partial view.

Anyhow, mixing javascript and Razor requires that you surround your Razor call with any code block

@{ ... } or @if, etc.

and putting the code itself in an escaped sequence

@: or the <text> tag.

So, knowing this, you can do something like

<script>
    var partialView = '';
    @{
        <text>
            partialView = '@Html.Partial("_Options", index)';
        </text>
     }

     $(document).on('click', '.add-option', function () {           
         var index = $("div.ques-options").size();
         if (index < 5) {
             $('.MainContainer').append(partialView)
      }});
</script>

Check out Mix Razor and Javascript code and Using Razor within JavaScript