Question

我正在尝试查看剃刀视图上的通知。我使用foreach循环来获取模型中的数据。我想在视图中显示“邀请”和“请求”div，就像在两个表列中一样。在另一个邀请之后邀请一个邀请。在另一个请求之后请求下来。（在一列中所有邀请和请求在另一列）..我用css浮动来做这个..但在divs得到混合结果..为什么？在视图中有一些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>
        }

    }

Answer 1

你需要的是你的div的css属性“清晰：正确”和“清除：左”。

然而，一旦你使用它们，你会发现下一个问题 - 你的div在右侧和左侧之间会有垂直间隙。这是因为你将新的div放在foreach循环中的html页面的 body 元素中。为了使它正确，您应该首先创建两个容器（div），您应该分别添加包含数据的div。

很遗憾，对于您当前的实现，您必须迭代模型两次 - 一次用div填充正确的容器，然后再次填充左侧容器。

更好的方法是创建一个 ViewModel ，其中包含您当前正在使用的两个对象集合，例如：

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

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

并将其用作View的模型

@model MyApplication.Models.MyViewModel。

通过这种方法，您还可以从视图中删除一些逻辑，这是一件好事。

以下是使用ViewModel作为View模型的视图的更新代码：

  @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/

如何在剃刀视图中浮动div到两侧

1 个答案: