CODEWITHSUNDEEP
c#razorasp.net-mvc-5
Menyus777
Menyus777

Reputation: 7037

How can i change my model value on button click in Razor?

Currently im working on a project where i have two buttons. "Windows Login" and "Login". When i click on "Windows Login" i would like to submit the form and before submitting i would like to change my model choosenProvider string property value to "Windows".

Here is my model:

public class LogInUserViewModel
{

    public LogInUserViewModel() { }

    [Required]
    [Display(Name = "Name")]
    public string UserName { get; set; }

    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }
    public string ReturnUrl { get; set; }
    public string ChoosenProvider { get; set; } = "idsrv";
}

And here is my Razor page:

<body>
    <div class="background">
        <div class="login-area">
            <br />
            <div class="login-title">Control Unit Registry</div>
            <br />
            @Html.ValidationSummary(true, "", new { @class = "text-warning-login" })
            <div class="holder-form-login">
                <div class="form-group">
                    <div class="text-login">
                        @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "input-name-login" } })
                            @Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-warning-login" })
                        </div>
                    </div>
                </div>
                <br />
                <div class="form-group">
                    <div class="text-login">
                        @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "input-password-login" } })
                            @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-warning-login" })
                        </div>
                    </div>
                </div>
            </div>
            @Html.HiddenFor(x => x.ChoosenProvider)
            <div class="form-group">
                <div class="holder-button-login">
                    <br />
                    <input type="submit" value="Login" class="button-login" />
                </div>
            </div>
            <br />
            <br />
            <div class="form-group">
                <div class="holder-button-login">
                    <br />
                    <input type="submit" value="Windows Login" class="button-login" onclick="chooseWindowsProvider()" />
                </div>
            </div>
            <br />
            <br />
            <br />
            <br />
            <div class="link-register-login">
                <a href="register">Register</a>
            </div>

        </div>
    </div>
</body>

This is the only page what i have in razor and it completely drives me mad. You can see that i was experiencing with:

@Html.HiddenFor(x => x.ChoosenProvider)

And javascript onclick() but it did not change the value.

So to SUM UP: I dunno how to change choosenProvider property value to "Windows", and then submit the form, on button click.

Any help is appreciated.

Upvotes: 3

Views: 12301

Answers (1)

Menyus777
Menyus777

Reputation: 7037

Okey i finally found it out, i hope it will help someone in the future, also please not that intelisense will might tell you that x or y function on field dont even exists but they do.

So the solution was that js was executed later then the submit, so the thing you need to do is:

  1. Change the button type to <input type="button" from type="submit"
  2. Then insert the following script at the end of your file

<script>
    function chooseWindowsProvider() {
        document.getElementById('ChoosenProvider').value = 'Windows';
        document.getElementById('loginForm').submit();
    }
</script>

So we are basically submitting the form from js rather then from the button so this way we can assign the string value before the submitting.

Some additional info:

 @Html.HiddenFor(x => x.ChoosenProvider)

Already contains an id because its HTML result is:

<input id="ChoosenProvider" name="ChoosenProvider" type="hidden" value="idsrv" />

And finally how you can add an id to your form:

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "loginForm"}))

Upvotes: 4

Related Questions