We Keep Coding

MVC Razor View - nested foreach displays the correct info but on a different line

In View have the following foreach loop to display links:
#model List<IGrouping<string, FileInfo>>
#{
ViewData["Title"] = "Index";
int i = 0;
}
<div class="container-fluid main-container">
<div class="col-md-3 sidebar">
<ul class="nav nav-pills nav-stacked">
#foreach (var link in #Model)
{
<li>#link.Key <span>(***)</span></li>
foreach(var item in Model[i])
{
#item.Culture;
}
i++;
}
</ul>
</div>
The nested foreach displays the correct info but on a different line - I would like it positioned where the *** is in code listing.
Also I would like a comma ',' placed between each culture.
Any help appreciated.
Current output showing as:
EDIT: updated code to following and still getting same issue
#foreach (var link in #Model)
{
<li>
#link.Key
<span>
#foreach(var item in link)
{
#item.Culture
}
</span>
</li>
}

What about something like this? (untested)
<div class="container-fluid main-container">
<div class="col-md-3 sidebar">
<ul class="nav nav-pills nav-stacked">
#foreach (var link in #Model)
{
<li>#link.Key <span>
#String.Join(", ", link.Select(item => item.Culture).ToArray())
</span></li>
}
</ul>
</div>

Do you mean like this ?
<div class="container-fluid main-container">
<div class="col-md-3 sidebar">
<ul class="nav nav-pills nav-stacked">
#foreach (var link in #Model)
{
<li>#link.Key <span>
foreach(var item in Model[i])
{
#item.Culture;
#:,
}
</span></li>
i++;
}
</ul>

