i have a grid view to show my blog posts, my posts are in video,image,text format and each has html template that is different with another:
html:
<!-- Image Format -->
<div class="post format-image box">
<div class="frame">
<a href="post.html">
<img src="Templates/images/art/post1.jpg" alt="" />
</a>
</div>
<h2 class="title">Morning Glory</h2>
<p>text</p>
<div class="details">
<span class="icon-image">September 26, 2012</span>
<span class="likes">44</span>
<span class="comments">3</span>
</div>
</div>
<!-- Video Format -->
<div class="post format-video box">
<div class="video frame">
<iframe src="http://player.vimeo.com/video/40558553?title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<h2 class="title">Fragments of Iceland</h2>
<p>text</p>
<div class="details">
<span class="icon-video">September 13, 2012</span>
<span class="likes">18</span>
<span class="comments">1</span>
</div>
</div>
<!-- Text Format -->
<div class="post format-standard box">
<h2 class="title">The Meridian Sun</h2>
<p>text</p>
<p>text</p>
<div class="details">
<span class="icon-standard">August 13, 2012</span>
<span class="likes">11</span>
<span class="comments">0</span>
</div>
</div>
as you know if i want to have list of my posts in usually way
i should add grid view with item template and set my template in it,
but as you see i have 3 templates for my records,
and i have a field in my table called 'PostMode' that accepts 3 string :
Video, Image, Text.
now my question is how can i use 3 templates in item template that if my record was
Video display video template and if it was Text display Text format in my blogs list.
TemplateField tF = new TemplateField();
// tF.HeaderText = dr["COLUMN_NAME"].ToString();
tF.HeaderText = col.ToString();
tF.ItemTemplate = LoadTemplate("~/xxxxxxx.ascx");
grdVw.Columns.Add(tF);
Sorry for posting in such a hurry ,
Hope it helps .
Related
I have a web app i'm working on, and i have a foreach loop in the cshtml file to display a list of values in boxes
#foreach(var obj in Model)
{
List<double> PN = new List<double>();
PN.Add(obj.ComponentNumber);
#if (obj.ComponentNumber == 3391012471)
{
<div class="box">
<div class="parent">
<h3 class="column inline-block-column">PN - #obj.ComponentNumber </h3>
<l class="circle-comp column1 inline-block-column" style="#ViewBag.check2"></l>
</div>
<div class="">
<p class="column">物料描述 - #obj.ComponentDescription</p>
<label class="switch">
<input type="checkbox" #ViewBag.check5>
<span class="slider round"></span>
</label>
</div>
</div>
}
else
{
<div class="box">
<div class="parent">
<h3 class="column inline-block-column">PN - #obj.ComponentNumber </h3>
<l class="circle-comp column1 inline-block-column"></l>
</div>
<div class="">
<p class="column">物料描述 - #obj.ComponentDescription</p>
<label id="knob" class="switch" >
<input type="checkbox" onclick="sendmsg()" checked="checked">
<span class="slider round"></span>
</label>
</div>
</div>
}
My aim is that when the checkbox is clicked, I would like to get that specific box and change a value in it, but so far all I have tried did not work (I tried using 'getElementById' to get the box #div and change its innerHTML value, but that changed all the boxes value. I would like to be able to distinguish each box which was created using the #foreach loop)
I would appreciate guidance or suggestions from anyone on how to go about this.
I am trying to get information from a html segment, it is all going well however I am struggling to return the value of the Trade in value. Below is a copy of the code I have tried so far.
htmlNode.Descendants("li").Where(x => x.HasClass("trade-in-price")).Select(x => x.Descendants("span").Where(z => z.HasClass("value")).Last().InnerText);
which returns the following:
"£36.00"
Now, I don't really want to substring this value to get the cost as I don't think it is the best way to do this however I have tried every other way and i can't seem to return 'just the cost' value.
Here is a copy of the html I am trying to navigate to get the desired value
<section
class="product-item"
itemscope="itemscope">
<div>
<div class="group">
<div>
<div class="product-image"><a
href="/trade-in-sell/call-of-duty-modern-warfare-ps4"
itemprop="url"
><span><img
width="160"
height="200"
alt="Call Of Duty: Modern Warfare"
title="Show more information on Call Of Duty: Modern Warfare"
itemprop="image"
/></span></a></div>
<div class="product-categories gray">
<ul>
<li>PlayStation</li>
</ul>
</div>
<div class="product-label top-seller"><strong>modernwarfare</strong></div>
<h2 class="product-title" itemprop="name">Call Of Duty: Modern Warfare</h2>
</div>
</div>
<div class="group">
<div>
<div class="product-price">
<ul>
<li class="buy-new-price">
<Buy new</span> <span class="value"><span class="symbol l">£</span>49.99</span>
</li>
<li class="trade-in-price">
<a href="/trade-in-sell/call-of-duty-modern-warfare-ps4">
<span class="label">Trade in</span>
<span class="value">
<span class="symbol l">
£
</span>
36.00 // I want this value here
</span>
</a>
</li>
<li class="sell-price">
<a href="/trade-in-sell/call-of-duty-modern-warfare-ps4">
<span class="label">Get cash</span>
<span class="value">
<span class="symbol l">
£
</span>
32.00
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
Does anyone know where abouts I am going wrong in my LINQ query?
I think you can use the method GetDirectInnerText() instead of property InnerText. For me it returns only text of node itself without childs.
htmlNode.Descendants("li").Where(x => x.HasClass("trade-in-price")).Select(x => x.Descendants("span").Where(z => z.HasClass("value")).Last().GetDirectInnerText());
Anyone know how to select the specific element that contain in the attachment to download as i can't able to select the respective attachment. the screenshot I have put in the below :
below is the html code for the specific container
<div class="attachment-wrap">
<!-- Comment Title -->
<div id="attachmentTitle-wrapTEST" class="attachmentTitle-wrap">
<h2>Attachments</h2>
</div>
<div id="attachment-containerTEST">
<!-- Attachment Box -->
<div class="comment-box">
<!-- Comment Image -->
<div class="col-xs-2">
<div class="attachmentImg">
<img src="downloadAttachment?attachmenturl=/secure/thumbnail/10104/_thumb_10104.png" />
</div>
</div>
<!-- Attachment details -->
<div class="col-xs-10">
<div class="commentContent">
<div class="topRow">
<div class="username">1177A149.PNG</div>
<div class="commentTimeStamp">25927 KB</div>
</div>
<div class="bottomRow">
<div class="commentDisplay">
Download
</div>
</div>
</div>
</div>
</div>
<div class="comment-box">
<!-- Comment Image -->
<div class="col-xs-2">
<div class="attachmentImg">
<img src="downloadAttachment?attachmenturl=/secure/thumbnail/10103/_thumb_10103.png" />
</div>
</div>
<!-- Attachment details -->
<div class="col-xs-10">
<div class="commentContent">
<div class="topRow">
<div class="username">4D7746B6.PNG</div>
<div class="commentTimeStamp">62766 KB</div>
</div>
<div class="bottomRow">
<div class="commentDisplay">
Download
</div>
</div>
</div>
</div>
</div>
Appreciate if you can help me with this.
You can do it in the below way to click the respective download link based on the attachment name
Code:
//Expected attachment filename needs to be specified here.
var expectedFileName = "1177A149.PNG";
//This list will hold all the available attachment section details
IList<IWebElement> attachmentList = _driver.FindElements(By.ClassName("comment-box"));
foreach(var element in attachmentList)
{
var attachmentFilename = element.FindElement(By.XPath(".//div[#class='username']")).Text;
if(attachmentFilename == expectedFileName)
{
//If the actual file name and expected file name matches, then corresponding download link will be clicked
element.FindElement(By.XPath(".//a")).Click();
break;
}
}
You an create xpath specific to png name. see here
//a[contains(#href,'downloadAttachment?filename=4D7746B6.PNG')]
It will point to download link having filename=4D7746B6.PNG
I am trying to use the Accordion feature in Bootstrap. The problem is that the minus buttons never change to plus upon clicking (and vice versa).
Here is my HTML code:
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span class="glyphicon glyphicon-minus"></span>
Incident Details
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<table class="table table-bordered">
<tr>
<th>Response Text</th>
<th>Username</th>
<th>Date & Time of Update</th>
</tr>
#if (ViewBag.Data != null)
{
foreach (OfficiumWebApp.Models.ResponseViewModel item in ViewBag.Data)
{
<tr>
<td>#item.ResponseText</td>
<td>#item.Username</td>
<td>#item.DateTimeOfUpdate</td>
</tr>
}
}
</table>
</div>
</div>
</div>
</div>
The JavaScript code here:
<script type="text/javascript">
$(document).ready(function(){
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function () {
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
});
</script>
I cant see what I'm doing wrong? Any help would be great!
Your custom javascript is working as expected with the default accordion markup i.e.
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<span class="glyphicon glyphicon-minus"></span>
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Anim pariatur cliche. Minim qui you in1.com probably haven't heard of them et cardigan trust fund culpa biodiesel.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<span class="glyphicon glyphicon-plus"></span>
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
Please see here for a working example:
http://bootply.com/113766
You might want to check that your markup matches the above when rendered and that all the javascript resource files are loading.
Make sure jQuery reference is rendering out, it jQuery event is not firing up. you can test it using alert in the jQuery function, if it fires mean jQuery is working if not then need to tweak it it little.
The goal
Create Shared UI Templates with C# + MVC 4 + Razor Engine.
The problem
I do not know how to do.
Details
I have the follow template:
<li>
<div class="introduction">
<h3>{productName}</h3>
</div>
<div class="presentation">
<img src="{productImage}" alt="" />
</div>
<div class="description">
<p>Starting by</p>
<h3>{minProductPrice}</h3>
<p class="product-unity">/a <span class="product-measure"
data-measure-shortcut="{productMeasureShortname">{productMeasureName}
</span></p>
</div>
<div class="controls">
<button class="button green add" title="Add to comparsion list">+</button>
<div class="tooltip-quantity">
<p class="float-left">Quantity:</p>
<form method="post" action="#">
<input class="quantity float-left" name="product_quantity"
maxlength="2" type="text" />
<span class="float-left">/{productMeasureName}(s)</span>
<button disabled class="button orange filled float-right">
Add
</button>
</form>
</div>
<button class="button light-blue filled compare float-right" title="This product is available in 6 stores">Compare</button>
</div>
</li>
and when I want to call it, I would to do something like this:
#Html.RenderMyTemplate("Product Name", "Product Image", "Min Product Price"...)
Logically, the parameters will replace the placeholders on the template.
Any idea?
Thanks in advance!
You can use partial view:
#Html.Partial("MyView", Model)
Basicaly it renders given file (MyView) using model (Model) as regular razor powered template.
In your case (I used string[] as Model, but you can use whatever you want e.g. IDictionary<string, string>):
#Html.Partial("MyView", new[] { "Product Name", "Product Image", "Min Product Price" })
In view:
#inherits System.Web.Mvc.WebViewPage<string[]>
<li>#Model[0]</li>
UPDATE (with dictionary)
#Html.Partial("MyView", new Dictionary<string, object> { { "name", "Product1"}, { "price", 100 } })
then
#inherits System.Web.Mvc.WebViewPage<Dictionary<string, object>>
<li>#Model["name"]</li>