Removing the duplicate id in jstl - spring

I am using jstl. In my page there is a loop which creates div's with different ids but i have seen there are some of the div( after loop completion) having the same id which(div) i want to remove or say want to prevent them to be created. I want to achieve it inside the loop itself through jstl. Please help.
Please find the code segment-
<c:forEach var="menuType" items="${menuTypes}" begin="0" varStatus="mCount">
<c:set var="mcnt" value="${mCount.count}"></c:set>
<div class="window" id="window${mcnt}" onmouseout="hideBub('${mcnt}');" style="top:${mcnt*200}px">
<div id="inner-cont${mcnt}" class="inner-cont" align="center" onmouseover="showBubble('${mcnt}');">
${menuType.functionName}(<span id="totRecord"></span>)
<div class="bubble" id="bubble${mcnt}" style="margin-left:50px;" onmouseout="hideBub('${mcnt}');">
<a href="#">
<span>[+] Add New
</span>
</a>
<hr>
<div class="box">
<div class="box-content">
<table width="100%" class="hovertable">
<tbody>
<tr><td></td></tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="dispRec${mcnt}" class="dispRec"></div>
</div>
<div align="center" class="btnContainer" style="width:90px;">
<span class="linkButton">View</span>
<span class="linkButton">Edit</span>
<span class="linkButton">Delete</span>
</div>
<div align="center" class="btnContainer" style="width:47px;float: right">
<span class="linkButton" style="display: inline-block;padding: 1px;margin-right: 2px">
Analysis
</span>
</div>
</div>
</c:forEach>
</div>

Related

How to concatenate th:text and static content with html tags in Thymeleaf?

<div th:switch="${data.totalPercentage}">
<td th:case="100" th:text="${data.totalPercentage}"/>
<td th:case="*" th:text="${data.totalPercentage + '*'}" class="alert alert-warning font-weight-bold"/>
</div>
Above expression works but I can not concatenate html tag with th:text. I would like to replace * with fontawesome flag icon <i class="fas fa-flag"></i>. Any suggestion?
No real reasons to concatenate here, you should be thinking in terms of HTML.
<div th:switch="${data.totalPercentage}">
<td th:case="100" th:text="${data.totalPercentage}"/>
<td th:case="*" class="alert alert-warning font-weight-bold">
<span th:text="${data.totalPercentage}" /> <i class="fas fa-flag"></i>
</td>
</div>

MVC.NET Core Bootstrap-Modal forms with multi-parameters don't reach Post controller

I have a web app using modal forms to confirm some of the actions my users (or admin) might be allowed to do. The modal form setup is taken from Microsoft's IdentitySampleApplication project and been incorporated for my project in mostly the same way with this one difference. I am using the generic modal forms. I am trying to allow a user to have multiple user roles on an application (while their sample presumes the user will only have one role.)
I am now working out the deletion of roles for this type multi-role scenario for maintenance. I should point out that all instances of code involving only one id work fine, it is this one instance with 2 ids that fails to pass through either of the ids I need at the controller.
The deletion of a user role requires the key of the user and the role.
My controller has a bit of code like the following to accept the ids and present a modal form, which works quite nicely.
[HttpGet]
public IActionResult DeleteUserRole( string userid, string roleid ){...}
The HttpPost portion looks something like this
[HttpPost]
public IActionResult DeleteUserRole( string userid, string roleid, IFormCollection form ){...}
however, this second action never gets the ids that were passed to the modal forms get method.
In all methods that only have a single routing id, I have no issues. It is only this one method that vexes me. I call it from this link. Note the two asp-route variables and I suspect this is at the heart of my issue, but the get call is fine with this, it is the post that has no values:
<a id="deleteRoleModal" asp-action="DeleteUserRole"
asp-route-userid="#item.userId" asp-route-roleid="#item.roleId"
data-toggle="modal" data-target="#modal-action-role"
class="btn btn-sm btn-danger">
where at the base of the form I have a modal form implementation it uses looking like this:
#await Html.Partial( "_Modal", new BootstrapModel { ID = "modal-action-role", AreaLabeledId = "modal-action-role-label", Size = ModalSize.Medium } )
My modal form looks much like the samples used in the IdentitySampleProject and is shown here, it was not altered in any meaningful way yet works fine with single parameter call backs:
#model string
#using MyModels
<form asp-action="DeleteUserRole" role="form">
#Html.AntiForgeryToken()
#await Html.Partial( "_ModalHeader", new ModalHeader { Heading = "Delete User Role" } )
<div class="modal-body form-horizontal">
Are you sure you want to delete user role #Model?
</div>
#await Html.Partial( "_ModalFooter", new ModalFooter { SubmitButtonText = "Delete" } )
</form>
I am looking for a direction to go to solve the issue. I am hoping that indeed the double route ids are my issue, but I can not seem to find anyone else doing something like this in samples.
The generated management page looks mostly like this:
<!DOCTYPE html>
<html>
<head>
<title>my company</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/lib/bootswatch/spacelab/bootstrap.min.css" />
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="/css/site.css" />
<link rel="stylesheet" href="/css/navTabs.css" />
<link rel="stylesheet" href="/css/partner.css" />
</head>
<body>
<div id="header">
<div class="slideContainer">
<div class="slide"><img src="/image/Firm-small2.jpg" alt="Offices" class="headerImage" /></div>
<div class="slide"><img src="/image/InLibrary225.jpg" alt="Library" class="headerImage"></div>
<div class="slide"><img src="/image/DSC_9999editSM.JPG" alt="Offices" class="headerImage" /></div>
<div class="slide"><img src="/image/DSC_9925edit2SM.JPG" alt="Computer Room" class="headerImage" /></div>
</div>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav navbar-right ">
<li class="navtext">
<label>-- Welcome: Webmaster </label>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="navtext">
<label>Your Proven Partner in Cartoon Drawing</label>
</li>
</ul>
</nav>
</div>
<div id="sidebar">
<div><img src="/image/headerLogo.gif" alt="my company Logo" class="logoImage" /></div>
<nav id="menu">
<ul class="nav navbar-inverse">
<li>Home</li>
<li>
<div id="menuGroupItem">
Partners
<a data-toggle="collapse" data-target="#partnerMenu"><i class="fa fa-chevron-down"></i></a>
</div>
<ul id="partnerMenu" class="nav collapse" role="menu" aria-labelledby="partnerMenu">
<li><i class="fa fa-caret-right"></i> Eddy A Fish</li>
<li><i class="fa fa-caret-right"></i> Tom A Hawk</li>
</ul>
</li>
<li>Services</li>
<li>News</li>
<li>Events</li>
<li>Publications</li>
<li>Firm History</li>
<li>Contact</li>
<li class="divider"></li>
<li>Manage Website</li>
<li>Logout</li>
</ul>
</nav>
<div class="affiliation">
<table>
<tr>
<td>
<img src="/image/WBE_color_rgb_UP25.jpg" alt="" class="affiliationImage" />
</td>
</tr>
</table>
</div>
<div>
<ul class="rightAlign">
<li> </li>
<li>my company</li>
<li>16 main street</li>
<li>anytown, pa 00000</li>
<li> </li>
<li>610.111.1111</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="main" class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<form action="/Users/UserRole/a2c77901-4a74-49aa-9354-1fadc943c8c4" method="post"><input id="UserId" name="UserId" type="hidden" value="a2c77901-4a74-49aa-9354-1fadc943c8c4" /><input id="UserName" name="UserName" type="hidden" value="BioEditor" /> <h3>Add roles for user: <span class="text-success">BioEditor</span></h3>
<div>
<div class="form-group">
<table class="table table-responsive">
<thead>
<th>Role</th>
<th>Action</th>
</thead>
<tbody>
<tr>
<td><i class="fa fa-check text-success"> </i>BioEditor</td>
<td>
<a id="deleteRoleModal" data-toggle="modal" data-target="#modal-action-role" class="btn btn-sm btn-danger" href="/Users/DeleteUserRole?userid=a2c77901-4a74-49aa-9354-1fadc943c8c4&roleid=8b12b24d-5836-46eb-a7aa-0be1818a67f5">
<i class="fa fa-trash"></i> Delete
</a>
</td>
</tr>
<tr>
<td><i class="fa fa-check text-success"> </i>PowerEditor</td>
<td>
<a id="deleteRoleModal" data-toggle="modal" data-target="#modal-action-role" class="btn btn-sm btn-danger" href="/Users/DeleteUserRole?userid=a2c77901-4a74-49aa-9354-1fadc943c8c4&roleid=c4f3bdf8-b880-423c-8de3-1e51329da104">
<i class="fa fa-trash"></i> Delete
</a>
</td>
</tr>
<tr>
<td><i class="fa fa-check text-success"> </i>Administrator</td>
<td>
<a id="deleteRoleModal" data-toggle="modal" data-target="#modal-action-role" class="btn btn-sm btn-danger" href="/Users/DeleteUserRole?userid=a2c77901-4a74-49aa-9354-1fadc943c8c4&roleid=f1aafc1e-0527-4542-8f0e-fb1afeccac46">
<i class="fa fa-trash"></i> Delete
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-group">
<div class="input-group">
<select class="input-group form-control" data-val="true" data-val-required="The ApplicationRoleId field is required." id="ApplicationRoleId" name="ApplicationRoleId">
<option>Please select</option>
<option value="8b12b24d-5836-46eb-a7aa-0be1818a67f5">BioEditor</option>
<option value="c4f3bdf8-b880-423c-8de3-1e51329da104">PowerEditor</option>
<option value="f1aafc1e-0527-4542-8f0e-fb1afeccac46">Administrator</option>
<option value="fe77274d-4b16-46a6-8177-a84faf198c9b">EventEditor</option>
</select>
<span class="input-group-btn">
<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-user"> </i> Add Selected Role </button>
</span>
<span class="field-validation-valid" data-valmsg-for="ApplicationRoleId" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8KeASaIZMdBDjnZy_1CdaouczJ-zwxPaQp-N5OQ5bGWfYzVfpDz7_iC0VlJb_cRDkqucT-8ENFhsNPe9Rng1Mqrm9VQbYQoSQwerxj953ql4v7dABrW6pioEySOJN7qFXaalGYePyjHoB0QiKxfuvkvh938tJG4gVnh5D1JvLyNBBKlR4d25PcoJOJZTdN_Bxg" /></form> </div>
</div>
<div aria-hidden="true" aria-labelledby="modal-action-role-label" role="dialog" tabindex="-1" id="modal-action-role" class="modal fade">
<div class="modal-dialog ">
<div class="modal-content">
</div>
</div>
</div>
</div>
</div>
<div id="footer" class="container-fluid">
<div class="navbar navbar-fixed-bottom navbar-inverse ">
<ul>
<li class="navbar-link">© my company</li>
<li class="navbar-link text-muted"><a id="disclaimerLink" href="#">Disclaimer</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" src="/js/site.js"></script>
</body>
</html>
Thanks for any direction you might be able to provide, Kent
That was exactly a nudge in the right direction to finding the issue, thanks Ahmar. What is going on, due to the 2 ids being passed back to the controller is that the data is wrapped up in a query string rather than as a real route {controller}{action}{id}.
The modal won't pass along the query string to the final so I changed the model and wrapped up the values in the modal form for the final deletion and it all worked. Thanks for asking the right the question to get this answered.

Please create XPATH for the table element

Could you please create complete XPATH for the following web element
Address 1 (PO Box/Rural Route is ok)
it would be great if you give me how to create the XPATH as well for any HTML or XML code.
HTML code:
<!DOCTYPE html>
<html>
<head>
<body id="myProfile">
<div id="header">
<div class="wrapperMenu">
<div class="wrapperBodyCreditCenter">
<div id="bodyAll2">
<div>
<div class="fsmWideHero">
<div style="display: block; margin-bottom: 10px;">
<div class="fsmSubHeader"> Please update any information to maintain a clean and current profile. Once the correct information is entered, simply click on the save changes button to update your profile. </div>
<span class="validateError"> </span>
<script src="https://staging.privacyguard.com/ClientScript.aspx?script=FormControl%2fdisableOnSubmit.js&utc=633470607600000000" type="text/javascript">
<form action="/secure/MyProfile.aspx" autocomplete="OFF" name="PGUpdateProfileFormControl" onsubmit="disableSubmission(this)" method="post">
<input type="hidden" value="pgupdateprofile" name="cf">
<input id="__FLOWEVENT" type="hidden">
<input type="hidden" value="5sXZAFNB4Co/JF70jyZ1HHJdIMso9YP2jGmMsyuLQCKC2J0lOg2XDVX2FcLJBS2WMnYD55d7UNLPVXW0yHa6f4WVjmWwwvT0KiwnAY+6v0xpWJZ9fuKe5F2h25Z+aZZwdoEpJtmnYVyvq+znPaYwyQqTV0d3M6bWeBKMt6woDqdtRzUEooyojAzyaMiYFyqosVe5cGarbQWvFZiUJqH3wGRawchSjnjzh/Amy2F8YHZlJFJVWYAQ4PUx8E9GQeShHsCMs2Fg3ToiUemtIpgXaCGMnCby+sCEnRW4SPA3P9/Et2VO/YXsCYSwkfsNsqSAWMnYoicNwJy9ALYny1uAUxgBrv4dELuz+St9CcUrB0w=" name="__FlowState__">
<input type="hidden" value="364" name="__fspayload">
<div id="profileFormHeader"> Personal Information </div>
<div id="profileFormBody">
If you wish to change your name, contact the FreeScoresAndMore customer service center at 1-877-787-9002.
<p>
<p> </p>
<table cellspacing="0" cellpadding="2" border="0" summary="">
<tbody>
<tr>
<td width="220" align="left">
<label for="mpadr1">Address 1 (PO Box/Rural Route is ok)</label>
<br>
<input id="mpadr1" type="text" value="123 new address" name="UpdateProfile_Address1" maxlength="25" size="28">
</td>
<td align="left" colspan="2">
<td width="200" valign="top" bgcolor="#FFFFFF" align="left" style="background-color:#EFF0F2;" rowspan="3">
</tr>
<tr>
<tr>
</tbody>
</table>
</div>
<div id="profileFormHeader"> Membership Information </div>
<div id="profileFormBody">
<div id="profileFormHeader"> Subscription Preference </div>
<div id="profileFormBody">
<div style="text-align:center;margin-top:10px;">
</form>
</div>
<input type="hidden" value="7iuanXFUppuCMU7T/6LZi09GsdZ2dCYBLeTL/Wfbclc=" name="authToken">
</div>
</div>
<div class="clear" style="padding-bottom:20px;"></div>
<div id="subFooter">
<div id="mainFooter">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript">
<script type="text/javascript">
<script type="text/javascript">
</body>
</html>
Thanks In Advance
I don't think there's a magic-ally way of doing things. There's a lot of guides/tutorials out there where you can start learning.
Nonetheless, here's the xpath code that you need //label[#for='mpadr1'] or //label[contains(.,'Address 1')]

loading popup jsp page on view jsp without page refresh using jQuery-ajax

I've two jsp pages 1.view.jsp,2.popup.jsp (it is a popup page).the popup.jsp will be loaded when I click the 'add icon' on my view.jsp. Just I want to know how to load values on my 'view.jsp' (without refreshing the page) when 'submit' button is clicked on my 'popup.jsp' using Ajax.
view.jsp
<body>
<div class="st-content">
<jsp:include page="/WEB-INF/jsp/settings/adminmenu.jsp" />
<div class="width1">
<div class="mgmt-menu-bar font-new">
<div class="margin-left10 margin-top line-height1 ">
<a href="executeIndustry">
<div class="menunew cursor red">
<i class="icon-list icon-grey1"></i> Industry</div>
</a>
<a href="viewDepartment">
<div class="menunew cursor" ><i class="icon-list icon-grey1"></i> Department</div>
</a>
<a href="addViewDesignation">
<div class="menunew cursor" ><i class="icon-list icon-grey1"></i> Designation</div>
</a>
</div>
</div>
<div class="mgmt-content-right">
<div class="width2 margin-left10">
<div class="content-table-full">
<div class="content-h bold margin-left margin-top">Industry
<div class="top-right-icon2 cursor" data-toggle="tooltip" title="Add Industry" onclick="TINY.box.show({iframe:'addPageIndustry.action',boxid:'frameless',width:456,height:200, fixed:false,maskid:'bluemask',maskopacity:40})" >
<i class="icon-plus icon-grey1"></i>
</div>
</div>
<s:form action="executeIndustry" name="paginationForm" id="paginationForm">
<s:hidden name="industryId" id="industryId"/>
<s:if test="%{success!=null}" >
<div id="error" style="color:#048350;margin-top: 10px" >
<s:property value="success"/>
<br/>
</div>
</s:if>
<s:if test="%{error!=null}" >
<div id="error" style="color: #FF0000;margin-top: 10px">
<s:property value="error"/>
<br/>
</div>
</s:if>
<table width="100%" cellpadding="0" cellspacing="0" class="margin-bottom margin-top table-display">
<tr class="row-header">
<td >
Industry </td>
<td width="450">Created Date</td>
<td width="200">Action</td>
</tr>
<s:if test="%{industrylist!= null && industrylist.size > 0}">
<s:iterator value="industrylist">
<tr class="row1">
<td > <s:property value="industryName"/></td>
<td> <s:date name="createdDate" format="dd/MM/yyyy hh:mm:ss a"/></td>
<td>
<i class="icon-edit icon-grey1 cursor" title="Edit" data-toggle="tooltip" onclick="TINY.box.show({iframe:'editIndustry.action?editid=<s:property value="industryId"/>',boxid:'frameless',width:456,height:200, fixed:false,maskid:'bluemask',maskopacity:40})"></i>
<i title="Delete" data-toggle="tooltip" onclick="deletethis('<s:property value="industryId"/>')" class="icon-minus-sign icon-grey1 cursor"></i>
</td>
</tr>
</s:iterator>
</s:if>
<s:else>
<tr class="row1">
<td colspan="4" align="center">No industries were found</td>
</tr>
</s:else>
<s:hidden name="deleteid" id="deleteid"></s:hidden>
</table>
<div class="width2">
<s:if test="%{industrylist.size()>0}">
<%# include file="/WEB-INF/jsp/pagenation/pagination.jsp" %>
</s:if>
</div>
</s:form>
</div>
</div>
</div>
</div>
</div>
<jsp:include page="/common/commonfooter.jsp" />
<script type="text/javascript" src="shared/scripts/js/pagination.js"></script>
</div>
popup.jsp
<body>
<div class="pop-box">
<s:if test="%{edit!=1}" >
<s:form action="addIndustry" method="post" id="FormOne" name="FormOne" target="_top" cssClass="validate">
<span style="margin-left:10px;" class="heading-st2">Add Industry</span>
<div class="popup-style">
<div class="row-form">
<span class="red">*</span>Industry
</div>
<div class="row-form ">
<s:textfield name="industryName" id="industryName" cssClass="input-xlarge required-field" oncopy="return false" onpaste="return false" oncut="return false" onkeypress="return isNumberKey(event)" maxlength="60" />
</div>
<div class="row-form">
<button type="submit" class="btn btn-success ">Submit <i class="icon-ok icon-white"></i></button>
<span class="help-inline"></span>
</div>
</div>
</s:form>
</s:if>
<s:else>
<s:form action="updateIndustry" method="post" id="FormOne" name="FormOne" target="_top" cssClass="validate">
<s:hidden name="industryId"/>
<span style="margin-left:10px;" class="heading-st2">Edit Industry</span>
<div class="popup-style">
<div class="row-form">
<span class="red">*</span>Industry
</div>
<div class="row-form ">
<s:textfield name="industryName" id="industryName" cssClass="input-xlarge required-field" oncopy="return false" onpaste="return false" oncut="return false" onkeypress="return isNumberKey(event)" maxlength="60" />
</div>
<div class="row-form">
<button type="submit" class="btn btn-success ">Submit <i class="icon-ok icon-white"></i></button>
<span class="help-inline">
</span>
</div>
</div>
</s:form>
</s:else>
</div>
$(document).ready(function(){
var frm = $('#myform');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert("submitted");
},
error:function(data){
alert("error");
}
});
window.scrollTo(0,0);
ev.preventDefault();
});
The above jquery ajax helps you to accompany your action submittion without refreshing...

Html Agility Pack: make code look neat

Can I use Html Agility Pack to make the output look nicely indented, unnecessary white space stripped?
HAP is not going to give you the results you are after.
Try using a .net wrapper for HtmlTidy such as the one found here
using System;
using System.IO;
using System.Net;
using Mark.Tidy;
namespace CleanupHtml
{
/// <summary>
/// http://markbeaton.com/SoftwareInfo.aspx?ID=81a0ecd0-c41c-48da-8a39-f10c8aa3f931
/// </summary>
internal class Program
{
private static void Main(string[] args)
{
string html =
new WebClient().DownloadString(
"http://stackoverflow.com/questions/2593147/html-agility-pack-make-code-look-neat/2610903#2610903");
using (Document doc = new Document(html))
{
doc.ShowWarnings = false;
doc.Quiet = true;
doc.OutputXhtml = true;
doc.OutputXml = true;
doc.IndentBlockElements = AutoBool.Yes;
doc.IndentAttributes = false;
doc.IndentCdata = true;
doc.AddVerticalSpace = false;
doc.WrapAt = 120;
doc.CleanAndRepair();
string output = doc.Save();
Console.WriteLine(output);
File.WriteAllText("output.htm", output);
}
}
}
}
Results:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 October 2008), see www.w3.org" />
<title>
Html Agility Pack: make code look neat - Stack Overflow
</title>
<link rel="stylesheet" href="http://sstatic.net/so/all.css?v=6638" type="text/css" />
<link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico" />
<link rel="apple-touch-icon" href="http://sstatic.net/so/apple-touch-icon.png" />
<link rel="search" type="application/opensearchdescription+xml" title="Stack Overflow" href=
"http://sstatic.net/so/opensearch.xml" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript" src="http://sstatic.net/so/js/master.js?v=6523">
</script>
<script type="text/javascript">
//<![CDATA[
var imagePath='http://sstatic.net/so/img/';
//]]>
</script>
<link rel="canonical" href="http://stackoverflow.com/questions/2593147/html-agility-pack-make-code-look-neat" />
<link rel="alternate" type="application/atom+xml" title=
"Feed for question 'Html Agility Pack: make code look neat'" href="/feeds/question/2593147" />
<script src="http://sstatic.net/so/js/question.js?v=6714" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
var fkey = "b00609a1a5f2966a687eca3f84e4dd64";
$(function() {
vote.init(2593147);
comments.init();
styleCode();
});
//]]>
</script>
</head>
<body>
<noscript>
<div id="noscript-padding"></div></noscript>
<div id="notify-container"></div><script type="text/javascript">
//<![CDATA[
$(function() { notify.showFirstTime(); });
//]]>
</script>
<div class="container">
<div id="header">
<div id="topbar">
<div id="hlinks">
<a href=
"/users/login?returnurl=%2fquestions%2f2593147%2fhtml-agility-pack-make-code-look-neat%2f2610903">login</a>
<span class="lsep">|</span> careers <span class=
"lsep">|</span> about <span class="lsep">|</span> faq
</div>
<div id="hsearch">
<form id="search" action="/search" method="get" name="search">
<div>
<input name="q" class="textbox" tabindex="1" onfocus="if (this.value=='search') this.value = ''" type=
"text" maxlength="80" size="28" value="search" />
</div>
</form>
</div>
</div><br class="cbt" />
<div id="hlogo">
<img src="http://sstatic.net/so/img/logo.png" width="250" height="61" alt="Stack Overflow" />
</div>
<div id="hmenus">
<div class="nav">
<ul>
<li class="youarehere">
Questions
</li>
<li>
Tags
</li>
<li>
Users
</li>
<li>
Badges
</li>
<li>
Unanswered
</li>
</ul>
</div>
<div class="nav" style="float:right">
<ul>
<li style="margin-right:0px">
Ask Question
</li>
</ul>
</div>
</div>
</div>
<div id="content">
<div id="question-header">
<h2>
<a href="/questions/2593147/html-agility-pack-make-code-look-neat" class="question-hyperlink">Html Agility
Pack: make code look neat</a>
</h2>
</div>
<div id="mainbar">
<div id="question" class="">
<div class="everyonelovesstackoverflow">
<script type="text/javascript">
//<![CDATA[
document.write('<s'+'cript lang' + 'uage="jav' + 'ascript" src="http://ads.stackoverflow.com/a.aspx?ZoneID=3&Task=Get&IFR=False&PageID=52405&SiteID=1&Random=' + (+new Date()) + '&Keywords=htmlagilitypack">');
document.write('</'+'scr'+'ipt>');
//]]>
</script> <noscript>
<div>
<a href=
"http://ads.stackoverflow.com/a.aspx?ZoneID=3&Task=Click&Mode=HTML&SiteID=1&PageID=52405">
<img src=
"http://ads.stackoverflow.com/a.aspx?ZoneID=3&Task=Get&Mode=HTML&SiteID=1&PageID=52405"
alt="" /></a>
</div></noscript>
</div>
<table>
<tr>
<td class="votecell">
<div class="vote">
<input type="hidden" value="2593147" /> <img class="vote-up" src=
"http://sstatic.net/so/img/vote-arrow-up.png" width="40" height="25" alt="vote up" title=
"This question is useful and clear (click again to undo)" /> <span class="vote-count-post">1</span>
<img class="vote-down" src="http://sstatic.net/so/img/vote-arrow-down.png" width="40" height="25"
alt="vote down" title="This question is unclear or not useful (click again to undo)" /> <img class=
"vote-favorite" src="http://sstatic.net/so/img/vote-favorite-off.png" width="32" height="31" alt=
"star" title="This is a favorite question (click again to undo)" />
<div class="favoritecount"></div>
</div>
</td>
<td>
<div>
<div class="post-text">
<p>
Can I use Html Agility Pack to make the output look nicely indented, unnecessary white space
stripped?
</p>
</div>
<div class="post-taglist">
<a href="/questions/tagged/htmlagilitypack" class="post-tag" title=
"show questions tagged 'htmlagilitypack'" rel="tag">htmlagilitypack</a>
</div>
<table class="fw">
<tr>
<td class="vt">
<div class="post-menu">
<a id="flag-post-2593147" title="flag this post for serious problems" name=
"flag-post-2593147">flag</a>
</div>
</td>
<td class="post-signature owner">
<div class="user-info">
<div class="user-action-time">
asked <span title="2010-04-07 14:13:47Z" class="relativetime">2 days ago</span>
</div>
<div class="user-gravatar32">
<a href="/users/51795/illdev"><img src=
"http://www.gravatar.com/avatar/52dc0db2cdacc6e9769d074a37466317?s=32&d=identicon&r=PG"
height="32" width="32" alt="" /></a>
</div>
<div class="user-details">
illdev<br />
<span class="reputation-score" title="reputation score">53</span><span title=
"5 bronze badges"><span class="badge3">●</span><span class=
"badgecount">5</span></span>
</div>
</div><br class="cbt" />
<div class="accept-rate cool" title=
"this user has accepted an answer for 2 of 4 eligible questions">
50% accept rate
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="votecell"></td>
<td>
<div id="comments-2593147" class="comments">
<table>
<tbody>
<tr id="comment-2600849" class="comment">
<td></td>
<td class="comment-text">
<div>
what output? From where? some more details perhaps? – <a href=
"/users/97614/sam-holder" title="1868" class="comment-user">Sam Holder</a> <span class=
"comment-date"><span title="2010-04-07 14:16:41Z">2 days ago</span></span>
</div>
</td>
</tr>
<tr id="comment-2600851" class="comment">
<td></td>
<td class="comment-text">
<div>
<i>(reference)</i> <a href="http://htmlagilitypack.codeplex.com/Wikipage" rel=
"nofollow">htmlagilitypack.codeplex.com/Wikipage</a> – <a href=
"/users/208809/gordon" title="16497" class="comment-user">Gordon</a> <span class=
"comment-date"><span title="2010-04-07 14:16:55Z">2 days ago</span></span>
</div>
</td>
</tr>
<tr id="comment-2624419" class="comment">
<td></td>
<td class="comment-text">
<div>
output = html code output – <a href="/users/51795/illdev" title="53" class=
"comment-user owner">illdev</a> <span class="comment-date"><span title=
"2010-04-10 13:14:42Z">12 secs ago</span></span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</div>
<div id="answers">
<a name="tab-top" id="tab-top"></a>
<div id="answers-header">
<div id="subheader">
<h2>
2 Answers
</h2>
<div id="tabs">
<a href="/questions/2593147?tab=oldest#tab-top" title=
"Answers in the order they were given">oldest</a> <a href="/questions/2593147?tab=newest#tab-top"
title="Most recent answers first">newest</a> <a class="youarehere" href=
"/questions/2593147?tab=votes#tab-top" title="Answers with the most votes first">votes</a>
</div>
</div>
</div><a name="2610845"></a>
<div id="answer-2610845" class="answer">
<table>
<tr>
<td class="votecell">
<div class="vote">
<input type="hidden" value="2610845" /> <img class="vote-up" src=
"http://sstatic.net/so/img/vote-arrow-up.png" width="40" height="25" alt="vote up" title=
"This answer is useful (click again to undo)" /> <span class="vote-count-post">0</span>
<img class="vote-down" src="http://sstatic.net/so/img/vote-arrow-down.png" width="40" height="25"
alt="vote down" title="This answer is not useful (click again to undo)" />
</div>
</td>
<td>
<div class="post-text">
<p>
A variation of this question has been answered recently
</p>
<ul>
<li>
<a href=
"http://stackoverflow.com/questions/2490765/which-is-the-best-html-tidy-pack-is-there-any-option-in-html-agility-pack-to-mak/2507673#2507673">
http://stackoverflow.com/questions/2490765/which-is-the-best-html-tidy-pack-is-there-any-option-in-html-agility-pack-to-mak/2507673#2507673</a>
</li>
</ul>
<p>
Basically the outcome of this was that while you <strong>can</strong> use HtmlAgilityPack to
clean it up a bit by using the fix nested tags.
</p>
<p>
The best solution is to use something called Tidy which is an application that was originally
created by some developers at w3c and then made open source. Its the engine that powers the w3c
validator as well.
</p>
<p>
This article covers how to use it but you had to sign up (free) to view it:
</p>
<ul>
<li>
<a href="http://www.devx.com/dotnet/Article/20505/1763/" rel=
"nofollow">http://www.devx.com/dotnet/Article/20505/1763/</a>
</li>
</ul>
<p>
It seems like a legit article but its funny because nobody else seems to have covered this
topic in the last six years...
</p>
</div>
<table class="fw">
<tr>
<td class="vt">
<div class="post-menu">
<a href="/questions/2593147/html-agility-pack-make-code-look-neat/2610845#2610845" title=
"permalink to this answer">link</a><span class="lsep">|</span><a id="flag-post-2610845"
title="flag this post for serious problems" name="flag-post-2610845">flag</a>
</div>
</td>
<td align="right" class="post-signature">
<div class="user-info">
<div class="user-action-time">
answered <span title="2010-04-09 20:55:18Z" class="relativetime">16 hours ago</span>
</div>
<div class="user-gravatar32">
<a href="/users/156388/rtpharry"><img src=
"http://www.gravatar.com/avatar/6811db2b37e824fdf6c5c4fcdddd4146?s=32&d=identicon&r=PG"
height="32" width="32" alt="" /></a>
</div>
<div class="user-details">
rtpHarry<br />
<span class="reputation-score" title="reputation score">88</span><span title=
"6 bronze badges"><span class="badge3">●</span><span class=
"badgecount">6</span></span>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="votecell"></td>
<td>
<div id="comments-2610845" class="comments dno">
<table>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</div>
<div class="everyonelovesstackoverflow">
<script type="text/javascript">
//<![CDATA[
document.write('<s'+'cript lang' + 'uage="jav' + 'ascript" src="http://ads.stackoverflow.com/a.aspx?ZoneID=14&Task=Get&IFR=False&PageID=52405&SiteID=1&Random=' + (+new Date()) + '&Keywords=htmlagilitypack">');
document.write('</'+'scr'+'ipt>');
//]]>
</script> <noscript>
<div>
<a href=
"http://ads.stackoverflow.com/a.aspx?ZoneID=14&Task=Click&Mode=HTML&SiteID=1&PageID=52405">
<img src=
"http://ads.stackoverflow.com/a.aspx?ZoneID=14&Task=Get&Mode=HTML&SiteID=1&PageID=52405"
alt="" /></a>
</div></noscript>
</div><a name="2610903"></a>
<div id="answer-2610903" class="answer">
<table>
<tr>
<td class="votecell">
<div class="vote">
<input type="hidden" value="2610903" /> <img class="vote-up" src=
"http://sstatic.net/so/img/vote-arrow-up.png" width="40" height="25" alt="vote up" title=
"This answer is useful (click again to undo)" /> <span class="vote-count-post">0</span>
<img class="vote-down" src="http://sstatic.net/so/img/vote-arrow-down.png" width="40" height="25"
alt="vote down" title="This answer is not useful (click again to undo)" />
</div>
</td>
<td>
<div class="post-text">
<p>
Output as XHTML and run that through an <a href=
"http://msdn.microsoft.com/en-us/library/system.xml.xmltextwriter.indentation.aspx" rel=
"nofollow">XmlTextWriter</a>
</p>
</div>
<table class="fw">
<tr>
<td class="vt">
<div class="post-menu">
<a href="/questions/2593147/html-agility-pack-make-code-look-neat/2610903#2610903" title=
"permalink to this answer">link</a><span class="lsep">|</span><a id="flag-post-2610903"
title="flag this post for serious problems" name="flag-post-2610903">flag</a>
</div>
</td>
<td align="right" class="post-signature">
<div class="user-info">
<div class="user-action-time">
answered <span title="2010-04-09 21:02:34Z" class="relativetime">16 hours ago</span>
</div>
<div class="user-gravatar32">
<a href="/users/242897/sky-sanders"><img src=
"http://www.gravatar.com/avatar/df4a7fbd8a054fd6193ca0ee62952f1f?s=32&d=identicon&r=PG"
height="32" width="32" alt="" /></a>
</div>
<div class="user-details">
Sky Sanders<br />
<span class="reputation-score" title="reputation score">4,014</span><span title=
"2 silver badges"><span class="badge2">●</span><span class=
"badgecount">2</span></span><span title="14 bronze badges"><span class=
"badge3">●</span><span class="badgecount">14</span></span>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="votecell"></td>
<td>
<div id="comments-2610903" class="comments dno">
<table>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</div>
<form id="post-form" action="/questions/2593147/answer/submit" method="post" name="post-form">
<h2 class="space">
Your Answer
</h2><script src="http://sstatic.net/so/Js/wmd.js?v=6016" type="text/javascript">
</script> <script type="text/javascript">
//<![CDATA[
$(function() {
editorReady(1, heartbeat.answers);
});
//]]>
</script>
<div id="post-editor">
<div id="wmd-container">
<div id="wmd-button-bar"></div>
<textarea id="wmd-input" name="post-text" cols="92" rows="15" tabindex="101">
</textarea>
</div>
<div class="community-option">
<input id="communitymode" name="communitymode" type="checkbox" /> <label for="communitymode" title=
"community owned posts do not generate any reputation for the owner, have a lower reputation barrier for collaborative editing, and show only a revision history instead of a signature block">
community wiki</label>
</div>
<div id="wmd-preview"></div>
<div id="edit-block">
<input id="fkey" name="fkey" type="hidden" value="b00609a1a5f2966a687eca3f84e4dd64" /> <input id=
"author" name="author" type="text" />
</div>
</div>
<div class="form-item">
<table>
<tr>
<td class="vm">
<label for="openid_identifier">OpenID Login</label> <input id="openid_identifier" name=
"openid_identifier" class="openid-identifer" type="text" size="40" maxlength="200" value=""
tabindex="104" />
<div class="form-item-info">
Get an OpenID
</div>
</td>
<td class="orcell">
<div class="orword">
or
</div>
<div class="orline"></div>
</td>
<td class="vm">
<div>
<label for="display-name">Name</label> <input id="display-name" name="display-name" type="text"
size="30" maxlength="30" value="" tabindex="105" />
</div>
<div>
<label for="m-address">Email</label> <input id="m-address" name="m-address" type="text" size=
"40" maxlength="100" value="" tabindex="106" /> <span class="edit-field-overlay" style=
"color:#999; font-weight:normal">never shown</span>
</div>
<div>
<label for="home-page">Home Page</label> <input id="home-page" name="home-page" type="text"
size="40" maxlength="200" value="" tabindex="107" />
</div>
</td>
</tr>
</table>
</div>
<div class="form-submit cbt">
<input id="submit-button" type="submit" value="Post Your Answer" tabindex="110" />
</div>
</form>
<h2 class="space">
Not the answer you're looking for? Browse other questions tagged <a href=
"/questions/tagged/htmlagilitypack" class="post-tag" title="show questions tagged 'htmlagilitypack'" rel=
"tag">htmlagilitypack</a> or ask your own question.
</h2>
</div><img src="/posts/2593147/ivc/1707" class="dno" alt="" />
</div>
A variation of this question has been answered recently
Which is the best HTML tidy pack? Is there any option in HTML agility pack to make HTML webpage tidy?
Basically the outcome of this was that while you can use HtmlAgilityPack to clean it up a bit by using the fix nested tags.
The best solution is to use something called Tidy which is an application that was originally created by some developers at w3c and then made open source. Its the engine that powers the w3c validator as well.
This article covers how to use it but you had to sign up (free) to view it:
http://www.devx.com/dotnet/Article/20505/1763/
It seems like a legit article but its funny because nobody else seems to have covered this topic in the last six years...
See a similar question here: HtmlAgilityPack: how to create indented HTML? and my answer:
No, and it's a "by design" choice.
There is a big difference between XML
(or XHTML, which is XML, not HTML)
where - most of the times -
whitespaces are no specific meaning,
and HTML.
This is not a so minor improvement, as
changing whitespaces can change the
way some browsers render a given HTML
chunk, especially malformed HTML (that
is in general well handled by the
library). And The Html Agility Pack
was designed to minimize the way the
HTML is rendered, not the way the
markup is written.
I'm not saying it's not feasible or
plain impossible. Obviously you can
convert to XML and voilà (and you
could write an extension method to
make this easier) but the rendered
output may be different, in the
general case.

Resources