如何传递正确的模型字典类型 MVC

Question

我是 MVC 5 的新手，我创建了一个新项目，并且正在设置登录名（使用外部登录名）。

这是使用 VIsual Studio 2013 MVC 5 应用程序模板

所以发生的情况是，当我单击社交媒体登录按钮时，我收到了错误模型正在传递的错误

传入字典的模型项是类型 'WebPortal.Models.LoginViewModel'，但是这个字典需要一个 'WebPortal.Models.ExternalLoginListViewModel' 类型的模型项。

如果您需要控件和模型代码，请告诉我。但正如我所说，这是模板附带的默认代码。我一直在改变的唯一的事情是视图在这一点上改变了外观。并在下面发布了查看代码。

我认为问题在于，由于我是从布局页面开始的，因此模型永远不会被启动，因为没有布局模型....再次，我是新手，所以我只是猜测。

这是部分路径 “_Layout”->“_SocialBar”（部分视图）->“登录”（部分视图）->“LoginPartial”（部分视图）->“_ExternalLoginsList”（部分视图）

SocialBar（部分视图）

<div class="header-top dark ">
    <div class="container">
        <div class="row">
            <div class="col-xs-3 col-sm-6 col-md-9">
                ...Some Code....
                <!-- header-top-first end -->
            </div>
            <div class="col-xs-9 col-sm-6 col-md-3">
                @Html.Partial("_Login")
            </div>
        </div>
    </div>
</div>

登录部分查看页面

@using Microsoft.AspNet.Identity

@if (Request.IsAuthenticated)
{
    ...Some Code...
}
else
{
    ...Some Code...
    @Html.Partial("_LoginPartial")
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

登录部分查看代码

@using WebPortal.Models
@model LoginViewModel

@using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { role = "form" }))
{
    @Html.AntiForgeryToken()
    <form class="login-form margin-clear">
        <div class="form-group has-feedback">
            <label class="control-label">@Html.LabelFor(m => m.Email)</label>
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
            <i class="fa fa-user form-control-feedback"></i>
        </div>
        <div class="form-group has-feedback">
            <label class="control-label">@Html.LabelFor(m => m.Password)</label>
            @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
            <i class="fa fa-lock form-control-feedback"></i>
        </div>
        <div class="form-group has-feedback">
            @Html.CheckBoxFor(m => m.RememberMe)
            <label class="control-label">@Html.LabelFor(m => m.RememberMe)</label>
        </div>
        <input type="submit" value="Log in" class="btn btn-gray btn-sm" />
        <span class="pl-5 pr-5">or</span>
        @Html.ActionLink("Sign Up", "Register", "Account", null, new { @class = "btn btn-default btn-sm" })
        <div class="form-group has-feedback">
            <a href="#">Forgot your password?</a>
        </div>

        @Html.Partial("../Account/_ExternalLoginsList")
    </form>
}

外部登录列表代码

@model WebPortal.Models.ExternalLoginListViewModel
@using Microsoft.Owin.Security
@{
    var loginProviders = Context.GetOwinContext().Authentication.GetExternalAuthenticationTypes();
    if (loginProviders.Count() == 0)
    {
        <span class="text-center">No External Logins</span>
    }
    else
    {
        <span>Login with&nbsp&nbsp&nbsp

                @foreach (AuthenticationDescription p in loginProviders)
                {
                    switch (@p.AuthenticationType)
                    {
                        case "Facebook":
                            <button type="submit" class="btn btn-xsm facebook" id="@p.AuthenticationType" name="provider" value="@p.AuthenticationType"><i class="fa fa-facebook"></i></button>
                            break;
                        case "Twitter":
                            <button type="submit" class="btn btn-xsm twitter" id="@p.AuthenticationType" name="provider" value="@p.AuthenticationType"><i class="fa fa-twitter"></i></button>
                            break;
                        case "Google":
                            <button type="submit" class="btn btn-xsm googleplus" id="@p.AuthenticationType" name="provider" value="@p.AuthenticationType"><i class="fa fa-google-plus"></i></button>
                            break;
                        case "Microsoft":
                            <button type="submit" class="btn btn-xsm microsoft" id="@p.AuthenticationType" name="provider" value="@p.AuthenticationType"><i class="fa fa-windows"></i></button>
                            break;
                        default:
                        <button type="submit" class="btn btn-xsm" id="@p.AuthenticationType" name="provider" value="@p.AuthenticationType">@p.AuthenticationType.ToString()</button>
                            break;
                    }
                }
            </span>
    }
}

Answer 1

当您执行@Html.Partial() 并且不为其提供模型时，它会使用当前（或父，如果您想这样想的话）模型来代替。所以当你这样做时

@Html.Partial("../Account/_ExternalLoginsList")

没有指定模型的第二个参数，它提供当前一个。您应该像这样向部分提供视图模型：

@Html.Partial("../Account/_ExternalLoginsList", externalLoginsViewModel)

否则，您将提供当前的类型，这与部分预期的类型不同。

Answer 2

ExternalLoginList 部分期望将模型传递给它。

@model WebPortal.Models.ExternalLoginListViewModel

你需要在这里传递模型：

@Html.Partial("../Account/_ExternalLoginsList")

像这样：

@Html.Partial("../Account/_ExternalLoginsList", new ExternalLoginListViewModel())

或

将部分模型放入父模型中

public class LoginViewModel
{
    public ExternalLoginListViewModel externalLoginListViewModel;
}

并将其传递给部分。

@Html.Partial("../Account/_ExternalLoginsList", externalLoginListViewModel)

或

我在 ExternalLoginList 部分中没有看到对模型的任何引用，因此您可能只需删除此行：

@model WebPortal.Models.ExternalLoginListViewModel