locked
how to display a content better look RRS feed

  • Question

  • User-91993069 posted

    I add my data in table format but not look good
                
    I want to make content batter look and good

    see current output

    I am fatching vacancy data from admin side and display them client side

    HomeController.cs

            [HttpGet]
            public async Task<ActionResult> Career()
            {
                HttpClient client = new HttpClient();
                HttpResponseMessage responseMessage = client.GetAsync("https://localhost:44325/Home/DisplayVacancyData").Result;
    
                if (responseMessage.IsSuccessStatusCode)
                {
                    //data = await responseMessage.Content.ReadAsAsync();
                    //List<Vacancy> products = await responseMessage.Content.ReadAsAsync<List<Vacancy>>();
                    string result = await responseMessage.Content.ReadAsStringAsync();
                    List<Vacancy> vaca = JsonConvert.DeserializeObject<List<Vacancy>>(result);
                    //ViewBag.message = vaca + "<br />";
    
                    if(vaca.Count==0)
                    {
                        ViewBag.message = "No content Available";
                    }
                    else
                    {
                        return View("Career", vaca);
                    }
                }
                return View("Career");
            }

    carrer.cshtml

    @model IEnumerable<projectname.Models.Vacancy>
    
    <style type="text/css">
        .actionlink {
            font-size: 20px;
            color: cornflowerblue;
        }
    </style>
    
    <div style="font-size:18px;">
        <table class="table table-responsive">
    
            <thead>
                <tr>
                    <th>Vacancy Title</th>
                    <th>Vacancy Position</th>
                    <th>Vacancy Experience</th>
                    <th>Vacancy JobDescription</th>
                    <th>Vacancy RequiredSkil</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
    
                @if (Model == null)
                {
                    <tr>
                        <td>@ViewBag.message</td>
                    </tr>
                }
                else
                {
                    foreach (var carr in Model)
                    {
                        <tr>
                            <td>@carr.vacancytitle</td>
                            <td>@carr.vacancyposition</td>
                            <td>@carr.vacancyexperience</td>
    
                            @{string data = @carr.vacancyjobdescription;
    
                                data = data.Replace(".", "<br/>" + "-");
                            }
                            <td>@Html.Raw(data)</td>
    
                            @{string data1 = @carr.vacancyrequiredskill;
    
                                data1 = data1.Replace(".", "<br/>" + "-");
                            }
    
                            <td>@Html.Raw(data1)</td>
                            <td>
                               <a href="#" id="apj" data-toggle="modal" data-target="#myModal" class="actionlink">Apply</a>
                            </td>
                        </tr>
    
                    }
                }
            </tbody>
        </table>
    </div>

    see above content is not good look I want to make batter look

    what I am trying:

               

    data = data.Replace(".", "<br/>" + "-");  //I am using this line because look batter .(dot) replace with the - but not good look

    please help

    Monday, September 21, 2020 11:58 AM

Answers

  • User1686398519 posted

    Hi rahulpas, 

    1. You need to check the version of your bootstrap.
      1. If its version is bootstrap 4 or higher, then the usage in the examples provided before will not work.
        • Bootstrap 4 has dropped the Glyphicons icon font.
        • Here is the solution:
          1. You need to install Bootstrap Icons.
            • You can install it through npm, or you can download it directly and copy it to your project directory.
          2. The method I use is to download Bootstrap Icons through this link, and then copy it to the Content directory.
            • You can choose the right one according to your actual situation.
          3. Usage:
      2. If you are bootstrap 3, you can refer to the previous example, but you need to make sure that the page has referenced bootstrap.
    2. @{ var dataarray1 = @carr.vacancyrequiredskill.Substring(0, @carr.vacancyrequiredskill.Length - 1).Split('.'); }
      1. Because the test data you gave at the beginning has an extra "-" at the end, so I guess your original data has a "." at the end. When you replace the ".", the last "." is not needed.
      2. If there is no "." in your data at the end, you can write directly like this:
        • var dataarray1 = @carr.vacancyrequiredskill.Split('.');
      3. Substring can be used to obtain substrings.

    Here is the result.

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 23, 2020 2:27 AM

