Using Javascript if else inside MVC .cshtml page

Question

Is there a way to use if else statment inside MVC cshtml page

 <div class="primary-content">
            if(DetectIE())
            {
            <embed data-bind="attr: { src: data.files()[currentPage()] + '#toolbar=0&amp;navpanes=0&amp;scrollbar=0' }" type="application/pdf" style="width: 100%; height: 800px !important;">
            }
            else
            {
            <object data-bind="attr: { data: data.files()[currentPage()] + '#toolbar=0&amp;navpanes=0&amp;scrollbar=0' }" type="application/pdf" width="100%" height="600px"></object>
            }
        </div>

I have a javascript code to detect if the current browser is Internet explorer or not . If it is a IE then <embed> tag is used otherwise <object> tag is used.

Any suggestions or help would be appreciated.

Thanks in advance

Just use @if (DetectIE()) { // embed tag } else { // object tag } statement. But what is DetectIE() do? — Tetsuya Yamamoto
– Tetsuya Yamamoto, Commented Nov 1, 2018 at 4:18
DetectIEit is a javascript method to detect internet explorer — Owais Ahmed
– Owais Ahmed, Commented Nov 1, 2018 at 4:19
Nope, you cannot use JS method with Razor if statement. Place the if statement inside the <script> tag and append the element with something like $.append('<embed>...</embed>'). — Tetsuya Yamamoto
– Tetsuya Yamamoto, Commented Nov 1, 2018 at 4:22
It might be easier to use Request.Browser to determine the browser in the controller, and then just pass a bool property to your view indicating if its IE or not (as a view model property or a ViewBag property) — user3559349
– user3559349, Commented Nov 1, 2018 at 4:24

Tetsuya Yamamoto · Accepted Answer · 2018-11-01 04:33:43Z

Since DetectIE() is a JS function, you can't use it as comparison to Razor @if block. You should put it inside <script> with jQuery.append() to append the proper tag into target element:

<script>
$(function() {
    // other stuff

    if (DetectIE())
    {
        $('#targetElement').append("<embed data-bind=\"attr: { src: data.files()[currentPage()] + '#toolbar=0&amp;navpanes=0&amp;scrollbar=0' }\" type=\"application/pdf\" style=\"width: 100%; height: 800px !important;\">");
    }
    else
    {
        $('#targetElement').append("<object data-bind=\"attr: { data: data.files()[currentPage()] + '#toolbar=0&amp;navpanes=0&amp;scrollbar=0' }\" type=\"application/pdf\" width=\"100%\" height=\"600px\"></object>");
    }
});
</script>

Example of the target element:

<div id="targetElement" class="primary-content"></div>

If you want to check any version of IE from controller side, you can use this:

bool isIE = (Request.Browser.Browser == "IE" || Request.Browser.Browser == "InternetExplorer");

And then pass the value to ViewBag:

ViewBag.IsIE = isIE;

JS usage example

if (@ViewBag.IsIE)
{
   // render embed tag
}
else
{
   // render object tag
}

Sreenath Ganga · Accepted Answer · 2018-11-01 04:38:51Z

0

You cannot use javascript function inside razor directly..so bettter use Request .Browser to Get the Browsername

@{bool IsIE = false ;
if (Request.Browser.Type.ToUpper().Contains("IE"))
{ 
    IsIE = true;
}

}
@if (IsIE)
{
    // Your Razor here
}
else
{
    //  Your Razor here
}

edited Nov 1, 2018 at 4:38

answered Nov 1, 2018 at 4:23

Sreenath Ganga

7364 gold badges21 silver badges50 bronze badges

1 Comment

Owais Ahmed Over a year ago

My method is a javascript method

Collectives™ on Stack Overflow

Using Javascript if else inside MVC .cshtml page

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related