asp.net-mvc如何在 razor 视图中浮动 div 向两边

发布时间: 2017/3/25 18:02:25
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我试图在 razor 视图查看通知。我用 foreach 循环来从模型中获取数据。我想要在像中两个表中的列的视图上显示"邀请信"和"请求"div。一个邀请下来后下来的另一个 invitation.one 请求后另一个请求。(在一列中所有的请柬,另一方面要求)。我用 css 浮动来这样做。但在 div 中得到混合的结果。为什么?光是像,导航栏,侧面栏视图中,等有一些 othaer 元素......我的代码如下;

 foreach (var item in Model)
    {



        if (@item.CreatedBy == item.UserId)
        {
    <div style="float: right; width: 580px;">

        <div class="panel panel-info" style="width:500px;margin-right:50px">
            <a href="#" class="close" data-dismiss="alert">&times;</a>
            <div class=" panel-heading">
                <h3 class="panel-title">Notification @counter1</h3>
            </div>
            <div class="panel-body">
                <p>Event is created by yourself .Budget of the event is @item.Budget <p>

                    @if (item.IsAccepted)
                            {
                    <p>You have accept the invitation!!!</p>
                            }

                    @if (!item.IsAccepted)
                            {
                        <p>You haven't accept the invitation yet!!!!</p>
                            }

                    @{counter1++;}

                </div>
            </div>
            <br />
        </div>

        }


    else

    {
    <div style="width: 580px; float: left">
        <div class="panel panel-info" style="width:500px;margin-left:250px;">
            <a href="#" class="close" data-dismiss="alert">&times;</a>
            <div class=" panel-heading">
                <h3 class="panel-title">Notification @counter2</h3>
            </div>
            <div class="panel-body">
                <p>Event is created by @item.Email .Budget of the event is @item.Budget <p>

                    @if (item.IsAccepted)
                    {
                    <p>You have accept the invitation!!!</p>
                    }

                    @if (!item.IsAccepted)
                    {
                        <p>You haven't accept the invitation yet!!!!</p>
                    }

                    @{counter2++;}

                </div>
            </div>
            <br />
        </div>
        }

    } 

解决方法 1:

你所需要的是 css 属性"清除︰ 右"和"清除︰ 左"为您的 div

然而,一旦你使用它们你会发现接下来的问题 — — 你的 div 左、 右两边之间会有垂直的空白。那是因为你将新 div 的权利在 foreach 循环中放入body元素的 html 页面。要正确,应首先创建两个容器 (div) 向其应分别添加包含数据你 div。

不幸的是,与你当前的实现,你会有两次-遍历您的模型,一次用来填满的合适的容器与 div,然后再次向填满的左的容器。

更好的方法将创建视图模型包含两个 collectios 的对象的当前使用的例如︰

public class MyViewModel
{
    public IList<MyModel> Invitations { get; set; }

    public IList<MyModel> Requests { get; set; }
}

并将其用作您的视图模型

@model MyApplication.Models.MyViewModel.

这种方法,你还删除一些逻辑视图,这是一件好事。

这里是更新后的代码为您使用 ViewModel 作为视图的模型的视图︰

  @model MvcApplication1.Controllers.MyViewModel

@{
    int counter1 = 0, counter2 = 0;
}

<div style="float: right; width: 580px; clear:right">
    <span>Invitations</span>
    @foreach (var item in @Model.Invitations)
    {
        if (@item.CreatedBy == item.UserId)
        {
            <div>
                <div class="panel panel-info">
                    <a href="#" class="close" data-dismiss="alert">&times;</a>
                    <div class=" panel-heading">
                        <h3 class="panel-title">Notification @counter1</h3>
                    </div>
                    <div class="panel-body">
                        <p>Event is created by yourself .Budget of the event is @item.Budget <p>

                            @if (item.IsAccepted)
                            {
                                <p>You have accept the invitation!!!</p>
                            }
                            else
                            {
                                <p>You haven't accept the invitation yet!!!!</p>
                            }

                            @{counter1++;}
                    </div>
                </div>
                <br />
            </div>
        }
    }
</div>

<div style="float: left; width: 580px; clear:left">
    <span>Requests</span>
    @foreach (var item in @Model.Requests)
    {
        <div>
            <div class="panel panel-info">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <div class=" panel-heading">
                    <h3 class="panel-title">Notification @counter2</h3>
                </div>
                <div class="panel-body">
                    <p>Event is created by @item.Email .Budget of the event is @item.Budget <p>

                        @if (item.IsAccepted)
                        {
                            <p>You have accept the invitation!!!</p>
                        }
                        else
                        {
                            <p>You haven't accept the invitation yet!!!!</p>
                        }

                        @{counter2++;}
                    </div>
            </div>
            <br />
        </div>
    }
</div>

:) 祝你好运

编辑︰ 页面外观使用后快速查找提供解决方案︰ https://jsfiddle.net/nh8Ls531/

官方微信
官方QQ群
31647020