Develop Reference

A way to use C#/Razor foreach loop get first 3 items, then wrap them in an element

I have a C#/Razor foreach loop with more than 3 items.
#foreach(var item in itemList){
<div class="thing">#item.Name</dov?
}
So I can get the first three and wrap them using jQuery, JavaScript, etc. easily enough:
$('.thing').slice( 0, 3).wrapAll('<div class="firstThreeThings" style="border:1px solid blue"></div>');
But I would like to use C#/Razor to get the first three items in a list and wrap those three items in an element (div) and have the rest of the list wrapped in another element (div). Something equivalent to the jQuery above, just using Razor to do the wrap of the first three elements.
I have seen examples of getting the first three using .Take(3). Which only gets the first three elements but how would I use this or another way to wrap the first three in an element (div) and the rest of the list (if larger than three elements) wrapped in another element (div)?
The desired effect would be something like:
<div class="firstThreeThings">
<div class="thing">This is a thing</div>
<div class="thing">This is a thing</div>
<div class="thing">This is a thing</div>
</div>
<div class="otherThings">
<div class="thing">This is a thing</div>
<div class="thing">This is a thing</div>
<div class="thing">This is a thing</div>
<div class="thing">This is a thing</div>
</div>

Just a blind idea
<div class="firstThreeThings">
#foreach(var item in itemList.Take(3)){
<div class="thing">#item.Name</div>
}
</div>
<div class="otherThings">
#foreach(var item in itemList.Skip(3)){
<div class="thing">#item.Name</dov?
}
</div>

Retrieving deep nested values looping through a HTML page using HTMLAgilityPack C#

I'm trying to use the HTMLAgilityPack to retrieve various specific values from a web page. The web page is always the same an the data I want to scrape from it is always in the same place (same divs/classes/attributes etc).
I've tried to loop through and get the values, but I always mess up somewhere. I'd provide some code to help but honestly I've tried 5 times and each time I don't get results close to what I want to - I'm well and truly in a pickle.
I have written the main chunk of HTML:
<div id ="markers">
<div class="row">
<div class="span2 filter-pane ">
<div class="teaser teaser-small">
<h1 class="teaser-title">
...
</div>
<p> Value4 </p>
</div>
</div>
<div class="span2 filter-pane ">
</div>
<div class="span2 filter-pane ">
</div>
</div>
<div class="row"></div>
<div class="row"></div>
</div>
Basically the values (1-4) are the values I want to extract from the data.
The <div id="markers"> is ONE div on the page, all the information I need is in this div.
There are multiple <div class="row"> divs, I need to loop through all of these.
Inside each of these divs, there are three or less <div class="span2 filter-pane "> divs. I need to loop through these 3 divs also.
My data is inside here - Value3 is here in the <p>...</p>. And the other values can be found within the <h1 class="teaser-title"> node, where they are attributes in an <a> element.
I hope somebody can provide me with a solution, or at least some good guidance to accessing all pieces of data I want. I've tried various things but I don't get the results I want.
Thanks.

