Razor + jQuery combining in Code

Question

I found some examples of a combination of Razor Syntax and jQuery. For example:

Jquery syntax in .cshtml file Razor View Engine and jQuery

What am I do trying to do? I set a Class called "MaxHeight" on the tr, but the user should only be enabled to click a Checkbox if he clicked on the + Button AND is on a Usergroup.

So my jQuery-tinkerings looks like this:

    function SizeButtonClicked(obj) {
        var closestTr = $(obj).closest('tr');

        if (closestTr.hasClass('maxHeight')) {
            closestTr.removeClass('maxHeight');

            @if(Roles.IsUserInRole(UserRole.Customer.ToString()) || User.IsInRole(UserRole.Admin.ToString()))
            {
                <text>
                    <script type="text/javascript">
                        closestTr.find('input[type=checkbox]').removeAttr('disabled');
                    </script>
                </text>
            }
         }
         else {
                closestTr.addClass('maxHeight');
                closestTr.find('input[type=checkbox]').attr('disabled', 'disabled');
            }
        }

So if the user is in the Role Customer or Admin, I'd like to remove the attr disabled and he is enabled to click the CHK.

But I guess this won't work in 1000 Years. Is it even possible to combine stuff like this? Would there be a easier solution for such Ideas?

Edith: I try to use what Warrior and Sergey said, so I made a own JS-File and pass a Parameter to check if the disabled attribute should be searched:

<input type="button" value="+" class="SizeButton" onclick="SizeButtonClicked(this, @(Roles.IsUserInRole(UserRole.Customer.ToString()) || User.IsInRole(UserRole.Admin.ToString())))" />

Does not work so far, but would something like this BE the solution for proper programming?

What do you mean "won't work in 1000 years"? What's the issue? Does the code work as written? Because there's no inherent problem with using a mix of Javascript and Razor, that's sort of the point of Razor -- to add in server-side processing for things you can't do 100% on the client side.. — Sam Hanley
– Sam Hanley, Commented May 5, 2014 at 19:54
Is that code from a view? Can you share the complete view code? — thepirat000
– thepirat000, Commented May 5, 2014 at 20:18
Not really answering your question, but you're doing this the wrong way. Views need to be as straight-forward as possible. JavaScript needs to be as modular as possible. For starters look at the module pattern in JavaScript and how this resolves this issue. — Sergey Akopov
– Sergey Akopov, Commented May 5, 2014 at 22:44

StriplingWarrior · Accepted Answer · 2014-05-05 23:11:45Z

2

That'll actually work just fine, but you don't need the script tag in there:

@if(Roles.IsUserInRole(UserRole.Customer.ToString()) || User.IsInRole(UserRole.Admin.ToString()))
{
    <text>
        closestTr.find('input[type=checkbox]').removeAttr('disabled');
    </text>
}

It'll render like the following if you remove the script tag, and they are in the role:

function SizeButtonClicked(obj) {
    var closestTr = $(obj).closest('tr');

    if (closestTr.hasClass('maxHeight')) {
        closestTr.removeClass('maxHeight');

        closestTr.find('input[type=checkbox]').removeAttr('disabled');
     }
     else {
        closestTr.addClass('maxHeight');
        closestTr.find('input[type=checkbox]').attr('disabled', 'disabled');
     }
}

edited May 5, 2014 at 23:11

StriplingWarrior

158k29 gold badges261 silver badges326 bronze badges

answered May 5, 2014 at 22:28

Erik Elkins

6295 silver badges14 bronze badges

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

Comments

StriplingWarrior · Accepted Answer · 2014-05-05 23:17:08Z

Erik was right, in that your problem was in including a <script> tag where you didn't need one. It's also worth noting that the @: operator can eliminate the need for the <text> tags:

@if(Roles.IsUserInRole(UserRole.Customer.ToString()) || User.IsInRole(UserRole.Admin.ToString()))
{
    @:closestTr.find('input[type=checkbox]').removeAttr('disabled');
}

But I would echo Sergey Akopov's comment, that you really should be striving to remove javascript from your view code entirely. JQuery is particularly good at scanning your DOM elements and pulling information off of them, so if you use so-called unobtrusive javascript techniques you should be able to put data attributes on your elements to indicate whether this should happen, and move your javascript into its own static file.

Collectives™ on Stack Overflow

Razor + jQuery combining in Code

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related