How to properly use multiple partial views with different models ASP CORE

Question

I have this in my cshtml file

<div class="login">
    @await Html.PartialAsync("_Login")
</div>
<div class="register">
    @await Html.PartialAsync("_Register")
</div>

And my partials look like this

_Login:

@using Microsoft.AspNetCore.Identity
@using project.Models

@model LoginViewModel
@inject SignInManager<ApplicationUser> SignInManager
@inject UserManager<ApplicationUser> UserManager


<form asp-controller="Account" asp-action="Login" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-horizontal">

    ...

    <button id="loginBtn" type="submit" class="btn btn-default">Log in</button>   
</form>

_Register:

@using Microsoft.AspNetCore.Identity
@using project.Models

@model RegisterViewModel
@inject SignInManager<ApplicationUser> SignInManager
@inject UserManager<ApplicationUser> UserManager


<form asp-controller="Account" asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-horizontal">

    ...

    <button id="registerBtn" type="submit" class="btn btn-default">Register</button>   
</form>

My idea is to have one of the two divs always with display:none (Initially it's the second one with this property), so the user interacts with only one form at a time. However, when I click the button [Log In] I get this error:

InvalidOperationException: The model item passed into the ViewDataDictionary is of type 'cartoondrawme.Models.AccountViewModels.LoginViewModel', but this ViewDataDictionary instance requires a model item of type 'cartoondrawme.Models.AccountViewModels.RegisterViewModel'.

My question is, do I have a flaw and what is it, or is this method entirely wrong, in which case - what is the right way?

I don't understand how the submit button from one form triggers the other form. If I delete the second div, it works fine.

Thank you.

I am having the same issue. Seems to be an aspnet mvc core thing. Used to work fine with as.net mvc. I will let you know if I come up with a solution — JSON
– JSON, Commented Feb 2, 2018 at 17:09

Kai · Accepted Answer · 2018-03-24 04:34:31Z

i hope its not too late..i used this method to solve the problem. 1) Create a class

[AttributeUsage(AttributeTargets.Method, AllowMultiple = false, Inherited = true)]
public class MultipleButtonAttribute : ActionNameSelectorAttribute
{
    public string Name { get; set; }
    public string Argument { get; set; }

    public override bool IsValidName(ControllerContext controllerContext, string actionName, MethodInfo methodInfo)
    {
        var isValidName = false;
        var keyValue = string.Format("{0}:{1}", Name, Argument);
        var value = controllerContext.Controller.ValueProvider.GetValue(keyValue);

        if (value != null)
        {
        controllerContext.Controller.ControllerContext.RouteData.Values[Name] = Argument;
        isValidName = true;
        }

    return isValidName;
    }
}

Edit your views

<form asp-controller="Account" asp-action="Login" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-horizontal">

    ...

    <button id="loginBtn" type="submit" class="btn btn-default" name="action:Login">Log in</button>   
</form>

<form asp-controller="Account" asp-action="Register" method="post" class="form-horizontal">

    ...

    <button id="registerBtn" type="submit" class="btn btn-default" name="action:Register">Log in</button>   
</form>

Add these to controller

[HttpPost]
[MultipleButton(Name = "action", Argument = "Login")]
public IActionResult Login(LoginViewModel model) { ... }

[HttpPost]
[MultipleButton(Name = "action", Argument = "Register")]
public IActionResult Register(RegisterViewModel model) { ... }

Collectives™ on Stack Overflow

How to properly use multiple partial views with different models ASP CORE

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related