Here are some hints for you. So first you need to get div#markers because you mentioned that it contains all your info you need.
string mainURL = your url;
HtmlAgilityPack.HtmlWeb web = new HtmlAgilityPack.HtmlWeb();
HtmlAgilityPack.HtmlDocument doc = web.Load(mainURL);
var markerDiv = doc.DocumentNode.Descendants("div").FirstOrDefault(n => n.Id.Equal("markers');
//Check if marketDiv is null or not
//Same idea, get list of row divs
var rows = marketDiv.Descendants("div").HasClass("row") //I will provide .HasClass function or you can write your own, it's simple;
//Iterate throw your rows object
//for each row object
var aElement = row.Descendants("a").FirstOrDefault()//you can have more criteria here if it has more than 1 a element
aElement.GetAttributeValue("data-lat", "") //will return Value1 here, do the same thing for other attributes and p.
Hope it helps

How to check in razor view if field is valid?

I use bootstrap with ASP.NET Core and to indicate form field validation errors i want to add has-errors class to form-group div when given field has an error. The view looks like that:
<div class="form-group">
<label asp-for="Fragment.Content" class="col-lg-2 control-label "></label>
<div class="col-lg-10">
<textarea asp-for="Fragment.Content" class="form-control content-editor"></textarea>
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
<span asp-validation-for="Fragment.Content"></span>
</div>
</div>
I would like to do something like:
<div class="form-group" asp-add-class-if-error="has-errors" for-field="Fragment.Content"/>
I know i can write my own tag helper, however i am curious if there is a built-in solution.

I found that you can use:
#using Microsoft.AspNetCore.Mvc.ModelBinding
#if(ViewData.ModelState.GetFieldValidationState("Fragment.Content") == Microsoft.AspNetCore.Mvc.ModelBinding.ModelValidationState.Invalid)
{
// something here
}

dynamically add html tag in asp.net

I need to add html tags dynamically in asp.net code behind , here is the scenario :
List<Product> products = ProductManager.GetProductList();//read data from database
Product is a class containing information I need to show in website such as product name, image,… .
For adding html code I tried this to show 5 products per page :
String finalHtmlCodeContainer="";
for(int i=0;i<=5;i++)
{
String myBox= "<div class=\"box\"> </div>";
finalHtmlCodeContainer+=mybox;
}
boxWrapper.InnerHtml=finalHtmlCodeContainer;
boxWrapper is a div that would contain our 5 product info.up to now everything is ok but problem appears when insted of "<div class=\"box\"> </div>",myBoxcontains long characters of html code , the original myBox should include this:
<div class="boxWrapper">
<div class="box">
<div class="rightHeader">rightHeader</div>
<div class="leftHeader">leftHeader</div>
<div class="article">
<img src="../Image/cinemaHeader.jpg" />
<p>
some text here <!--product.content-->
</p>
</div><!--end of article-->
<div class="rightFooter"><span>rightFooter</span>
<div class="info">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
</div><!--end of rightFooter-->
<div class="leftFooter"><span>leftFooter</span>
</div><!--end of leftFooter-->
</div><!--end of box-->
</div><!--end of boxWrapper-->
you see if i add producet.atrributes to code snippet above, it would be more messy,hard to debug , has less scalability and... . what is your solution?

It depends on the underlying product. If you are using web forms, I'd suggest using a data bound control that supports templating like the ListView or Repeater. It gives you full control over the UI, and also supports reloading the UI in ViewState. In your scenario, you'd have to build the UI on every postback. The ListView or Repeater track it in ViewState.
If you are using MVC, well using a helper method can make this easier as you can stick the item template within and then use a foreach and render out the helper.
If you are talking doing it in JavaScript, then there are templating components for doing the same thing.

I suggest you to Add repeater in your <p> tag ,
<p>
<asp:Repeater runat="server" ID="rpDetail">
<ItemTemplate>
<div class="box">
<%# Eval("YourDataField") %>
</div>
</ItemTemplate>
</asp:Repeater>
</p>
And make your products list as Repeater's datasourse in code behind .
rpDetail.DataSource = products ;
rpDetail.DataBind();

add div to page from the code behind Asp.net/C#

Hello I have a item list that shows on my asp.net page like this:
<div class="search-result-item">
<div class="image">
<img src="images/1.png"/>
</div>
<div class="logo">
<img src="images/logo.png"/>
</div>
<div class="header">
Title
</div>
<div class="message">
Message
</div>
<div class="keywords">
key1 | key2 | key3
</div>
<div class="links">
Go to
</div>
</div>
This shows a predefined layout for an item on the page.
Items are generated in the code behind.
I want for each item to create a div like the one above on the page.
How can I do that using the code behind?
Thanks a lot

You create a Control and add it to your page.
There are a large range of controls, but if you want that exact markup, and don't need any server-side processing, the LiteralControl control is probably the most appropriate.

Use a repeater control You create a control that basically connects to datasource and then repeats info based on the data. Very crude description sorry. Look at it on Google.