All replies

  • User475983607 posted

    You have to understand "look good" is not a proper requirement.   I recommend meeting with your team and coming up with actual requirements to achieve a good looking UI design.   You can also look around on the internet for a layout that fits your idea of a "good look".

    Monday, September 21, 2020 12:32 PM
  • User-91993069 posted

    Hello mgebhard

    I am trying to implement this type of design structure

    I have no team 

    I am following above design structure

    I am trying but not not achive above design pattern

    please can you give hint for that

    Monday, September 21, 2020 12:48 PM
  • User475983607 posted

    The image is just a heading and a list.  

    <div>
        <h2>Heading</h2>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </div>

    Form the above, just use CSS to change the bullet, spacing, whatever you like.  This requires you have a basic understanding of HTML and CSS.

    https://www.w3schools.com/cssref/pr_list-style-image.asp

    Monday, September 21, 2020 1:22 PM
  • User1686398519 posted

    Hi rahulpas, 

    You can use Glyphicons to achieve your needs, and you need to use bootstrap.

                @{
                    var dataarray = @carr.vacancyjobdescription.Split('.');
                }
                <td>
                    <dl>
                        @for (var i = 0; i < dataarray.Length; i++)
                        {
                            <dd>
                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                @dataarray[i]
                            </dd>
                        }
                    </dl>
                </td>
                @{
                    var dataarray1 = @carr.vacancyrequiredskill.Substring(0, @carr.vacancyrequiredskill.Length - 1).Split('.');
                }
                <td>
                    <dl>
                        @for (var i = 0; i < dataarray1.Length; i++)
                        {
                            <dd>
                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                @dataarray1[i]
                            </dd>
                        }
                    </dl>
                </td>

    Here is the result.

    Best Regards,

    YihuiSun

    Tuesday, September 22, 2020 2:53 AM
  • User-91993069 posted

    Hello YihuiSun

    thanks for the answer but not work

    font:

    Career.cshtml

    @model IEnumerable<projectname.Models.Vacancy>
    
    <style type="text/css">
        .actionlink {
            font-size: 20px;
            color: cornflowerblue;
        }
    </style>
    
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h2 style="margin-top:150px;">Current Job Openings</h2>
            </div>
            <div class="col-md-4" style="margin-top:155px;">
                
                <a href="#" id="apj" data-toggle="modal" data-target="#myModal" class="actionlink">Apply For Job</a>
            </div>
        </div>
    </div>
    <div style="font-size:18px;">
        <table class="table table-responsive">
    
            <thead>
                <tr>
                    <th>Vacancy Title</th>
                    <th>Vacancy Position</th>
                    <th>Vacancy Experience</th>
                    <th>Vacancy JobDescription</th>
                    <th>Vacancy RequiredSkil</th>
                    <th>Action</th>
                </tr>
    
            </thead>
            <tbody>
    
                @if (Model == null)
                {
                    <tr>
                        <td>@ViewBag.message</td>
                    </tr>
                }
                else
                {
                    foreach (var carr in Model)
                    {
                        <tr>
                            @{
                                var dataarray = @carr.vacancyjobdescription.Split('.');
                            }
                            <td>@carr.vacancytitle</td>
                            <td>@carr.vacancyposition</td>
                            <td>@carr.vacancyexperience</td>
                            <td>
                                <dl>
                                    @for (var i = 0; i < dataarray.Length; i++)
                                    {
                                        <dd>
                                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                            @dataarray[i]
                                        </dd>
                                    }
                                </dl>
                            </td>
                            @{
                                var dataarray1 = @carr.vacancyrequiredskill.Substring(0, @carr.vacancyrequiredskill.Length - 1).Split('.');
                            }
                            <td>
                                <dl>
                                    @for (var i = 0; i < dataarray1.Length; i++)
                                    {
                                        <dd>
                                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                            @dataarray1[i]
                                        </dd>
                                    }
                                </dl>
                            </td>
    
                            <td>
                                <a href="#" id="apj" data-toggle="modal" data-target="#myModal" class="actionlink">Apply</a>
                            </td>
                        </tr>
                    }
                }
            </tbody>
        </table>
    </div>

    I am trying to understood this line but not understood:

    @{ var dataarray1 = @carr.vacancyrequiredskill.Substring(0, @carr.vacancyrequiredskill.Length - 1).Split('.'); }

    here your logic not understood

    0, @carr.vacancyrequiredskill.Length - 1

    I am not understood below length can you please explain

                           @{
                                //int startindex and int length
                                int length = @carr.vacancyrequiredskill.Length - 1;
                                var dataarray1 = @carr.vacancyrequiredskill.Substring(0, length).Split('.');
                            }

    why not display glyphicon icon?

    Tuesday, September 22, 2020 8:37 AM
  • User-91993069 posted

    Hello yihuisun 

    can you help more

    please help

    Tuesday, September 22, 2020 9:57 AM
  • User1686398519 posted

    Hi rahulpas, 

    1. You need to check the version of your bootstrap.
      1. If its version is bootstrap 4 or higher, then the usage in the examples provided before will not work.
        • Bootstrap 4 has dropped the Glyphicons icon font.
        • Here is the solution:
          1. You need to install Bootstrap Icons.
            • You can install it through npm, or you can download it directly and copy it to your project directory.
          2. The method I use is to download Bootstrap Icons through this link, and then copy it to the Content directory.
            • You can choose the right one according to your actual situation.
          3. Usage:
      2. If you are bootstrap 3, you can refer to the previous example, but you need to make sure that the page has referenced bootstrap.
    2. @{ var dataarray1 = @carr.vacancyrequiredskill.Substring(0, @carr.vacancyrequiredskill.Length - 1).Split('.'); }
      1. Because the test data you gave at the beginning has an extra "-" at the end, so I guess your original data has a "." at the end. When you replace the ".", the last "." is not needed.
      2. If there is no "." in your data at the end, you can write directly like this:
        • var dataarray1 = @carr.vacancyrequiredskill.Split('.');
      3. Substring can be used to obtain substrings.

    Here is the result.

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 23, 2020 2:27 AM
  • User-91993069 posted

    I am working with this below template

    https://www.free-css.com/free-css-templates/page257/evolo

    Glyphicons are not supported in Bootstrap 4. - https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp

    and my current bootstrap version is * Bootstrap v4.4.1

    when I use bootstrap 3.3.1 then glyphiicon perfectly work but

    now I am working with bootstrap Bootstrap v4.4.1

    and then I download the bootstrap icon from this link https://github.com/twbs/icons/releases/tag/v1.0.0

    but not work glayphiicon

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <title>@ViewBag.Title - My ASP.NET Application</title>
    
        <!-- Styles -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,600,700,700i&amp;subset=latin-ext" rel="stylesheet">
        <link href="~/Content/bootstrap.css" rel="stylesheet" />
        <link href="~/Content/fontawesome-all.css" rel="stylesheet" />
        <link href="~/Content/swiper.css" rel="stylesheet" />
        <link href="~/Content/magnific-popup.css" rel="stylesheet" />
        <link href="~/Content/styles.css" rel="stylesheet" />
    
        <!-- Favicon  -->
        <link rel="icon" href="~/images/favicon.png">
    </head>
    
    <body data-spy="scroll" data-target=".fixed-top">
    
        <div class="container body-content">
            @RenderBody()
        </div>
    
        @* required for render the scripts *@
        @RenderSection("scripts", false);
    
        @* jquery scripts *@
        <script src="~/Scripts/jquery.min.js"></script>
        <script src="~/Scripts/popper.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script src="~/Scripts/swiper.min.js"></script>
        <script src="~/Scripts/jquery.magnific-popup.js"></script>
        <script src="~/Scripts/validator.min.js"></script>
        <script src="~/Scripts/scripts.js"></script>
    </body>
    </html>
    
    

    career.cshtml 

      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                            @dataarray[i]
    
      <span src="~/bootstrap-icons-1.0.0/chevron-right.svg" aria-hidden="true"></span>
                                            @dataarray1[i]

     

    Wednesday, September 23, 2020 8:22 AM
  • User1686398519 posted

    Hi rahulpas, 

    If you are using bootstrap 4, I have explained to you before and gave a solution.

    1. You need to download it and copy it to your project directory, and then use it like this:
    2. <span>
      <img src="~/Content/bootstrap-icons-1.0.0/chevron-right.svg" width="20" height="20"/>
      </span>

    Best Regards,

    YihuiSun

    Wednesday, September 23, 2020 8:47 AM
  • User-91993069 posted

    hello Yihuisun

    solved now 

    here I am understanding <img instead of span 

    anyway thank you yihuisun

    last two days trying to solve out not solved

    thanks for your help

    Wednesday, September 23, 2020 8:56 AM