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, Jul 14 '14 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 "". — usFarswan, Jul 15 '14 at 02: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, Jul 15 '14 at 02:26
`@Html.Partial("_Options", index)` isn't a C# code and `index` isn't a javascript variable? — sergiogarciadev, Jul 15 '14 at 03: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, Jul 15 '14 at 03:56

score 4 · Answer 1 · edited May 23 '17 at 12:17

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 '17 at 12:17

Community

1
1

answered Jul 14 '14 at 21:09

Sergey

471
3
10

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. – usFarswan Jul 15 '14 at 02:14
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. – Sergey Jul 15 '14 at 07:23

score 3 · Answer 2 · edited May 23 '17 at 10:31

3

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

edited May 23 '17 at 10:31

Community

1
1

answered Jul 14 '14 at 22:16

AmmarCSE

30,079
5
45
53

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". – usFarswan Jul 15 '14 at 02:11
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? – AmmarCSE Jul 15 '14 at 09:33

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

2 Answers2

Linked

Related