在C＃ASP.NET中将值从视图传递到视图模型

Question

Thought that this might be a simple issue but I can not figure out how to pass a value from view to viewmodel in C# (EntityFramework 6 MVC ASP.NET).

Unfortunately I'm new to C# (even if not to programming, WebApps, JS etc.) - but this Razor-syntax get's me every time. ;)

I have this div and by clicking on it it would be nice to asign the person's id to a variable in my viewmodel. Then I want to use it in the Controller.

Here is my view:

<div class="employee_login" id="@Html.DisplayFor(modelItem => item.Pid)" onclick="@Model.userid = @Html.DisplayFor(modelItem => item.Pid)">
    <p>@Html.DisplayFor(modelItem => item.FirstName) @Html.DisplayFor(modelItem => item.LastName) | Kennung: @Html.DisplayFor(modelItem => item.Pid)</p>
</div>

And the viewmodel:

public class LoginViewModel
{
 ....

    [NonSerialized]
    public int userid;
}

Unfortunately it renders to the following HTML:

I read that it is good practice to pass a value from view to Controller via the viewmodel and that's exactly what MVVM-Architecture shows and wants to. If it's common practice to do it via http or something else, please let me know.

Forgive me if this is a simple issue, solved in a few minutes.

Thank you and have a nice day,

Nico

Answer 1

So here is a good solution for the issue (thanks to @NikhilVC).

What I wanted was: In the Default-Login-View from the ASP.NET WebApp (MVC6 EntityFramework CodeFirst), there should be a list of all users and by clicking on one user and entering the Password the user should be logged in. But ASP.NET authenticates their users with the E-Mail-Adress. Therefor a unique userid which is accessible in the view should be passed to the Controller and then searched in the db for the user to get the E-Mail.

The View:

<div class="employee_list">
        @foreach (var item in @Model.allUsers) {
            <div class="employee_login" id="@Html.DisplayFor(modelItem => item.Pid)" data-id="@item.Pid" data-firstname="@item.FirstName" data-lastname="@item.LastName">
                <p>@Html.DisplayFor(modelItem => item.FirstName) @Html.DisplayFor(modelItem => item.LastName) | Kennung: @Html.DisplayFor(modelItem => item.Pid)</p>
            </div>
        }
    </div>
</div>
<div class="col-md-6 col-md-offset-3">
    <h4>@ViewBag.Beschreibung2</h4>
    <hr />
    <section id="loginForm">
        @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form", role = "form" })) {

            @Html.AntiForgeryToken()
            @Html.HiddenFor(@Model => @Model.userid, new { @id = "idinput", value = "0" })
            <div class="form-group">
                @Html.LabelFor(m => m.Password, new {@class = "", @id = "kennwortlabel" })
                @Html.PasswordFor(m => m.Password, new { @class = "form-control", @id = "password" })
                @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
            </div>
            <button type="submit" class="btn btn-default">Anmelden</button>
        }
    </section>
</div>

You have to create a hidden Input field which gets the userid. By clicking on the user this is done via jQuery:

@section Scripts {
    <script>
        $(function () {
            $('body').on('click', '.employee_login', function () {
                $(this).siblings().removeClass('selected');
                $(this).addClass('selected');
                $('#idinput').val($(this).data('id'));
                $('#password').prev('#kennwortlabel').text('Kennwort für ' + $(this).data('firstname') + " " + $(this).data('lastname'));
            });
        });
    </script>
}

This is the viewmodel which connects view and Controller:

public class LoginViewModel {
    [EmailAddress]
    public string Email { get; set; }

    [Required]
    [DataType(DataType.Password)]
    public string Password { get; set; }

    [Display(Name = "Speichern?")]
    public bool RememberMe { get; set; }

    [NonSerialized]
    public List<ApplicationUser> allUsers;

    [Required(ErrorMessage = "Please select your name")]
    public int? userid { get; set; }
}

And the Controller:

public async Task<ActionResult> Login(LoginViewModel model, string returnUrl) {
        model.allUsers = db.Users.ToList();

        if (!ModelState.IsValid)
        {
            return View(model);
        }

        var user = db.Users.Where(i => i.Pid == model.userid).Single();
        if (user != null) {
            model.Email = user.Email;
        }
        else
            return View(model);

....
}

So the userid is set in the model and by clicking the submit-button, the function above is executed. It gets the user from the db where the i.Pid == model.userid and sets the E-Mail-adress in the model which is then used to authenticate the user.

I am new to C# (especially with EntityFramework) but perhaps someone finds this helpful.

Thanks to my supporters,

Nico

Answer 2

first you need to add one hidden field on view

@Html.HiddenFor(model => model.userid)

and then set model value using javascript function

function updateID(val)
{
    document.getElementById('userid').value = val;   
}

and call updateID function on div click

i think this will help you......