如何在 MVC 中巧妙地设计带有数据的标签？

Posted 2023-03-05

【中文标题】如何在 MVC 中巧妙地设计带有数据的标签？

【英文标题】：How to design label with data in MVC neatly?

【发布时间】：2017-10-21 22:53:17

【问题描述】：

我使用 mvc 中的引导面板设计了一个网页，其中 3 列固定在 PC 屏幕上。设计如下：

Employee Name  :             Address  :                Email        : 

Employee Age   :             Country  :                Contact No   :

这个固定在 PC 屏幕内。但问题是如果姓名/地址/电子邮件较长，则数据显示如下。

Employee Name  :  Amar       Address  : XXXXXXXX       Email        : abcde@
Arvind Antony                XXXX                      gmail.com                
Employee Age   :  26         Country  : yyyyy          Contact No   :

但我想整齐地显示如下。

Employee Name  :Amar       Address  : XXXXXXXX       Email        :abcde@
                Arvind                XXXX                         gmail.com                
Employee Age   : 26        Country  : yyyyy          Contact No   :

如何进行这样的显示？ 我们在 View 中使用的代码是

<div class="clearfix"></div>
            <div class="col-sm-12 col-md-12">
                <div class="panel-group" id="accordion">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" @*data-parent="#accordion"*@ href="#collapse1"> <span class="glyphicon glyphicon-triangle-bottom"></span>Personal Particulars</a> </h4>
                        </div>
                        <div id="collapse1" class="panel-collapse collapse in">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-sm-6 col-md-3">
                                        <p class="mar_top_20"><img id="EmpImage" src="~/Content2/dist/img/dummy_image.jpg"   class="img-responsive"></p>
                                    </div>
                                    <div class="col-sm-6 col-md-3">
                                        <p class="form_text1">
                                            <span>Full Name</span> :
                                            <strong id="EmployeeName">-</strong> </p></div></div></div>

我只给出了一个标签集代码作为示例。 我们使用 id 使用 jquery 检索的输出。在 jquery 函数中，我使用以下行从表中获取数据

 $('#EmployeeName').text(response.EmpName);

【问题讨论】：

将员工姓名放在与文本“员工姓名”不同的列中。

当然，您需要使用列结构来实现这一点，正如 Lister 先生所说 - 如果您需要有关该结构的帮助，也可以发布您的代码。

我用代码更新了我的问题。这段代码够吗？

我没有在上述设计中使用表格，而且我是 MVC 和引导程序的新手。请帮忙

【参考方案1】：

您需要尝试使用 6 列布局。

<div class="container">
  <div class="row r1">
    <div class="col-sm-12">
      <div class="row">
        <div class="col-sm-2">Label1</div><div class="col-sm-2">Value1 Value1 Value1</div>
        <div class="col-sm-2">Label2</div><div class="col-sm-2">Value2 Value2 Value2</div>
        <div class="col-sm-2">Label3</div><div class="col-sm-2">Value3 Value3 Value3</div>
      </div>
    </div>
  </div>
</div>

您基本上是在为标签及其值共享一列，这就是您没有得到预期布局的原因。相反，您需要将它们分成各自的列。

所以你最终得到了成对的列：

<div class="col-sm-2">Employee Name</div>
<div class="col-sm-2"><strong id="EmployeeName"></strong></div>

【讨论】：

对不起，我对这段代码感到困惑。我需要从哪一行用您的代码更改我的代码。？

您基本上是在为标签及其值共享一列。您需要将它们分成各自的列。

为迟到的回复道歉.. 到目前为止，我尝试了您的代码，但输出没有达到我的预期。但我认为你的代码是正确的，我需要重新分配一些以前的代码。所以我会更新你 tmrw，不管这个是否有效..