Binding List to HTML - nancy

does anyone know how to bind a list item to html in Nancy?
Here's the code I have:
Get["/topics"] = parameters
=>
{
var model = new TopicsModel();
model.Load(); // it populates some rows of type TopicModel
return Negotiate.WithStatusCode(HttpStatusCode.OK)
.WithModel(model)
.WithView("topics");
};
My TopicsModel:
public class TopicsModel
{
public void Load() { Models = ...}
public List<TopicModel> Models { get; set; }
}
and the TopicModel:
public class TopicModel
{
public string TopicName { get; set; }
public string TopicImageUrl { get; set; }
}
I've tried the below in my HTML but none of them seem to be working.
<div class="row">
<h3>TopicName[0]</h3>
<h3>#Model.Models[0].TopicName</h3>
<h3>Models[0].TopicName</h3>
</div>
The results for these three are (in order):
TopicName[0]
System.Collections.Generic.List`1[...Models.TopicModel][0].TopicName
Models[0].TopicName
I have also tried other things but none have worked.
Any help would be greatly appreciated.
Many thanks,
Update: Apparently it's not possible. I ended up using the Razor engine which works for my use-case.

https://github.com/NancyFx/Nancy/wiki/The-Super-Simple-View-Engine#iterators
#ForEach.Models
<div class="row">
<h3>#Current.TopicName</h3>
</div>
#EndEach
Be aware that Simple Simple View Engine does not support nested loops (currently)

Related

ng-init for select tag in angularJs

I tried to make a dropdown from a list of objects civility. But I dont know how to select the first item with an complexe object. I already do it with simple object and I don't understand why it doesn't work with my new dropdown list.
This is my select tag :
<select class="input-xlarg" id="listCivilities" ng-options="civility.Label for civility in civilities track by civility.CivilityID" ng-model="customer.Civility" ng-init="customer.Civility" required=""></select>
My list is loaded with an return of a controller asp.net MVC.
This is my model:
public int CivilityID { get; set; }
public string Label { get; set; }
public string Abbreviation { get; set; }
public int Order { get; set; }
public int CompanyID { get; set; }
So, like I said, my dropdown list load and display fine but I don't succeed to select the item who interest me.
If someone can help me to understand why it doesn't work.
Thanks.
Use ng-model as customer.CivilityID to bind CivilityID on selection.
and
civility.Label for civility.CivilityID in civilities in ng-options
Use this Selected Tag :
<select class="input-xlarg" id="listCivilities" ng-model="customer.CivilityID" ng-options="civility.Label for civility.CivilityID in civilities track by civility.CivilityID" required=""></select>
in Controller :
$scope.customer = {CivilityID : 1};
Updates : here is working Plunker

Polulate dynamic control in angularjs

I've been developing a sample Single Page Web application using AngularJS + Asp.net Web API. I've been stuck at one point where I am not able to help my self, I've tried googling without any success.
My scenario is as following.
I've two entity 1)Car & 2)Dealer. I've one link table Car_Dealer. As per my sample scenario a specific car can be sold at multiple dealer. So my models at server side looks like below.
Car Model
namespace HelloWebAPI.Models
{
using System;
using System.Collections.Generic;
public partial class Car
{
public Car()
{
this.Car_Dealer = new HashSet<Car_Dealer>();
}
public int CarId { get; set; }
public string CarName { get; set; }
public string CarDetails { get; set; }
public virtual ICollection<Car_Dealer> Car_Dealer { get; set; }
}
}
Dealer Model
namespace HelloWebAPI.Models
{
using System;
using System.Collections.Generic;
public partial class Dealer
{
public Dealer()
{
this.Car_Dealer = new HashSet<Car_Dealer>();
}
public int DealerId { get; set; }
public string DealerName { get; set; }
public string DealerLocation { get; set; }
public virtual ICollection<Car_Dealer> Car_Dealer { get; set; }
}
}
Car Dealer Model
namespace HelloWebAPI.Models
{
using System;
using System.Collections.Generic;
public partial class Car_Dealer
{
public int Car_DealerId { get; set; }
public int CarId { get; set; }
public int DealerId { get; set; }
public virtual Car Car { get; set; }
public virtual Dealer Dealer { get; set; }
}
}
My server side controllers POST method is as below.
CarController.CS
public void Post(Car NewCar)
{
//to save the car data in the database.
Car NewCarObj = new Car();
NewCarObj.CarName = NewCar.CarName;
NewCarObj.CarDetails = NewCar.CarDetails;
objEntities.Cars.Add(NewCarObj);
foreach (Car_Dealer dealer in NewCar.Car_Dealer)
{
dealer.CarId = NewCarObj.CarId;
dealer.DealerId = NewCarObj.DealerId;
objEntities.Car_Dealers.Add(dealer);
objEntities.SaveChanges();
}
}
Code in App.js file is as below.
App.JS
var CreateCarCtrl = function ($scope, $location, Car, Dealer) {
$scope.items = Dealer.query({ q: $scope.query });
$scope.save = function () {
Car.save($scope.item);
$location.path('/CarListingScreen');
};
};
And this one is chunk of code from my template file that is AddCar.HTML
AddCar.HTML
<tr>
<td>
<label class="control-label" for="DealerName">Add Dealer</label>
</td>
<td>
<ul>
<li>
<select ng-model="item.DealerName">
<option ng-repeat="item in items">{{item.DealerName}}</option>
</select>
[<a href ng-click="items.splice($index, 1)">Remove</a>]
</li>
<li>[<a href ng-click="items.push({})">Add More</a>]
</li>
</ul>
</td>
</tr>
As we can see in Template file, I am trying to render the list of dealer in Drop Down list by two way binding as I am using the same template for Editing purpose also.
Hopefully you've got the scenario.
Now following are the questions for which I am looking for solutions
I should replace {{item.DealerName}} with something else so I can get that data back at server. What should be replaced ?
Neither Remove Nor Add More functionality is working. How can I make it functioning ?
How can I load data while editing the record ? I mean getting dealers filled in Dropdown & Creating number of dropdown accordingly to handle dealer ?
Please note here I can add more than one dealer so it should be handled in template also.
Edit
My form looks like below.
As we can see in screen shot user can add multiple dealers for specific car & Can remove added item also.
How to bind dropdown list of dealer as it's <Collection> of car dealer ?
How can I render Dropdown list dynamically while clicking Add More button & Getting this values back at server side?
Thanks a lot in advance.
There are still essential parts missing form your code so, i cannot answer all questions. But let me take a try
I should replace {{item.DealerName}} with something else so I can get
that data back at server. What should be replaced ?
The ng-model for this should be item.DealerId. When you post the complete car model it does not need to have the complete dealer object, just the Id should be enough. On the server you should get the dealer data based on your association before saving the car.
Neither Remove Nor Add More functionality is working. How can I make it functioning ?
I can tell remove is not working because the remove button is outside the ng-repeat and $index is not available outside, assuming you are trying Dealer to be removed by placing the remove button against each dealer. Try
<select ng-model="item.DealerName">
<option ng-repeat="item in items">{{item.DealerName}}</option>
[<a href ng-click="items.splice($index, 1)">Remove</a>]
</select>
For third point
How can I load data while editing the record ? I mean getting dealers
filled in Dropdown & Creating number of dropdown accordingly to handle
dealer ?
There should be a model on client side for list of dealers, which you can predefine or get it from server.
If the car has multiple dealers like Car.dealers, do a ng-repeat to render them
<div ng-repeat='dealer in Car.dealers'>
<select ng-model='dealer.id'ng-options='d.name for d in allDealers'>
</div>

DbUpdateConcurrencyException when modifying data

I have been searching around for a bit now. I have tried a couple solutions involving catching the OptimisticConcurrency and adding:
"#Html.HiddenFor(model => model.OrganizationID)"
to my delete page. My index (list), create, and edit pages work like a charm. However, when I go to delete a row it gives me the error below:
DbUpdateConcurrencyException
Store update, insert, or delete statement affected an unexpected
number of rows (0). Entities may have been modified or deleted since
entities were loaded. Refresh ObjectStateManager entries.
I have followed a tutorial to build a Database First application. Currently, I am just bringing in data from my Organizations table until I can get it working smoothly. My organization model looks like this (which was auto-generated from "Add Code Generation Item"):
//------------------------------------------------------------------------------
// <auto-generated>
// This code was generated from a template.
//
// Manual changes to this file may cause unexpected behavior in your application.
// Manual changes to this file will be overwritten if the code is regenerated.
// </auto-generated>
//------------------------------------------------------------------------------
namespace VAGTC.Models
{
using System;
using System.Collections.Generic;
public partial class Organization
{
public Organization()
{
this.Contact_Title = new HashSet<Contact_Title>();
this.Organization_Address = new HashSet<Organization_Address>();
this.Organization_Business_Type = new HashSet<Organization_Business_Type>();
this.Organization_Country = new HashSet<Organization_Country>();
this.Organization_Email = new HashSet<Organization_Email>();
this.Organization_Membership = new HashSet<Organization_Membership>();
this.Organization_Notes = new HashSet<Organization_Notes>();
this.Organization_Phone = new HashSet<Organization_Phone>();
this.Organization_Website = new HashSet<Organization_Website>();
this.Contacts = new HashSet<Contact>();
this.Organization_Industry_Code = new HashSet<Organization_Industry_Code>();
}
public int OrganizationID { get; set; }
public string Name { get; set; }
public virtual ICollection<Contact_Title> Contact_Title { get; set; }
public virtual ICollection<Organization_Address> Organization_Address { get; set; }
public virtual ICollection<Organization_Business_Type> Organization_Business_Type { get; set; }
public virtual ICollection<Organization_Country> Organization_Country { get; set; }
public virtual ICollection<Organization_Email> Organization_Email { get; set; }
public virtual ICollection<Organization_Membership> Organization_Membership { get; set; }
public virtual ICollection<Organization_Notes> Organization_Notes { get; set; }
public virtual ICollection<Organization_Phone> Organization_Phone { get; set; }
public virtual ICollection<Organization_Website> Organization_Website { get; set; }
public virtual ICollection<Contact> Contacts { get; set; }
public virtual ICollection<Organization_Industry_Code> Organization_Industry_Code { get; set; }
}
}
This is the Delete ActionResult in my Organization controller:
//
// GET: /Organization/Delete/5
public ActionResult Delete(int id)
{
using (var db = new VAGTCEntities())
{
return View(db.Organizations.Find(id));
}
}
//
// POST: /Organization/Delete/5
[HttpPost]
public ActionResult Delete(int id, Organization organization)
{
try
{
// TODO: Add delete logic here
using (var db = new VAGTCEntities())
{
db.Entry(organization).State = System.Data.EntityState.Deleted;
db.SaveChanges();
}
return RedirectToAction("Index");
}
catch
{
return View();
}
}
and on my Index page it declares the primary key:
#Html.ActionLink("Delete", "Delete", new { id=item.OrganizationID })
Out of curiosity I decided to try adding
"#Html.HiddenFor(model => model.OrganizationID)"
to the bottom, under BeginForm, instead of at the top of the page in fieldset and under legend tags:
#using (Html.BeginForm()) {
<p>
#Html.HiddenFor(model => model.OrganizationID)
<input type="submit" value="Delete" /> |
#Html.ActionLink("Back to List", "Index")
</p>
}
Low and behold - it worked.
I still want to post this! Perhaps someone else will find it and it will help them.
Although I don't know 100% why it is - could someone shed some light on the matter?
when you use the from helper
#using (Html.BeginForm()) {
it spits the following output
<form>
</form>
if you want the hidden field to be posted you need to get it inside the form otherwise it will not be posted, that was the reason the OrganizationID was 0 when you put the hidden field outside the form ...

EF 4.1 Codefirst WPF Eager Loading Data Binding

I am having problems databinding to EF code first. I need to be using Eager Loading, but I am running into some issues with databinding. I have the following classes:
public class Context : DbContext
{
DbSet<A> As;
DbSet<B> Bs;
DbSet<C> Cs;
}
public class A
{
public ICollection<B> Bs { get; set; }
public string Name { get; set; }
}
public class B
{
public ICollection<C> Cs { get; set; }
public string Name { get; set; }
}
public class C
{
public string Name { get; set; }
}
I am data binding Context.As to a Treeview, using the below code:
Context.As.Load();
tvItems.ItemsSource = Context.As.Local;
This works as expected, however, it does not automatically load the child properties, Bs, and subsequently, Cs. So, I found that lazy loading can help with this, like so:
Context.As.Load();
tvItems.ItemsSource = Context.As.Include(u=>u.Bs);
From my reading, this should automatically load at least the first level of child properties. However, this will not data bind, as I did not use .Local
.Include() returns IQueryable, which does not support .Local. I can use .ToList(), but this will not automatically update when I add items.
So, how the hell am I supposed to be doing this?
You could try this:
Context.As.Include(a => a.Bs).Load();
tvItems.ItemsSource = Context.As.Local;

How to get values of Dropdownlist MVC 2 for insert in DB

I am beginning in this issue MVC 2 I hope you can help me. I created a basic model
public class RegisterModel
{
public string Name { get; set; }
public int idCountry { get; set; }
public string Country { get; set; }
}
And I have in the controller the following
public ActionResult Register()
ViewData["country"] = new SelectList(db.PAIS.ToList(), "ID_PAIS", "DESC_PAIS");
return View();
}
My view
<div class="editor-field">
<%= Html.DropDownList("country")%>
</div>
but when I want save on the data base show me a error
[HttpPost]
public ActionResult Register(RegisterModel model)
{
USUARIO usuario = new USUARIO()
{
name = model.name,
city = model.city // show me a error
}
}
Could you please tell me how to save in the data base from this parameters from dropdownlist in my aplication.
Please take a look at this question. I think it may help answer your question.

Resources