Click here to Skip to main content
15,891,431 members
Search within:


How can I add css styles to html block from controller action in MVC C#
Please Sign up or sign in to vote.
3.00/5 (2 votes)
See more:
C#
MVC
I have an html string with div, html controls, tables etc in controller action. These all controls have class name already.But while passing the html to controller action these class style is not getting. So I want to add css style to these controls in the html string from controller action. Can anybody tell me the answer?

My controller action is:
[System.Web.Mvc.HttpPost]
public JsonResult GeneratePdf(string html)
{
html=
XML
<div class="proposalContainer">




                        <span style="width:100%; font-size:25px; color:#50B6FB;" id="spnProposalHeaddiv"><p style="color:#B1B0C0;">Proposal: </p><b>test pdf</b></span><div class="section" id="section-1" data-status="saved" data-index="1" style="display: block;"><div class="dynamic" id="block-1" data-contenttype="price" data-status="saved" style="display: block;"><div class="edited" style="display: block;">
            <div class="proposalContentName">
                List Hosting

            </div>
            <div class="proposalText">
                <div class="table_areaa">

                    <table class="table priceTable table-condensed pricing_table" id="myTable" style="border: 1px solid #b9bdc2;">
                                        <thead class="table_head">
                                            <tr>
                                                <th class=" ">Name/Description</th>
                                                <th class=" ">Price/Unit</th>
                                                <th class="  ">Qty</th>
                                                <th class="">Subtotal</th>

                                                  <th class=""></th>
                                                  <th class="" style="display:none;"></th>
                                                 <th class="" style="display:none;"></th>
                                                   <th class="" style="display:none;"></th>
                                            </tr>
                                        </thead>
                                        <tfoot>
                                            <tr class="totalContainer">
                                                <td colspan="3" class="text-right price_footerstyle" id="sumoftotalstd" style="text-align:right;">
                                                    <label>Total</label></td>
                                                <td colspan="2" class="price_footerstyle">BRL <span id="sumofsubtotaltdpreview">4350</span></td>

                                            </tr>



                                            <tr class="totalContainer">
                                                <td colspan="3" class="text-right price_footerstyle" id="grandtotaldisplaytd" style="text-align:right;">
                                                    <label>Grand Total</label></td>
                                                <td colspan="2" class="price_footerstyle">BRL <span id="grandtotaltdpreviewvalue">4259.52</span></td>

                                            </tr>

                                             <tr class="totalContainer" id="totaldiscountfixedtr" style="display: none;">
                                                <td colspan="7" class="text-right price_footerstyle" id="totaldiscountinputingfixtd"></td>
                                                <td class="text-right price_footerstyle">

                                                    <input type="text" value="4" id="txtfinaldiscount" class="form-control mx100"></td>
                                              <td class="price_footerstyle"></td>
                                            </tr>
                                            <tr class="totalContainer" id="totaltaxtr" style="display:none;">
                                                <td colspan="7" class="text-right price_footerstyle" id="totaltaxtd">
                                                    <label>Tax(%)</label></td>
                                                <td class="text-right price_footerstyle">
                                                    <input type="text" id="txtfinaltax" value="2" class="form-control mx100"></td>
                                              <td class="price_footerstyle"></td>
                                            </tr>

                                        </tfoot>
                                        <tbody class="table_body">

                                                  <tr id="H_1b04437868ac4ef1801d6aa3955720a6">
                                                      <td class="price_main" colspan="4" style="background-color: #eff4f6;">

                                                          Price Items
                                                      </td>
                                                      <td class="price_main" style="background-color: #eff4f6;"></td>
                                                  </tr>
                                                    <tr id="C_1b04437868ac4ef1801d6aa3955720a6">

                                                             <td class="price_services" style="width: 460px !important; color: #565555;"><span> Host4 <span style="color:#C4B6B0;">/</span><br> des </span> </td>
                                                        <td class="price_services" style="color: #565555;"><span> 650 / h  </span></td>
                                                        <td class="price_services" style="color: #565555;" id="QEC__C_1b04437868ac4ef1801d6aa3955720a6" onclick="editquantity(this.id);"><span> 3  </span></td>
                                                        <td class="price_services" style="color: #565555;"><span> 1950</span> </td>
                                                        <td class="price_services" style="width:100px;text-align: center;color:#F4F8FA;">

                                                                <span>Not Optional</span>
                                                                                                                                                                              </td>
                                                            <td id="discounttd" class="price_services" style="color:#CCC9C9;display: none;"><span>0 </span></td>
                                                            <td id="taxtd" class="price_services" style="color:#CCC9C9;display: none;"><span>0 </span></td>
                                                           <td id="quantityeditabletd" class="price_services" style="color:#CCC9C9;display: none;"><span>True </span></td>
                                                          <td id="optionaltd" class="price_services" style="color:#CCC9C9;display: none;"><span>False </span></td>
                                                         <td id="servicekeytd" class="price_services" style="color:#CCC9C9;display: none;"><span>1b04437868ac4ef1801d6aa3955720a6 </span></td>
                                                    </tr>
                                                    <tr id="C_ab66ccb1494943da8457373ef1edd7ac">

                                                            <td class="price_services" style="width: 460px !important; color: #CCC9C9;"><span>Host3 <span style="color: #C4B6B0;">/</span><br>
                                                                des </span></td>
                                                            <td class="price_services" style="color: #CCC9C9;"><span>500 / h  </span></td>
                                                            <td class="price_services" style="color: #CCC9C9;" id="QEC__C_ab66ccb1494943da8457373ef1edd7ac" onclick="editquantity(this.id);"><span>8  </span></td>
                                                            <td class="price_services" style="color: #CCC9C9;"><span>4000</span> </td>



                                                         <td class="price_services" style="width:100px;text-align: center;color:#F4F8FA;">
                                                                                                                                                                                       <input type="checkbox" id="chk_ab66ccb1494943da8457373ef1edd7ac" name="chk" value="false" onchange="calculateOptionalAmount(this.id);">
                                                        </td>
                                                            <td id="discounttd" class="price_services" style="color:#CCC9C9;display: none;"><span>0 </span></td>
                                                            <td id="taxtd" class="price_services" style="color:#CCC9C9;display: none;"><span>0 </span></td>
                                                        <td id="quantityeditabletd" class="price_services" style="color:#CCC9C9;display: none;"><span>False </span></td>
                                                            <td id="optionaltd" class="price_services" style="color:#CCC9C9;display: none;"><span>True </span></td>
                                                           <td id="servicekeytd" class="price_services" style="color:#CCC9C9;display: none;"><span>ab66ccb1494943da8457373ef1edd7ac </span></td>
                                                    </tr>
                                                    <tr id="C_70e03542d4db439da1e31f81349b282e">

                                                            <td class="price_services" style="width: 460px !important; color: #CCC9C9;"><span>Host2 <span style="color: #C4B6B0;">/</span><br>
                                                                desc </span></td>
                                                            <td class="price_services" style="color: #CCC9C9;"><span>2000 / h  </span></td>
                                                            <td class="price_services" style="color: #CCC9C9;" id="QEC__C_70e03542d4db439da1e31f81349b282e" onclick="editquantity(this.id);"><span>3  </span></td>
                                                            <td class="price_services" style="color: #CCC9C9;"><span>6000</span> </td>



                                                         <td class="price_services" style="width:100px;text-align: center;color:#F4F8FA;">
                                                                                                                                                                                       <input type="checkbox" id="chk_70e03542d4db439da1e31f81349b282e" name="chk" value="false" onchange="calculateOptionalAmount(this.id);">
                                                        </td>
                                                            <td id="discounttd" class="price_services" style="color:#CCC9C9;display: none;"><span>0 </span></td>
                                                            <td id="taxtd" class="price_services" style="color:#CCC9C9;display: none;"><span>0 </span></td>
                                                        <td id="quantityeditabletd" class="price_services" style="color:#CCC9C9;display: none;"><span>True </span></td>
                                                            <td id="optionaltd" class="price_services" style="color:#CCC9C9;display: none;"><span>True </span></td>
                                                           <td id="servicekeytd" class="price_services" style="color:#CCC9C9;display: none;"><span>70e03542d4db439da1e31f81349b282e </span></td>
                                                    </tr>
                                                    <tr id="C_6312208f0fbc47579dfdb98111e814e6">

                                                            <td class="price_services" style="width: 460px !important; color: #565555;"><span>Host1 <span style="color: #C4B6B0;">/</span><br>
                                                                descp </span></td>
                                                            <td class="price_services" style="color: #565555;"><span>1200 / h  </span></td>
                                                            <td class="price_services" style="color: #565555;" id="QEC__C_6312208f0fbc47579dfdb98111e814e6" onclick="editquantity(this.id);"><span>2  </span></td>
                                                            <td class="price_services" style="color: #565555;"><span>2400</span> </td>



                                                         <td class="price_services" style="width:100px;text-align: center;color:#F4F8FA;">
                                                                <span>Not Optional</span>
                                                                                                                                                                               </td>
                                                            <td id="discounttd" class="price_services" style="color:#CCC9C9;display: none;"><span>0 </span></td>
                                                            <td id="taxtd" class="price_services" style="color:#CCC9C9;display: none;"><span>0 </span></td>
                                                        <td id="quantityeditabletd" class="price_services" style="color:#CCC9C9;display: none;"><span>False </span></td>
                                                            <td id="optionaltd" class="price_services" style="color:#CCC9C9;display: none;"><span>False </span></td>
                                                           <td id="servicekeytd" class="price_services" style="color:#CCC9C9;display: none;"><span>6312208f0fbc47579dfdb98111e814e6 </span></td>
                                                    </tr>
                                        </tbody>
                                    </table>

                    <div id="input" style="display: none;">
                        <input type="text" placeholder="Quantity" size="16" id="txtQuantityEdit" value="0" style="width: 75px; height: 32px;" onkeypress="return isNumber(event);" load="hide()">

                    </div>

                </div>
            </div>
        </div></div></div><div class="section" id="section-2" data-status="saved" data-index="2" style="display: none;"><div class="dynamic" id="block-2" data-contenttype="text" data-status="saved" style="display: block;"><div class="edited" style="display: block;"><div class="proposalContent"><div class="proposalContentName content"><h5>My Text</h5></div><div class="proposalText"><p>gddgfdf fghfdg vbvb bvnbv rtret</p>
</div></div></div></div></div>


                            <div id="signcomedivinpdf"><!--?xml version="1.0"?-->

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="100px" style="margin-top:25px;">
    <g fill="#ffffff">
        <rect x="0" y="0" width="200px" height="100px"></rect>
        <g fill="none" stroke="#000000" stroke-width="2">
            <polyline points="56.44,62.78 56.44,64.78"></polyline>
            <polyline points="50.44,87.78 52.44,87.78 53.44,87.78 54.44,84.78 55.44,82.78 56.44,81.78 57.44,77.78 60.44,73.78 60.44,71.78 60.44,70.78 60.44,69.78 60.44,67.78 60.44,65.78 60.44,62.78 60.44,60.78 60.44,58.78 60.44,54.78 60.44,52.78 59.44,51.78 59.44,49.78 57.44,49.78 56.44,49.78 56.44,48.78 54.44,48.78 53.44,47.78 52.44,47.78 52.44,48.78 52.44,49.78 53.44,49.78 57.44,51.78 60.44,51.78 61.44,52.78 62.44,53.78 64.44,54.78 65.44,55.78 67.44,57.78 70.44,59.78 72.44,61.78 74.44,65.78 75.44,67.78 76.44,69.78 77.44,70.78 79.44,71.78 80.44,73.78 81.44,74.78 81.44,75.78 81.44,77.78 81.44,79.78 77.44,80.78 75.44,80.78 73.44,80.78 66.44,82.78 64.44,83.78 63.44,83.78 62.44,83.78 60.44,83.78 57.44,83.78 55.44,82.78 54.44,79.78 52.44,75.78 52.44,69.78 52.44,64.78 52.44,60.78 52.44,58.78 52.44,57.78 53.44,57.78 54.44,58.78 56.44,58.78 57.44,60.78 60.44,60.78 63.44,61.78 65.44,61.78 66.44,62.78 69.44,63.78 70.44,63.78 71.44,63.78 72.44,63.78 73.44,63.78 74.44,63.78 75.44,63.78 76.44,63.78 77.44,63.78 80.44,64.78 80.44,65.78 82.44,65.78 83.44,65.78 85.44,65.78 90.44,65.78 95.44,63.78 102.44,59.78 104.44,57.78 106.44,55.78 106.44,54.78 107.44,54.78 107.44,55.78 109.44,55.78 110.44,55.78 111.44,55.78 113.44,55.78 117.44,51.78 121.44,47.78 122.44,45.78 123.44,47.78 125.44,48.78 125.44,49.78 129.44,52.78 132.44,53.78 133.44,53.78 134.44,53.78 135.44,53.78 137.44,53.78 139.44,53.78 139.44,50.78 139.44,47.78 140.44,43.78 142.44,39.78 147.44,34.78 147.44,33.78 149.44,33.78 150.44,33.78 152.44,33.78 153.44,34.78 154.44,35.78 159.44,41.78"></polyline>
        </g>
    </g>
</svg></div><div class="clear" id="divClearsectionsstyles"></div>
                        </div>





//////////////////////////////////////////////pdf convert new
          var example_css = @&quot;.proposalContent {margin-bottom: 10px;cursor: default;} .proposalContentName{font-weight: 700;font-size: 16px;padding: 10px;  border-top-left-radius: 3px;border-top-right-radius: 3px;} .proposalContent h5{font-weight: bold;}&quot;;
          example_css += @&quot;.proposalText {font-weight: 400;color: #999999;padding: 10px;border-top: none;border-bottom-left-radius: 3px;border-bottom-right-radius: 3px;}&quot;;
          example_css += @&quot;.table_areaa {padding: 0px;margin: 0px;width: 100%;}&quot;;
          example_css += @&quot;.table {width: 100%;margin-bottom: 20px;border-collapse: collapse;border-spacing: 0;}&quot;;
          example_css += @&quot;.table &gt; thead &gt; tr &gt; th,.table &gt; tbody &gt; tr &gt; th,.table &gt; tfoot &gt; tr &gt; th,.table &gt; thead &gt; tr &gt; td,.table &gt; tbody &gt; tr &gt; td,.table &gt; tfoot &gt; tr &gt; td {padding: 8px;line-height: 1.428571429;vertical-align: top;}&quot;;
          example_css += @&quot;.table &gt; thead &gt; tr &gt; th {vertical-align: bottom;border-bottom: 2px solid #dddddd;}&quot;;
          example_css += @&quot;.table_head {display: table-header-group;background-color: #e2eef4;color: #abb0b0;}&quot;;
          example_css += @&quot;.table_body {background-color: #eef8fd;color: #9a9c9e;}&quot;;
          example_css += @&quot;.row {margin-right: -15px;margin-left: -15px;}&quot;;
          example_css += @&quot;.images ul{padding: 0 0 0 0;margin: 0 0 0 0;}&quot;;
          example_css += @&quot;.images ul li{list-style: none;margin-bottom: 25px;width: 20%;}&quot;;
          example_css += @&quot;.col-lg-2{  position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;} .col-md-2{position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;} .col-sm-3{position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;} .col-xs-4{position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;}&quot;;
          example_css += @&quot;.images ul li img{cursor: pointer;width: 100%;list-style: none;}&quot;;
          example_css += @&quot;.img{max-width: 100%;vertical-align: middle;border: 0;}&quot;;

}




I want to add example_css styles to html string controls in this code
Posted
Updated 10-Nov-15 0:38am
v2
Add a Solution
Comments
[no name] 10-Nov-15 6:10am    
Can you please share part of your code that how are you trying?
Member 10752313 10-Nov-15 6:29am    
var example_css = @".proposalContent {margin-bottom: 10px;cursor: default;} .proposalContentName{font-weight: 700;font-size: 16px;padding: 10px; border-top-left-radius: 3px;border-top-right-radius: 3px;} .proposalContent h5{font-weight: bold;}";
example_css += @".proposalText {font-weight: 400;color: #999999;padding: 10px;border-top: none;border-bottom-left-radius: 3px;border-bottom-right-radius: 3px;}";
example_css += @".table_areaa {padding: 0px;margin: 0px;width: 100%;}";
example_css += @".table {width: 100%;margin-bottom: 20px;border-collapse: collapse;border-spacing: 0;}";
example_css += @".table > thead > tr > th,.table > tbody > tr > th,.table > tfoot > tr > th,.table > thead > tr > td,.table > tbody > tr > td,.table > tfoot > tr > td {padding: 8px;line-height: 1.428571429;vertical-align: top;}";
example_css += @".table > thead > tr > th {vertical-align: bottom;border-bottom: 2px solid #dddddd;}";
example_css += @".table_head {display: table-header-group;background-color: #e2eef4;color: #abb0b0;}";
example_css += @".table_body {background-color: #eef8fd;color: #9a9c9e;}";
example_css += @".row {margin-right: -15px;margin-left: -15px;}";
example_css += @".images ul{padding: 0 0 0 0;margin: 0 0 0 0;}";
example_css += @".images ul li{list-style: none;margin-bottom: 25px;width: 20%;}";
example_css += @".col-lg-2{ position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;} .col-md-2{position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;} .col-sm-3{position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;} .col-xs-4{position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;}";
example_css += @".images ul li img{cursor: pointer;width: 100%;list-style: none;}";
example_css += @".img{max-width: 100%;vertical-align: middle;border: 0;}";

string html=<div class="proposalContainer">

<span style="width:100%; font-size:25px; color:#50B6FB;" id="spnProposalHeaddiv"><p style="color:#B1B0C0;">Proposal: </p>test pdf</span><div class="section" id="section-1" data-status="saved" data-index="1" style="display: block;"><div class="dynamic" id="block-1" data-contenttype="price" data-status="saved" style="display: block;"><div class="edited" style="display: block;">
<div class="proposalContentName">
List Hosting

</div>
<div class="proposalText">
<div class="table_areaa">

<table class="table priceTable table-condensed pricing_table" id="myTable" style="border: 1px solid #b9bdc2;">
<thead class="table_head">
<tr>
<th class=" ">Name/Description</th>
<th class=" ">Price/Unit</th>
<th class=" ">Qty</th>
<th class="">Subtotal</th>

<th class=""></th>
<th class="" style="display:none;"></th>
<th class="" style="display:none;"></th>
<th class="" style="display:none;"></th>
....
I want to add example_css styles in html string controls from controller action?
[no name] 10-Nov-15 6:34am    
Add code to your question by clicking on improving answer.
Provide code for controller and view individually.

Thanks
Richard Deeming 10-Nov-15 8:46am    
You've already added the CSS class names to your HTML markup. Where are you stuck?
Member 10752313 10-Nov-15 22:58pm    
Ya class name added but its style is not applied to the block while downloading. I want the style to be set before downloading the block?

1 solution

I had fixed the problem by setting the inline style from jquery before the ajax call. Now it works fine.
 
Share this answer
 
Posted
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
How to search and inject with vanilla JS in a style tag the CSS clasess used in HTML document?
Redirecting html pages to controller action in mvc
How can create simple text editor with HTML, CSS?
Asp.net MVC renders 2 "form action" statements for the same form when in responsive mode
Div style messed up when zooming in // HTML CSS
Add/Edit in MVC using same Action and Controller
how to add css to html file
Can we add new attribute in html controls (not in html 5 using data keyword)
The positions of div block in HTML/CSS
Dynamic Insertion of CSS block into Webbrowser Control

Advertise
Privacy
Cookies
Terms of Use
Last Updated 10 Nov 2015
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web03 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900