我如何从MVC C#中的控制器操作向HTML块添加CSS样式 [英] How can I add css styles to html block from controller action in MVC C#
本文介绍了我如何从MVC C#中的控制器操作向HTML块添加CSS样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在控制器操作中有一个div，html控件，表格等html字符串.这些控件都有类名，但是在将html传递给控制器动作时却没有得到这些类样式.所以我想在控制器动作的html字符串中向这些控件添加css样式.有人能告诉我答案吗?
我的控制器动作是:
[System.Web.Mvc.HttpPost]
公共JsonResult GeneratePdf(字符串html)
{
html =
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=
<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 = @".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;}";
}
I want to add example_css styles to html string controls in this code
I want to add example_css styles to html string controls in this code
推荐答案
I had fixed the problem by setting the inline style from jquery before the ajax call. Now it works fine.
I had fixed the problem by setting the inline style from jquery before the ajax call. Now it works fine.
这篇关于我如何从MVC C#中的控制器操作向HTML块添加CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
