在导航栏中插入模式剃须刀页面.怎么做? [英] Insert a modal razor page in the navbar. How to do it?

查看:73
本文介绍了在导航栏中插入模式剃须刀页面.怎么做?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在建立一个新网站,其中一项要求是使登录表单成为模式窗口.我试图将其包含在顶部导航栏中,并且仅当用户未登录时才呈现它.

I'm building a new website and one of the requirements is to have the login form be a modal window. I'm trying to include it in the top navigation bar and it's only being rendered if the user is not logged in.

如何在顶部导航栏中添加具有自己的模型的模态窗口?有其他选择吗?

How can I add this modal window with it's own model inside the top navbar? Are there any alternatives?

如果我删除模型并让一个空的模态一切正常,但是当我再次添加它时,它不起作用,因为页面的模型(在本例中是索引页面)是一个与之不同的模型.模态登录.

If I delete the model and let an empty modal everything works perfectly but when I add it again it doesn't work, because the model of the page (in this case the index page) is a different one then the one from the modal login.

P.S.我正在使用Razor Pages和ASP.NET Core 2.2.

P.S. I'm using Razor Pages and ASP.NET Core 2.2.

推荐答案

部分视图

因此,您创建了一个_LoginPartial.cshtml文件.假设您设置了@model LoginViewModel

So you make a _LoginPartial.cshtml file. and let's say you set @model LoginViewModel

在此_LoginPartial.cshtml内,您具有登录模式和所有功能.

Inside this _LoginPartial.cshtml you have your Login Modal and all the functionality.

现在,当您在具有模型@model AnotherModelIndex页面中调用部分时,您需要像这样将新模型传递给部分:

Now when you invoke your partial inside an Index page that has model @model AnotherModel, you need to pass a new model to the partial like so:

<partial name="_LoginPartial" model='new LoginViewModel()' />

name是您的cshtml页面的名称.

model是页面的@model.

在此处了解更多信息

查看组件

简而言之,如果您采用这种方式,这本质上就像是在页面内嵌套一个小控制器.允许您更改@model的范围.

To be brief if you take this route this is essentially like nesting a little controller inside your page. Allowing you to change scope for your @model.

了解有关的更多信息查看组件

更新嵌套对象

您需要实例化对象属性.

You need to instantiate the object property.

<partial name="_LoginPartial" model='new LoginViewModel { InputModel = new InputModel() }' />

<partial name="_LoginPartial" model='new LoginViewModel { InputModel = new InputModel() }' />

这篇关于在导航栏中插入模式剃须刀页面.怎么做?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