I have bootstrap nested grid.In one of my row I have 3 column. When I fill data in the first column of the row , then 3rd column of the row stacks down.However it stays good when there is no data.
Before filling Data:
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<div class="container-fluid">
<div id="tagListDiv">
tags go here
</div>
</div>
</div>
<div class="col-xs-2">
</div>
<div class="col-xs-4">
<img src="#Url.Content(Model.DefaultImagePath)" alt="Image" height="150" width="150"/>
<span class="glyphicon glyphicon-pencil" style="color: #292929; background-color: #E3DAC9; vertical-align:bottom"></span>
<span class="glyphicon glyphicon-plus" style="color: #292929;background-color: #E3DAC9; vertical-align: bottom"></span>
</div>
</div>
</div>
Redered:
After Filling Data:
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<div class="container-fluid">
<div id="tagListDiv">
#for (var tagCount = 0; tagCount < #Model.TagList.Count(); tagCount++)
{
<div class="row">
<div class="col-xs-4">
#(Html.CheckBoxFor(x => x.TagList.ToList()[tagCount].IsEnable))
<label>#Model.TagList.ToList()[tagCount].TagName</label>
#if (++tagCount == #Model.TagList.Count())
{
break;
}
</div>
<div class="col-xs-4">
#(Html.CheckBoxFor(x => x.TagList.ToList()[tagCount].IsEnable))
<label>#Model.TagList.ToList()[tagCount].TagName</label>
#if (++tagCount == #Model.TagList.Count())
{
break;
}
</div>
<div class="col-xs-4">
#(Html.CheckBoxFor(x => x.TagList.ToList()[tagCount].IsEnable))
<label>#Model.TagList.ToList()[tagCount].TagName</label>
</div>
</div>
}
</div>
</div>
</div>
</div>
After data filled:
Related
My View page, it contains many dynamic controls
I know this question has been asked and answered a dozen of times but none of the solutions help me.
I have a following ViewModel which is consisted of QuestionBatch data model,listResponseTag and a list of listQuestion data model.
View Model
public class VM_Questionaire
{
public QuestionBatch ThequestionBatch { get; set; }
public List<Question> listQuestion { get; set; }
public List<ResponseTag> listResponseTag { get; set; }
}
Controller
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult submit_Questionaire(VM_Questionaire vm_question)
{
if (ModelState.IsValid)
{
Console.Write(Newtonsoft.Json.JsonConvert.SerializeObject(vm_question));
}
return View("Index");
}
View
<pre>
#model Fonz_Survey.Models.VM_Questionaire
#{
ViewBag.Title = "Questionaire";
}
#using (Html.BeginForm("submit_Questionaire", "Questions", FormMethod.Post))
{
#Html.AntiForgeryToken()
<h2>Questionaire</h2>
<div class="card">
<div class="card-header">
<div class="jumbotron-fluid">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<h5 class="text-muted text-monospace">CODE</h5>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 text-danger text-monospace">
#Html.DisplayFor(model => model.ThequestionBatch.Code, new { #class = "text-danger text-monospace" })
#Html.HiddenFor(model => model.ThequestionBatch.Code)
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<h5 class="text-muted text-monospace">Question Batch</h5>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 text-primary text-monospace">
#Html.DisplayFor(model => model.ThequestionBatch.BatchName, new { #class = "text-primary text-monospace" })
#Html.HiddenFor(model => model.ThequestionBatch.BatchName)
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<h5 class="text-muted text-monospace">No of Questions</h5>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<label class="text-primary text-monospace">#ViewBag.totalQstns</label>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<h5 class="text-muted text-monospace">Description</h5>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 text-primary text-monospace text-wrap">
#Html.DisplayFor(model => model.ThequestionBatch.Description, new { #class = "text-primary text-monospace text-wrap" })
#Html.HiddenFor(model => model.ThequestionBatch.Description)
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
#{
//int rowIndex = 0;
}
#if (Model != null && Model.listQuestion != null)
{
for(var rowIndex=0; rowIndex< Model.listQuestion.Count; rowIndex++)
//foreach (Question question in Model.listQuestion)
{
// rowIndex++;
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-header bg-gray text-light">
<div class="d-inline-block">
<label class="text-lg-left font-weight-bold">#rowIndex.</label>
<label class="text-lg-left font-weight-bold">#Model.listQuestion[rowIndex].QuestionEN</label>
<br />
<label class="text-lg-left font-weight-bold">#Model.listQuestion[rowIndex].QuestionAR</label>
</div>
</div>
<div class="card-body font-weight-bolder">
#switch (#Model.listQuestion[rowIndex].QType)
{
case 1:
// to do Text Boxes
<p class="text-info"><u>Please enter your message below;</u></p>
<div class="form-row">
#*<input type="text" placeholder="#question.QuestionEN" name="Q_#question.Id" id="Q_#question.Id" class="form-control" />*#
#Html.EditorFor(model=> #Model.listQuestion[rowIndex].QuestionEN)
</div>
break;
case 2:
// to do Radio
<p class="text-info"><u>Please select any one of the option below;</u></p>
foreach (ChoiceTag ct in Model.listQuestion[rowIndex].ChoiceTags)
{
<div class="form-check">
<label class="form-check-label" for="C_#ct.Id">
<input type="radio" class="form-check-input" id="C_#ct.Id" name="#Model.listQuestion[rowIndex].Id" value="#ct.AnswerEN">#ct.AnswerEN | #ct.AnswerAR
</label>
</div>
}
break;
case 3:
// to do Radio
<p class="text-info"><u>Please select options below;</u></p>
foreach (ChoiceTag ct in Model.listQuestion[rowIndex].ChoiceTags)
{
<div class="form-check">
<label class="form-check-label" for="C_#ct.Id">
<input type="checkbox" class="form-check-input" id="C_#ct.Id" name="#Model.listQuestion[rowIndex].Id" value="#ct.AnswerEN">#ct.AnswerEN | #ct.AnswerAR
</label>
</div>
}
break;
}
</div>
</div>
</div>
</div>
}
<div class="form-group">
<div class="col-12 text-center">
<input type="submit" value="Submit" class="btn btn-success " />
</div>
</div>
}
</div>
<div class="card-footer">
<label class="text-danger">#ViewBag.Message</label>
</div>
</div>
}
</prev>
First object getting value, but the list getting null.
#Html.DisplayFor() will not post values. You need to use #Html.HiddenFor() along with #Html.DisplayFor(). Refer: Html.DisplayFor not posting values to controller in ASP.NET MVC 3
if you're not passing any type of data then make your data as a hidden field and after that you will received your data at your respective controller.
Thanks.
im new to umbraco and c#, I made a blog list in umbraco razor but how can i make a load more button funcionality?
i want when the user click the button load more 5 items to the list.
One way is the the users click the button update the query, but i would need to refresh the page.
Any Help would be great since im stuck on this one, and have no clue how to do this in umbraco.
#{
var selection = Model.Content.Children().Where(x => x.IsVisible()).Take(5).ToList();
}
<div class="container-fluid" style="padding-left: 117px;">
<div class="row" style="margin-top: 5em;">
<div class="col-lg-9 col-md-9 col-sm-9">
<!-- BLOG START -->
#while(selection.Any()){
var oneItem = selection.First();
selection.Remove(oneItem);
<div class="row">
<div class="col-md-4 col-sm-12" onclick="location.href='#oneItem.Url'" style="cursor:pointer">
<div class="card">
<img src="#Umbraco.TypedMedia(oneItem.GetPropertyValue<int>("imagemPublicacaoBlog")).Url" style="height: 15em;">
</div>
</div>
<div class="col-md-6 col-sm-12" onclick="location.href='#oneItem.Url'" style="cursor:pointer">
<span class="card-text qs-blog-direcao">#oneItem.GetPropertyValue("tipoDeDirecao")</span><br><br>
<span class="qs-blog-date-1page" id="qs-datetime">#(oneItem.GetPropertyValue<DateTime>("dataDePublicacaoBlog").ToString("dd MMMM yyyy",new CultureInfo("pt-PT")))</span>
<br>
<span class="qs-blog-publicado-por">#oneItem.GetPropertyValue("publicadoPorBlog") - OPINIÃO </span>
<span class="qs-blog-titulo-1page">#oneItem.GetPropertyValue("tituloBlog")</span>
</div>
<div class="col-md-12 col-sm-12 onclick="location.href='#oneItem.Url'" style="cursor:pointer"" style="margin-top:2em;">
<span class="qs-blog-resumo d-flex justify-content-start">#oneItem.GetPropertyValue("resumoBlog")</span>
<span class="d-flex justify-content-end"><a><img src=" /media/1027/icon_inf_verde.png"></a></span>
</div>
</div>
var twoItems = selection.Take(2).ToList();
if(twoItems.Any()){
<div class="row">
#foreach (var item in twoItems){
selection.Remove(item);
<div class="col-md-6 col-sm-12" onclick="location.href='#item.Url'" style="cursor:pointer">
<span class="card-text qs-blog-direcao-double">#item.GetPropertyValue("tipoDeDirecao")</span><br>
<img src="#Umbraco.TypedMedia(item.GetPropertyValue<int>("imagemPublicacaoBlog")).Url" style="height: 10em;margin-top: 2em;">
<div class="qs-blog-sideByside">
<span class="qs-blog-date-1page-double" id="qs-datetime">#(item.GetPropertyValue<DateTime>("dataDePublicacaoBlog").ToString("dd MMMM yyyy",new CultureInfo("pt-PT")))</span><br>
<span class="qs-blog-publicado-por-double"> #item.GetPropertyValue("publicadoPorBlog") - OPINIÃO </span>
</div>
<div class="qs-blog-titulo-1page-double">#item.GetPropertyValue("tituloBlog")</div>
<div class="qs-blog-resumo-blog d-flex justify-content-start">#item.GetPropertyValue("resumoBlog")</div>
<span class="d-flex justify-content-end"><a><img src=" /media/1027/icon_inf_verde.png"></a></span>
</div>
}
</div>
<br>
}
}
<!-- BLOG END -->
</div>
It could be something like this:
#{
int page = int.TryParse(Request["page"], out page) ? page : 0;
int pageSize = 5;
var selection = Model.Content
.Children()
.Where(x => x.IsVisible())
.Skip(page * pageSize)
.Take(pageSize)
.ToList();
}
<div class="container-fluid">
...
</div>
<a href="#Request.RawUrl.Split('?')[0]?page=#(page + 1)">
Load next #pageSize results
</a>
I'm trying to display data from the Umbraco in this order 1-2 in foreach loop (bootstarp columns), but my code is displaying in this order of columns 1-1, instead of 1-2 on loop. It does not add the second column to the second row just one column.
E.g. 1 item, then 2 items, then 1 item again with different columns displays.
whats the better approach to make 1-2 on loop of content?
I'm kinda lost on this one. Any help would be good.
<div class="container-fluid" style="padding-left: 117px;">
<div class="row" style="margin-top: 5em;">
<div class="col-lg-9 col-md-9 col-sm-9">
<!-- BLOG START-->
#foreach(var data in Model.Content.Children().Where(x => !x.GetPropertyValue<bool>("umbracoNaviHide"))){
if(data.HasValue("blogNested")){
var items = data.GetPropertyValue<IEnumerable<IPublishedContent>>("blogNested");
int i = 0 ;
foreach(var item in items){
<div class="row">
#if(i % 2 == 0) {
<div class="col-md-4 col-sm-12">
<div class="card">
<img src=" /media/1180/dude.jpg" style="height: 15em;">
</div>
</div>
<div class="col-md-6 col-sm-12">
<span class="card-text qs-blog-direcao">#(item.GetPropertyValue<string>("tipoDeDirecao"))</span><br><br>
<span class="qs-blog-date-1page">#(item.GetPropertyValue<string>("dataDePublicacaoBlog"))</span><br>
<span class="qs-blog-publicado-por"> #(item.GetPropertyValue<string>("publicadoPorBlog")) - OPINIÃO </span><br><br><br>
<span class="qs-blog-titulo-1page">#(item.GetPropertyValue<string>("tituloBlog"))</span>
</div>
<div class="col-md-12 col-sm-12" style="margin-top:2em;">
<span class="qs-blog-resumo d-flex justify-content-start">#(item.GetPropertyValue<string>("resumoBlog"))</span>
<span class="d-flex justify-content-end"><a><img src=" /media/1027/icon_inf_verde.png"></a></span>
</div>
}
else {
<div class="col-md-6 col-sm-12">
<span class="card-text qs-blog-direcao-double">#(item.GetPropertyValue<string>("tipoDeDirecao"))</span><br>
<img src=" /media/1182/tempo.jpg" style="height: 10em;margin-top: 2em;">
<div class="qs-blog-sideByside">
<span class="qs-blog-date-1page-double">#(item.GetPropertyValue<string>("dataDePublicacaoBlog"))</span><br>
<span class="qs-blog-publicado-por-double"> #(item.GetPropertyValue<string>("publicadoPorBlog")) - OPINIÃO </span>
</div>
<div class="qs-blog-titulo-1page-double">#(item.GetPropertyValue<string>("tituloBlog"))</div>
<div class="qs-blog-resumo-blog d-flex justify-content-start">#(item.GetPropertyValue<string>("resumoBlog"))</div>
<span class="d-flex justify-content-end"><a><img src=" /media/1027/icon_inf_verde.png"></a></span>
</div>
}
#{i++;}
</div>
}
}
}
<!-- BLOG START-->
</div>
It could be something like this
var items = data.GetPropertyValue<IEnumerable<IPublishedContent>>("blogNested")
.ToList();
while (items.Any())
{
var oneItem = items.First();
items.Remove(oneItem);
<div class="row">
<div class="col-md-12">
#oneItem.Id
</div>
</div>
var twoItems = items.Take(2).ToList();
if (twoItems.Any())
{
<div class="row">
#foreach (var item in twoItems)
{
items.Remove(item);
<div class="md-6">
#item.Id
</div>
}
</div>
}
}
This will render
<div class="row">
<div class="col-md-12">
<text>{{Id}}</text>
</div>
</div>
<div class="row">
<div class="md-6">
<text>{{Id}}</text>
</div>
<div class="md-6">
<text>{{Id}}</text>
</div>
</div>
<div class="row">
<div class="col-md-12">
<text>{{Id}}</text>
</div>
</div>
...
I have the following code and no matter what I have tried, I cannot get it to return only the data once.
<div class="container">
#for (int i = 0; i < Model.First().NumberOfRows; i++)
{
<div class="row">
#foreach (var columns in Model)
{
<div class="#columns.BootstrapColumns">
#columns.BodyText
</div>
}
</div>
}
</div>
I have tried putting a counter in the code moving the code around reading posts online but nothing works.
Am I missing something simple, the for loop works OK, but the foreach is causing the problem.
Move the foreach outside the for loop and it works Ok, but I need it to be inside the for loop.
<div class="container">
<div class="row">
<div class="col-md-3">
<p>column 1</p>
</div>
<div class="col-md-3">
<p>column 2</p>
</div>
<div class="col-md-3">
<p>column 3</p>
</div>
<div class="col-md-3">
<p>column 4</p>
</div>
<div class="col-md-4">
<p>Row 2 column 1</p>
</div>
<div class="col-md-4">
<p>Row 2 Column 2</p>
</div>
<div class="col-md-4">
<p>Row 2 Column 3</p>
</div>
<div class="col-md-12">
<p>Rows 3 column 1</p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<p>column 1</p>
</div>
<div class="col-md-3">
<p>column 2</p>
</div>
<div class="col-md-3">
<p>column 3</p>
</div>
<div class="col-md-3">
<p>column 4</p>
</div>
<div class="col-md-4">
<p>Row 2 column 1</p>
</div>
<div class="col-md-4">
<p>Row 2 Column 2</p>
</div>
<div class="col-md-4">
<p>Row 2 Column 3</p>
</div>
<div class="col-md-12">
<p>Rows 3 column 1</p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<p>column 1</p>
</div>
<div class="col-md-3">
<p>column 2</p>
</div>
<div class="col-md-3">
<p>column 3</p>
</div>
<div class="col-md-3">
<p>column 4</p>
</div>
<div class="col-md-4">
<p>Row 2 column 1</p>
</div>
<div class="col-md-4">
<p>Row 2 Column 2</p>
</div>
<div class="col-md-4">
<p>Row 2 Column 3</p>
</div>
<div class="col-md-12">
<p>Rows 3 column 1</p>
</div>
</div>
Camilo Terevinto IF I DO THAT I GET THE FOLLOWING WHICH IS NOT WHAT I'M AFTER
<div class="container">
<div class="row">
<div class="col-md-3">
<p>column 1</p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<p>column 2</p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<p>column 3</p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<p>column 4</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<p>Row 2 column 1</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<p>Row 2 Column 2</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<p>Row 2 Column 3</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>Rows 3 column 1</p>
</div>
</div>
</div>
Hi user7396598 I'm trying to get the code to display the following:
<div class="row">
<div class="col-md-4">row 1 col1</div>
<div class="col-md-4">row 1 col2</div>
<div class="col-md-4">row 1 col3</div>
</div>
<div class="row">
<div class="col-md-3">row 2 col1</div>
<div class="col-md-3">row 2 col2</div>
<div class="col-md-3">row 2 col3</div>
<div class="col-md-3">row 2 col4</div>
</div>
<div class="row">
<div class="col-md-12">row 3 col1</div>
</div>
My for loop get the number of rows, the foreach loop is then supposed to get the columns and display in column in the row.
I cannot see any other way of doing this without 1st getting the number of rows with the for loop.
======================View Model====================
public class NestedContentViewModel
{
public NestedContentViewModel() { }
public NestedContentViewModel(int numberOfRows, HtmlString bodyText, string image, string imageAlternativeText,string rowBackgroundColour, string bootstrapColumns, int numberOfColumns)
{
NumberOfRows = numberOfRows;
BodyText = bodyText;
Image = image;
ImageAlternativeText = imageAlternativeText;
RowBackgroundColour = rowBackgroundColour;
BootstrapColumns = bootstrapColumns;
NumberOfColumns = numberOfColumns;
}
public int NumberOfRows { get; set; }
public int NumberOfColumns { get; set; }
public string BootstrapColumns { get; set; }
public HtmlString BodyText { get; set; }
public string Image { get; set; }
public string ImageAlternativeText { get; set; }
public string RowBackgroundColour { get; set; }
}
==================Controller================
foreach (var rows in nestedContentRows)
{
int numberOfBootstrapColumns = rows.GetPropertyValue<IEnumerable<IPublishedContent>>("columns").Count();
string bootstrapColumn = "";
switch (numberOfBootstrapColumns)
{
case 1:
bootstrapColumn = "col-md-12";
break;
case 2:
bootstrapColumn = "col-md-6";
break;
case 3:
bootstrapColumn = "col-md-4";
break;
case 4:
bootstrapColumn = "col-md-3";
break;
default:
bootstrapColumn = "col-md-12";
break;
}
foreach (var columns in rows.GetPropertyValue<IEnumerable<IPublishedContent>>("columns"))
{
HtmlString bodyText = columns.HasValue("bodyText")? columns.GetPropertyValue<HtmlString>("bodyText"): new HtmlString(string.Empty);
model.Add(new NestedContentViewModel(numberOfRows: countNumberOfRows,bodyText: bodyText, image: null, imageAlternativeText: null,rowBackgroundColour: "cssTurquoiseBlue", bootstrapColumns: bootstrapColumn, numberOfColumns: numberOfBootstrapColumns));
}
}
So, the problem is in your Model structure. And naming conventions, your names cause all manner of confusion. Currently your model is a list of your NestedContentViewModel objects, and you are making a new NestedContentViewModel for each BodyText value.
Your BodyText should actually be a collection within each NestedContentViewModel. This would "relate" your BodyText(column info) to a NestedContentViewModel(row). Also, move rowNumber out of NestedContentViewModel and put it in the parent that contains a List
Then your loops would look like this:
#foreach (var row in Model)
{
<div class="row">
#foreach (var column in row.ColumnCollection)
{
<div class="#row.BootstrapColumns">
#column.BodyText
</div>
}
</div>
}
I hope this sets you in the right direction. If you need help restructuring the models you may want to edit and clean up the question text.
When returning a partial view to the browser, on the first load the partial view renders as I'v laid it out with no issues but when I hit my submit button and call an ajax request, it returns inside itself.
For example - on first run it renders:
<div id="search" class="col-md-4">
...
</div>
But after the postback it renders as
<div id="search" class="col-md-4">
<div id="search" class="col-md-4">
...
</div>
</div>
My View with the Partial View render is:
#model SpecCheck.Portals.Web.UI.ViewModels.Search
#{
ViewBag.Title = "Search";
}
#Html.Action("_GetSearch", "Home");
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-gears"></i> Discontinued Machines</h3>
</div>
<div class="panel-body">
<select class="form-control">
<option>All Tiers</option>
<option>Tier 2 / Tier 3</option>
<option>Interim Tier 4 / Tier 4</option>
</select>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<i class="fa fa-folder-open"></i> Search by Category
</h3>
</div>
<div class="panel-body">
<select class="form-control">
<option>Select a product category</option>
<option>Construction</option>
<option>Technologies</option>
</select>
</div>
</div>
</div>
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-star"></i> Latest Model Data</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
And my partial View:
#model IEnumerable<SpecCheck.Portals.Web.UI.ViewModels.Search>
<div id="modelSearch" class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-search"></i> Search by Model / Manufacturer</h3>
</div>
<div class="panel-body">
#using (Ajax.BeginForm("_GetSearch", "Home", new AjaxOptions() { UpdateTargetId = "modelSearch" }))
{
#Html.AntiForgeryToken()
<div class="input-group">
#Html.TextBox("search", null, new {id = "name", #class = "form-control", placeholder = "Please enter a manufacturer or model"})
<span class="input-group-btn">
<button id="search" class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
</span>
</div>
if (Model != null)
{
<div id="searchResults" class="fade">
#foreach (var s in Model)
{
<div class="result">
#switch (s.ResultType)
{
case "Man":
#s.Manufacturer
break;
case "Mod":
#s.Manufacturer #s.Model
<img src="~/Images/General/(#s.TierId).png" alt="Tier #s.TierId"/>
break;
}
</div>
}
</div>
}
}
</div>
</div>
</div>
And my Ajax call:
public PartialViewResult _GetSearch(List<Search> model, string search)
{
if (search != null)
{
var results = SearchModels(search).ToList();
model = results;
}
return PartialView("_Search", model);
}
Any idea why this might be happening?
Create a id before the partial view call.
And after the ajax call and append the partial view to that div. Like below
Don't forgot to empty the div before you append.
<div id="yourdivid">
#Html.Action("_GetSearch", "Home");
</div>