Wie man ein Etikett mit Daten in MVC sauber gestaltet?

Ich hatte eine Webseite mit Bootstrap-Panel in MVC mit 3 Spalten, die mit dem PC-Bildschirm behoben. Entwurf wie unten:Wie man ein Etikett mit Daten in MVC sauber gestaltet?

Employee Name :    Address :    Email  : 

Employee Age :    Country :    Contact No :

Dieser reparierte innerhalb des PC Schirmes. Aber das Problem ist, wenn der Name/Adresse/E-Mail länger ist, dann werden die Daten wie folgt angezeigt.

Employee Name : Amar  Address : XXXXXXXX  Email  : [email protected] 
Arvind Antony    XXXX      gmail.com     
Employee Age : 26   Country : yyyyy   Contact No :

Aber ich möchte wie folgt anzeigen, um sauber zu liefern.

Employee Name :Amar  Address : XXXXXXXX  Email  :[email protected] 
       Arvind    XXXX       gmail.com     
Employee Age : 26  Country : yyyyy   Contact No :

Wie Display wie folgt zu machen? Der Code, den wir in View verwendet wird, ist

<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" alt="" 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>

Ich habe nur ein Etikett Satzcode für die Probe. Die Ausgabe, die wir mithilfe von ID mit jquery abrufen. Innerhalb der Jquery-Funktion verwende ich die folgenden Zeilen Daten von meinem Tisch mit einem 6-Spalten-Layout

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

Quelle

2017-05-22 Ben77

Setzen Sie den Mitarbeiternamen in einer anderen Spalte als der Text „Mitarbeitername“. –

Absolut, Sie müssen Spaltenstruktur verwenden, um dies zu erreichen, wie Herr Lister sagt - auch Ihren Code, wenn Sie Hilfe mit dieser Struktur benötigen. – Terrance00

Ich aktualisiere meine Frage mit Code. Ist dieser Code genug? – Ben77

Sie müssen experimentieren, um zu bekommen.

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

Sie teilen im Grunde eine Spalte sowohl für das Label und seinen Wert, warum Sie das erwartete Layout nicht bekommen ist. Stattdessen müssen Sie diese in ihre eigenen Spalten aufteilen.

So beenden Sie mit Paaren von Spalten nach oben:

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

Quelle

2017-05-23 02:31:09 Jasen

Entschuldigung, ich habe mit diesem Code verwirrt. Aus welcher Zeile muss ich meinen Code mit deinem Code ändern? – Ben77

Sie teilen grundsätzlich eine Spalte für die Bezeichnung und ihren Wert. Sie müssen diese in ihre eigenen Spalten aufteilen. – Jasen

entschuldige mich für die späte Antwort .. Bisher habe ich versucht, Ihren Code, aber die Ausgabe nicht wie erwartet. aber ich dachte, dass dein Code korrekt ist, dass ich vorher Code zuordnen muss. damit ich tmrw updaten kann, ob dieser funktioniert oder nicht .. – Ben77

Wie man ein Etikett mit Daten in MVC sauber gestaltet?

Antwort

Verwandte Themen