Web Development

Richard Deeming7-Nov-17 2:22

7-Nov-17 2:22

John Simmons / outlaw programmer wrote:
What's the reason for that?

Because that's how it's declared in Views\Shared\_LoginPartial.cshtml:

@using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
    using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
    {
    @Html.AntiForgeryToken()

    <ul class="nav navbar-nav navbar-right">
        <li>
            @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })
        </li>
        <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
    </ul>
    }
}
else
{
    ...

It's using a <form> because the LogOff action in the AccountController requires a POST request:

//
// POST: /Account/LogOff
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult LogOff()
{
    AuthenticationManager.SignOut(DefaultAuthenticationTypes.ApplicationCookie);
    return RedirectToAction("Index", "Home");
}

This is done to prevent a forged request from another site from logging the user out of your site. If you're not worried about that, you could remove the [HttpPost] and [ValidateAntiForgeryToken] attributes to make the action accept a GET request, and then remove the form:

@using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
    <ul class="nav navbar-nav navbar-right">
        <li>
            @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })
        </li>
        <li>
            @Html.ActionLink("Log off", "LogOff", "Account")
        </li>
    </ul>
}
else
{
    ...

//
// GET: /Account/LogOff
public ActionResult LogOff()
{
    AuthenticationManager.SignOut(DefaultAuthenticationTypes.ApplicationCookie);
    return RedirectToAction("Index", "Home");
}

Otherwise, you'll need to work out why the javascript: link isn't working in Chrome. The developer console (F12) might have some clues.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

#realJSOP7-Nov-17 2:39

7-Nov-17 2:39

In chrome, I have this:

Refused to load the script '[script name]' because it violates the following Content Security Policy directive: "script-src 'none'".

For each for the following scripts:

modernizr-2.8.3.js
jquery-3.2.1.js
bootstrap.js
respond.js
browserLink (wtf is that?)

It says it refused to load those scripts, but everything else appears to work fine.

Richard Deeming7-Nov-17 2:45

Introducing Browser Link, a New Browser Productivity Tool for a Faster ASP.NET Development Cycle | Visual Studio 2013 Launch | Channel 9[^]

7-Nov-17 2:45

Assuming you haven't set up a CSP policy[^], have you got any add-ons that could be blocking scripts?

John Simmons / outlaw programmer wrote:
browserLink (wtf is that?)

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

#realJSOP7-Nov-17 2:47

7-Nov-17 2:47

No, I haven't set one because I wasn't aware that I need too.

By addons, do you mean nugget packages?

How would I be able to determine that?

(all of the above could also be asked like this - "How the f*ck should I know?")

Richard Deeming7-Nov-17 2:53

7-Nov-17 2:53

No, I mean Chrome extensions. Check in chrome://extensions/[^], or "Menu ⇒ More tools ⇒ Extensions" to see what's installed.

You could try starting Chrome in "safe mode" to see if that fixes the issue.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

#realJSOP7-Nov-17 2:59

7-Nov-17 2:59

Nope, I haven't installed any extensions, but ScriptSafe is installed.

Richard Deeming7-Nov-17 3:03

7-Nov-17 3:03

That's almost certainly the cause of the problem. AFAIK, Chrome script blockers inject a custom CSP to prevent scripts from executing, which matches the errors in the console.

If you click on the icon, there should be an option to trust or unblock your local site.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

#realJSOP7-Nov-17 3:01

7-Nov-17 3:01

I disabled scriptsafe, and now it works.

MVC5 checkbox size (RESOLVED - kinda)

aijaj hussain18-Nov-17 20:09

aijaj hussain

18-Nov-17 20:09

Cross check ActionName , Controller Name and Methode type(POST/GET)

Spacially Forgery token on both side

#realJSOP1-Nov-17 2:37

1-Nov-17 2:37

I found out how to align the checkbox with the fields, and then how to vertically center the checkbox with the label, but nothing I've tried lets me make the checkbox 2x larger. I've tried various combinations of height, line-height, padding, and margin, but nothing seems to affect the size.

I don't want to modify the bootstrap files to do this. Can anyone help?

EDIT/UPDATE/RESOLUTION ==================================

I finally came to a somewhat reasonable resolution that appears to work in all browsers.

I have adapted all checkboxes to the following:

HTML

<div class="form-group">
    @Html.LabelFor(m => m.RememberMe, new {@class = "col-md-2 control-label", @style="color:transparent;"})
    <div class="col-md-10">
        <label class="btn btn-default">
            @Html.CheckBoxFor(m => m.RememberMe)&nbsp;&nbsp;Remember me&nbsp;&nbsp;
        </label>
    </div>
</div>

And in all actuality, I have an extension method that I use that reduces the above to the following

@Html.CheckBoxForEx(m => m.RememberMe)

The extension method has a labelText parameter that defaults to null, and if that parameter is null, it tries to get the display name for the specified expression. The method also does all the element wrapping and styling, so if I change that stuff in the method, the change is realized throughout the site with no further changes. I've created similar extension methods for most of the MVC Html.Helper methods. My entire Login form looks like this:

HTML

@Html.TextBoxForEx(m => m.Email);
@Html.PasswordForEx(m => m.Password)
@Html.CheckBoxForEx(m => m.RememberMe)
@Html.ActionInputButton("LogIn", "Log in")

modified 16-Nov-17 10:53am.

Richard Deeming2-Nov-17 5:53

2-Nov-17 5:53

In Chrome, Edge and IE11, setting the width and height seems to work:
Edit fiddle - JSFiddle[^]

In Firefox, that makes the input occupy a larger area, but leaves the box the same size.

Earlier browser versions also have problems. The simplest option is probably to create a custom checkbox element, as described on MDN:
Advanced styling for HTML forms - Learn web development | MDN[^]

But that can get quite fiddly, between changing the image sizes and the padding and positioning of the sprite.

Another option would be to use the transform[^] property to scale the element up:
Edit fiddle - JSFiddle[^]

But that then causes it to overlap the surrounding content, so you'd have to add margins to push the siblings out of the way:
Edit fiddle - JSFiddle[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

#realJSOP2-Nov-17 8:06

2-Nov-17 8:06

I've already tried transform, and that didn't work either. Frown | :(

Something weird - I specified an EditorFor container with the bool field, and I got an editor box (for text) overlaid with a checkbox that was as tall as the editor box. When I changed it to a CheckBoxFor, it reverted back to its original too-small-for-my-taste size.

BTW, I'm using chrome in VS...

#realJSOP3-Nov-17 3:50

3-Nov-17 3:50

I found a way. I created a new stylesheet, added it to the end of the style bundle loader:

CSS

bundles.Add(new StyleBundle ("~/Content/css").Include("~/Content/bootstrap.css","~/Content/site.css","~/AppCode/StyleMods.css"));

and put this style into it:

CSS

input[type="checkbox"] 
{ 
    height: 26px;
    width: 26px;
    margin-top:-3px;
}

Of course, this applies to all checkboxes on the site, but that's what I want, so silver linings. Mo bettah buttah. Smile | :)

Richard Deeming3-Nov-17 5:07

3-Nov-17 5:07

That doesn't work in Firefox - the input takes up more room, but the checkbox stays the same size.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

#realJSOP3-Nov-17 6:09

3-Nov-17 6:09

I can't try this until I get home (we don't/can't have FF here at work), but try adding this to the style:

moz-appearance:none;

(This is the biggest reason that I generally despise web development.)

Richard Deeming3-Nov-17 10:02

3-Nov-17 10:02

That just makes the checkbox disappear completely! Laugh | :laugh:

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

#realJSOP3-Nov-17 6:12

3-Nov-17 6:12

I also found this link:

Advanced styling for HTML forms - Learn web development | MDN[^]

Richard Deeming3-Nov-17 10:03

3-Nov-17 10:03

Now where[^] have I seen that link before? Big Grin | :-D

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

#realJSOP7-Nov-17 4:15