Mixing razor and java script code for @Html.Partial()

Question

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

Is index a parameter to your route? You're mixing a JS variable and trying to make C# complete 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 compiling. — sergiogarciadev
– 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
– 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
– 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
– 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
– usFarswan, Commented Jul 15, 2014 at 3:56

Community · Accepted Answer · 2017-05-23 12:17:51Z

4

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

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Jul 14, 2014 at 21:09

Sergey Boiko

4713 silver badges10 bronze badges

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

2 Comments

usFarswan Over a year ago

Thanks for commenting But if I can get everything at client side then why i will call server side for this. Are there other options to fix this or calling server side to return the partial view is last resort.

Sergey Boiko Over a year ago

Regarding to AmmarCSE answer: I would say, it depends on what you want to do. If you want to get just html and use it by jQuery, you can just call Partial("~/Views/MyFolder/ViewName.cshtml") and if you take a look to the html, you will see only html that was rendered by helper. But as you wrote, you want to pass params to render proper data, right? If so, it would be better to use Action that takes parameters, processes it, and returns partial view with proper model. If you use @Html.Partial() in your js code, you have poor html, as Partial helper cannot do requests to server by javascript.

Community · Accepted Answer · 2017-05-23 10:31:22Z

As mentioned in the answer by Sergey Boiko, this approach is not recommended 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

Thanks for replying but in this case also the intelligence and run-time says it is not recognizing JavaScript 'index' variable inside razor '@Html.Partial("_Options", index)'syntax and flashing error as "The name 'Index' does not exists in current context".
Oops. I overlooked the index variable. I their a way you can get the count of question options(the index) from razor. Such as @Model.Questions.Count?

Collectives™ on Stack Overflow

Mixing razor and java script code for @Html.Partial()

2 Answers 2

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Linked

Related