With the power of razor something like this should work.
Edit: just realised you want all cultures so:
#foreach (var link in #Model)
{
var Culture = "";
#foreach( var item in Model[i])
{
Culture += string.format("{0}," #item.culture;)
}
<li>#link.Key <span>(#Culture.trimend(','))</span></li>
i++;
}

Getting Data from Multiple Partial Views in MVC 4

I am trying to make a view which will have Partial Views being generated dynamically. Each Partial view is having a TextBox in which users put the name of a merchant.
Below is my view code:
#model BrightMediaTest.merchant
#{
ViewBag.Title = "AddMerchant";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval")
<h2>AddMerchant</h2>
#Ajax.ActionLink("Add More", "AddMerchantPartial", "MerchantDB", new AjaxOptions { UpdateTargetId = "ajax-partial-view-box", InsertionMode = InsertionMode.InsertAfter })
#using (Html.BeginForm("AddMerchant", "MerchantDB", FormMethod.Post, new { }))
{
<ul style ="list-style: none;">
<li>
#Html.LabelFor(m => m.merchantName)
</li>
<li>
#Html.TextBoxFor(m => m.merchantName)
</li>
</ul>
<div id="ajax-partial-view-box">
</div>
<input type="submit" value="Add" />
}
As you can see there is a ActionLink in the Code "Add More", which actually adds partial view in the div "ajax-partial-view-box".
So, what I want to achieve is that when I submit the form. I want to take the text of all the TextBoxes which are added in the div "ajax-partial-view-box" dynamically by clicking the link "Add More".
There is no id associated with the TextBoxes in the partial views. Any help or suggestions is appreciated.
Here is my partial view code:
#model BrightMediaTest.merchant
<ul style="list-style: none;">
<li>
#Html.LabelFor(m => m.merchantName)
</li>
<li>
#Html.TextBoxFor(m => m.merchantName)
</li>
</ul>
So, I am trying to add all those merchants names in the database when the form is submitted. I have an Action "AddMerchant" which i will use to add all those merchant name in the database.
My merchant ViewModel is as follows:
namespace BrightMediaTest
{
using System;
using System.Collections.Generic;
public partial class merchant
{
public merchant()
{
this.stores = new HashSet<store>();
}
public long merchantID { get; set; }
public string merchantName { get; set; }
public virtual ICollection<store> stores { get; set; }
}
This code was generated using Entity Framework.
Thanks

Ok, so I recreated a sample of your issue and it boils down to the fact that you can't post a list without specifying an index in the name attribute. See: MVC Form not able to post List of objects
At the end of the day, before the user clicks submit you will have n merchantName inputs. On your controller post action you will have something like this:
[HttpPost]
public ActionResult AddMerchant(List<merchant> merchant)
{
//post logic
}
In your current setup, the parameter will be null, BUT your form values in your HttpContext.Request will not be, they will look, something like this:
{merchantName=test1&merchantName=test2}
You need to specify where those inputs are supposed to bind to, right now they are lost sheep in a huge pasture. That is done by specifying an index of the object that these inputs belong to.
Such as: merchant[i].merchantName where i is some index.
Once the partials are added they need to have an object class name and an index prepended to the merchantName value. Your html, before the user clicks add, would look something like this:
<ul style="list-style: none;">
<li>
<label for="merchantName">merchantName</label>
</li>
<li>
<input id="merchantName" name="merchant[0].merchantName" value="" type="text">
</li>
</ul>
<div id="ajax-partial-view-box">
<ul style="list-style: none;">
<li>
<label for="merchantName">merchantName</label>
</li>
<li>
<input id="merchantName" class="valid" aria-invalid="false" name="merchant[1].merchantName" value="" type="text">
</li>
</ul>
<ul style="list-style: none;">
<li>
<label for="merchantName">merchantName</label>
</li>
<li>
<input id="merchantName" class="valid" aria-invalid="false" name="merchant[2].merchantName" value="" type="text">
</li>
</ul></div>
<input value="Add" type="submit">
Then you form data will look something like:
{merchant%5b0%5d.merchantName=test1&merchant%5b1%5d.merchantName=test2&merchant%5b2%5d.merchantName=test3}
And your action parameter will have 3 values in it with the correct data.
Now, how you do this is another matter. There are a number of ways to handle it through Razor or Javascript

What you want to do is lose the AjaxHelper. You'll need to take more control over your merchant parital insertion.
Add More
Wire this up with jQuery. Use index to track your merchants added to the form so you can uniquely identity them later.
var index = 1; // start with 1 because your form already has a static one
$(".add-merchant").on("click", function(event) {
event.preventDefault();
$.ajax({
url: $(this).attr("href"),
method: "GET",
data: { index: index }
})
.done(function(partialViewResult) {
$("#ajax-partial-view-box").append(partialViewResult);
});
});
Modify your action
public ActionResult AddMerchantPartial(int index)
{
ViewBag.Index = index;
return View(new merchant());
}
Now in your partial you need to include the index and manually write the input elements.
#model merchant
#{
var index = ViewBag.Index as int;
var id = Model.merchantName + "_" + index + "_"; // merchantName_i_
var name = Model.merchantName + "[" + index + "]"; // merchantName[i]
}
<ul>
<li><label for="#id">#Model.merchantName</label></li>
<li><input id="#id" name="#name" type="text" value="#Model.merchantName" /></li>
</ul>
Normally, I refrain from using ViewBag. You might consider adding index to the view model.
Your main form becomes
#using (Html.BeginForm("AddMerchant", "MerchantDB", FormMethod.Post, new { }))
{
var id = Model.merchantName + "_0_";
var name = Model.merchantName + "[0]";
<ul style ="list-style: none;">
<li>
<label for="#id">#Model.merchantName</label>
</li>
<li>
<input id="#id" name="#name" type="text" value="" />
</li>
</ul>
<div id="ajax-partial-view-box"></div>
<input type="submit" value="Add" />
}
And your post method would be
[HttpPost]
public ActionResult AddMerchant(List<merchant> merchants)
{
...
}

How can I create a new column after 8 items for the data pulled from database in MVC

Currently this is my code to pull a list of items from database an show under a Menu item:
<div class="top">
<ul>
<li class='itemCaption f17o'> </li>
#foreach (var category in Model.CatList)
{
<li>
<a href="/c/#category.Id/#category.Name" class='white'>#category.Name</a>
</li>
}
</ul>
</div>
but this displays all the items under one column only.How can i split the list into another column as i reach 8th item in one column?

#foreach (var category in Model.CatList.Select((Value, i => new { i, Value }))
{
if (category.i % 8 == 0)
{
#("</ul></li><li><ul>")
}
<li>
<a href="/c/#category.Value.Id/#category.Value.Name" class='white'>#category.Value.Name</a>
</li>
}

Toggle visibility of list item

I am using MVC 4 with Razor view engine.
I want to display a nested unordered list comprised of years as parents and months as children.
Consider the following HTML:
<div>
<ul>
#foreach (var yr in Dates.Select(x => x.Year).Distinct())
{
<li>#yr</li>
<ul class="child" style="display: none">
#foreach (var mo in Dates.Where(x => x.Year == yr).Distinct())
{
<li id="#yr">#mo.ToString("MMMM")</li>
}
</ul>
}
</ul>
</div>
I have added the following script to make the ".child" (dis)appear when I click on ".parent" anchor.
<script type="text/javascript">
$(function () {
$(".parent").click(function () {
$(this).closest("ul").find(".child").toggle("fast")
return false;
});
});
</script>
However it toggles ALL ".child" items in the document. How to make it toggle only the child one?

Your html is invalid: you can't have a <ul> element nested directly within another <ul>.
Your <ul class="child"> should be within the same <li> element as the corresponding anchor element:
<div>
<ul>
#foreach (var yr in Dates.Select(x => x.Year).Distinct())
{
<li>#yr
<ul class="child" style="display: none">
#foreach (var mo in Dates.Where(x => x.Year == yr).Distinct())
{
<li id="#yr">#mo.ToString("MMMM")</li>
}
</ul>
</li>
}
</ul>
</div>
Then you can do this:
$(function () {
$(".parent").click(function () {
$(this).siblings(".child").toggle("fast");
// OR
$(this).next().toggle("fast");
return false;
});
});
The way you had it, $(this).closest("ul") goes up to the top-level <ul>, so then when you use .find(".child") it finds all elements with that class anywhere in the top-level <ul>.

jquery show/hide - start open if condition true

Working on a jQuery show hide box for filter checkboxes on my MVC3 razor page.
I have a page which changes depending on whether these checkboxes are checked or not, but I'd like them to stay open if any of the checkboxes are unchecked.
Currently the show/hide works, but how do I determine whether the page loads with them shown/hidden based on if any checkboxes are checked?
I can return a boolean value to state if any are unchecked or not, and was really looking for a jQuery genius to help me with the best/tidiest way to achieve this.
Here is an example of one of the filters, where modeFilterList is a generic list for each checkbox, containing the name, ID and checked status:
<div id="filterwrap">
<h2 class="filter">Filter your results</h2>
#using (Html.BeginForm())
{
<ul id="filter">
<li>
<h2>
Modes</h2>
<div class="filtercontent">
#foreach (var item in modeFilterList)
{
<div class="radiorow">
#Html.CheckBox("mode_" + item.ID, item.Checked)
#item.Name
</div>
}
</div>
<!-- end of filtercontent -->
</li>
</ul>
}
</div>
This is the jquery code for showing and hiding:
$('#filterwrap li h2').live('click', function (e) {
$(this).next('div.filtercontent').slideToggle() ;
e.preventDefault(); //stops page jumping to top
});
I thought about having a hidden field containing a true/false value just below the h2 that could be read when the page reloads, but there must be a nicer way to do it with jQuery!

you can use Jquery toggle() function or $("componentID").show() or hide() function

Ok, not crazy about the solution I've come to, so if anyone has anything better and tidier, let me know.
So, for each filter, I pass a bool parameter via viewbag to show if any checkboxes have been selected.
bool modeStatus = ViewBag.modeStatus;
I then added a hiddenfield with class:
<div id="filterwrap">
<h2 class="filter">Filter your results</h2>
#using (Html.BeginForm())
{
<ul id="filter">
<li>
#Html.Hidden("mode", modeStatus, new { #class = "filteritem" })
<h2>
Modes</h2>
<div class="filtercontent">
#foreach (var item in modeFilterList)
{
<div class="radiorow">
#Html.CheckBox("mode_" + item.ID, item.Checked)
#item.Name
</div>
}
</div>
<!-- end of filtercontent -->
</li>
</ul>
}
</div>
and this code within the (document).ready
$("input.filteritem:hidden").each(function () {
if ($(this).val() == "True") {
$(this).nextAll('div.filtercontent').show();
}
});