How To send a GenericList Items To Controller - asp.net-mvc

I Have a Modle like:
public class Invoice
{
int Code{get;set;}
List<InvoiceItem> InvoiceItems{get;set;}
}
I fill InvoiceItems in a Table and I want Get Table Item as InvoiceItems in Controller
[HttpPost]
public virtual ActionResult Create(Invoice model)
{
//Save Invoice
return View();
}
How Can I fill InvoiceItems and send it to controller?

The outcome of your html should look something like this
<input type="text" name="Code" value=""/>
...
<table>
<thead>
<tr>
<th>#</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="hidden" name="InvoiceItems[0].Name" value="InvoiceItem1"/></td>
</tr>
<tr>
<td>2</td>
<td><input type="hidden" name="InvoiceItems[1].Name" value="InvoiceItem2"/></td>
</tr>
<tr>
<td>3</td>
<td><input type="hidden" name="InvoiceItems[2].Name" value="InvoiceItem3"/></td>
</tr>
</tbody>
</table>
<button type="submit">Submit</button>
</form>
This way you can use plain form submission or ajax
// assuming you have only one form. otherwise use more specific selector
var $form = $("form");
var data = $form.serializeArray();
var url = $form.attr("href") || document.URL;
$.post(url, data, yourCallbackFunction);
The rest is done by ModelBinder. The key part is to maintain InvoiceItems indexes. They must start from 0 and be sequential. i.e. 0,1,2,3 etc.. If you skip some index, modelbinder will end binding your list where indexes are broken.

lists can be represented by quasi-2-dimensional-arrays:
$arr =
array(
array(
{
"key":"value",
"key2":"value2"
},
{
"key":"value",
"key2":"value2"
}
),
array(
{
"key":"value",
"key2":"value2"
},
{
"key":"value",
"key2":"value2"
}
)
);
(json_encode)
can be read e.g. with $val = $arr["0"]["0"]["key2"];
this is just an example > use and combine Array-, Object- and Json-Syntax to get your list match your needs. working with json is very handy and features very "sourced" and object-oriented coding and easy data handling.
ps: to me your question seems rather unclear, dont know what you are exactly aiming at...

Related

MVC- drop down values not binding for all the rows in a table

The model:
public class EdituserModel : IEnumerable<EdituserModel>
{
public int UserID { get; set; }
public string Status { get; set; }
public IEnumerator<EdituserModel> GetEnumerator()
{
return ((IEnumerable<EdituserModel>)editUser).GetEnumerator();
}
IEnumerator IEnumerable.GetEnumerator()
{
return ((IEnumerable<EdituserModel>)editUser).GetEnumerator();
}
}
The View:
<table id="tbltbl_usertable" class="tableasd" cellpadding="0" cellspacing="0">
<tr>
<th style="width:115px;text-align: center; ">User Id</th>
<th style="width:100px;text-align: center;">Status</th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
#foreach (var user in Model)
{
<tr>
<td class="UserID" style="text-align: center; ">
<span style="text-align: center;">#user.UserID</span>
</td>
<td class="Status" style="text-align: center;">
<select id="SelectedStatusId" name="SelectedStatusId" value="#user.Status" >
<option value="A" selected="selected">Admin</option>
<option value="U">Dashboard user</option>
</select>
</td>
</tr>
}
</table>
From the above code, the UserID is being displayed properly (8 rows for 8 users). But only one drop down is being displayed for the first row and not the subsequent rows. Is there something I'm missing?
The way you're binding to the select is wrong. You can't set an option in the dropdown by setting the value attribute of select (try it). Besides, you're setting selected="selected" on the first option. I'm guessing that is selected in all the dropdowns.
"Only one drop down is being displayed for the first row and not the subsequent rows":
I don't know how this is possible. I have tested this in my system and it wasn't reproducible.
So, how to bind your value to the dropdown? You should use MVC's DropdownListFor HTML Helper.
#for (var i = 0; i < Model.Count(); i++)
{
<tr>
<td class="UserID" style="text-align: center; ">
<span style="text-align: center;">Model.editUser[i].UserID</span>
</td>
<td class="Status" style="text-align: center;">
#Html.DropDownListFor(m => Model.editUser[i].Status, new SelectList(new[] {
new { Text = "Admin", Value = "A" },
new { Text = "Dashboard user", Value = "U" },
}, "Value", "Text", Model.editUser[i].Status))
</td>
</tr>
}
You should use a for loop instead of foreach whenever you're looping and creating form elements in MVC (Why though?). This generates appropriate name attribute which are important when submitting forms.
(We usually get the SelectListItems in a ViewBag and bind. But there is an issue in MVC with DropDownList helper when we are looping)
"BUT I DONT CARE ABOUT GIVING PROPER NAMES TO FORM ELEMENTS
OR DROPDOWNLISTFOR OR ANY OF THAT STUFF. I JUST WANT TO BIND MY DROPDOWN OKAY?":
Then:
#for (var i = 0; i < Model.Count(); i++)
{
<tr>
<td class="UserID" style="text-align: center; ">
<span style="text-align: center;">#Model.editUser[i].UserID</span>
</td>
<td class="Status" style="text-align: center;">
<select id="SelectedStatusId" name="SelectedStatusId">
<option value="A" #(Model.editUser[i].Status == "A" ? "selected" : "" )>Admin</option>
<option value="U" #(Model.editUser[i].Status =="U" ? "selected" : "" )>Dashboard user</option>
</select>
</td>
</tr>
}
UPDATE: I saw your update now reagarding the Enumerator. See, this is why I asked you post all the relevant code. You said your model for the page was IEnumerable<EdituserModel>. My asnwer would still work. Replace all the Model[i] with Model.editUser[i] (otherwise you'd have implement IList as well)

two-way binding of a single object in observableArray

My page is as follows:
<button id="add">Add Data</button>
<button id="show">show</button>
<table>
<tr style="vertical-align:top">
<td>
<table border="1">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody data-bind="foreach: students">
<tr>
<td data-bind="text: id"></td>
<td>
<input type="text" data-bind="value: name" />
</td>
<td> Select
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table id="data">
<tbody data-bind="with: selectedData">
<tr>
<td>Id</td>
<td>
<input type="text" data-bind="value: id" />
</td>
</tr>
<tr>
<td>Name</td>
<td>
<input type="text" data-bind="value: name" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="Close" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
The javascript is as follows:
function ViewModel() {
var self = this;
self.students = ko.observableArray([]);
self.showData = function (dt) {
if (window.console) console.log(dt);
self.selectedData(dt);
$('#data').show();
}
this.selectedData = ko.observable();
}
$(function () {
window.appViewModel = new ViewModel();
ko.applyBindings(window.appViewModel);
$('#add').click(function () {
var model = window.appViewModel;
$.each(students, function (idx, student) {
if (window.console) console.log(student);
model.students.push(student);
});
$('table').show();
});
$('table').hide();
$('input').click(function () {
$('#data').hide();
});
$('#show').click(function () {
var s = JSON.stringify(window.appViewModel.students());
alert(s);
});
});
Preview:
In pic, I click on the select corresponding to student with id = 3. The other table shows up with the selected student details. Suppose I enter something in textbox 1, textbox 2 doesn't update, and vice versa.
What to do to make that happen?
Fiddle: http://jsfiddle.net/deostroll/YdrQf/1/
Your inputs aren't updating because the id and name values are not being stored or bound against observables, which are the special object that knockout provides specifically for this purpose. You can easily solve this with your code by adding a new Student type:
function Student(data) {
this.id = ko.observable(data.id);
this.name = ko.observable(data.name);
};
and use it to populate your students array with:
$.each(students, function (idx, student) {
if (window.console) console.log(student);
model.students.push(new Student(student));
});
With those properties now being observables, their changes will propagate to the UI. Here is the fiddle, with these two minor changes.
That being said, I think you have largely missed the point of Knockout. I strongly suggest you go through the Knockout tutorials, if you haven't done so already.
You're use of jQuery to create click functions for your viewmodel really goes against the model that Knockout encourages. Please take a look at this fiddle, which converts your code into 100% Knockout, using viewmodel functions, and drops all the jQuery.

if statement should check part of string exists in mvc

Below code saying substring doesnt exist in current context. Give me someother way to check whether my id contains 'DOM' or 'INT' in my view in mvc.
My table:
My code:
#if( (SUBSTRING(Model.Id,7,9)) !== 'DOM' )
{
<tr>
<td>Amount Approved for Domestic sector : </td>
<td><input id="Text1" type="text" /></td>
</tr>
}
You could use the Contains method to check if a given string contains a specified substring:
#if(Model.Id.Contains("DOM"))
{
<tr>
<td>Amount Approved for Domestic sector : </td>
<td><input id="Text1" type="text" /></td>
</tr>
}
or:
#if(Model.Id.Split('/')[1].Trim() == "DOM")
{
<tr>
<td>Amount Approved for Domestic sector : </td>
<td><input id="Text1" type="text" /></td>
</tr>
}
I think it should be
#if((Model.Id.Substring(7,9)) !== 'DOM')
Since Substring is a method of String

Knockout JS foreach nested, value updates in all fields

I am using knockout js to acheive a task. My model is like:
var ServiceLevelRates = function(data, availableClasses) {
return {
TaxTypeID: ko.observable(data.Key),
TaxTypeName: ko.observable(data.Name),
ExtendedTaxTypeName: data.Name.replace(/\s+/g, ''),
ApplyAfter: ko.observable(-1),
TaxClasses: ko.observableArray(availableClasses)
};
};
var TaxClass = function(data, availableServices) {
return {
ServiceClassID: data.ServiceClassID,
ServiceClassName: ko.observable(data.ServiceClassName),
TaxServices: ko.observableArray(availableServices)
};
};
var TaxService = function(data) {
return {
ServiceID: ko.observable(data.ServiceID),
ServiceName: ko.observable(data.ServiceName),
ServiceRate: ko.observable(data.ServiceRate > 0 ? data.ServiceRate : "").extend({ numeric: 2 })
};
};
and my html is like:
<tbody data-bind="foreach: ServiceLevelRates">
<tr>
<td style="width:100%;">
<table width="100%">
<tr>
<td style="width:2%;">
<img src="../../Images/del_up.gif" onclick="HideMyChilds(this);" />
</td>
<td data-bind="text: TaxTypeName">
</td>
</tr>
<tr>
<td></td>
<td>
<table width="100%">
<tr>
<td style="width:20%;">
<label id="lblApplyAfter" myId="lblApplyAfter" runat="server">Apply After</label>
</td>
<td></td>
</tr>
<tr>
<td>
<select id="sltApplyAfter" SkinID="drpFields" name="sltApplyAfter" runat="server" myId="sltApplyAfter">
<option value="-1">Charge</option>
</select>
</td>
<td>
<input type="checkbox" />Apply for All Services<input type="text" onkeypress="ValidateDecimalValue(event,this)"; onblur="ApplyForAllServices(this);" data-bind="attr: { 'class': ExtendedTaxTypeName }" /> %
</td>
</tr>
<tr>
<td colspan="2">
<table width="100%">
<tbody data-bind="foreach: TaxClasses">
<tr>
<td style="width:2%;">
<img src="../../Images/del_up.gif" onclick="HideMyChilds(this);" />
</td>
<td style="width:100%;" class="tdRepeaterHeaderBG" data-bind="text: ServiceClassName">
</td>
</tr>
<tr>
<td></td>
<td>
<table width="100%">
<thead>
<tr>
<td style="width:1%;">
<td style="width:24%;" class="tdRepeaterHeaderBG">Service Name</td>
<td style="width:75%;" class="tdRepeaterHeaderBG">Amount</td>
</tr>
</thead>
<tbody data-bind="foreach: TaxServices">
<tr>
<td style="width:1%;">
<td style="width:24%;" data-bind="text: ServiceName"></td>
<td style="width:75%;">
<input type="text" data-bind="value: ServiceRate, attr: { 'class': $parents[1].ExtendedTaxTypeName, 'id': $parents[1].ExtendedTaxTypeName + ServiceID }" />%
</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<div style="font-size: 11px; width:98%;height:5px; border-top: 1px dotted gray;"> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
The problem is when I provide ServiceRate for a taxservice in one class, it is updated into text field of same service in all other classes. Any help on it will be great.
Your code have several issues.
First, mostly a cosmetic one. You are using tables for layout. They should only be used when you truly need tabular data. Div's or lists are much better in most cases, and if you need to layout something, you could use css margins.
You are mixing, and mixing up, different object schemes.
One is to return an object literal:
function Foo() {
return {
Property: ko.observable(),
}
}
This schema could, but shouldn't, be called with the new operator.
The other one is prototype-based:
function Foo() {
var self = this;
self.Property = ko.observable();
}
This schema must be called with the new operator.
It is easiest to stick to one schema. With knockout, the latter is easier to use in some cases.
You are not using observables for all properties. It is a little confusing to be using observables for some properties, and not for others. You have to go back to the source-code to confirm for each property.
Your object model does not take into account object reuse. You are passing the same objects to each ServiceLevelRate, so when you are updating one TaxService, the same TaxService in all other TaxClass will also be updated.
One simple solution for this, is to factor out the fields that needs updating into mapping objects.
// This part is constructed once, based on server data.
function TaxService(data) {
var self = this;
self.ServiceID = ko.observable(data.ServiceID);
self.ServiceName = ko.observable(data.ServiceName);
}
// This part is constructed for each TaxClassMapping
function TaxServiceMapping(svc) {
var self = this;
self.TaxService = ko.observable(svc);
self.ServiceRate = ko.observable("");
}
Lastly; To conditionally update the rates based on the check-box, you can bind the it with the checked-binding. In the subscription for the ServiceLevelRate-wide rate, you just check if the check-box was checked, before proceeding to update the other fields.
self.ApplyForAll.subscribe(function (newValue) {
if (self.ApplyForAllCheckBox()) {
ko.utils.arrayForEach(self.Classes(), function (clsMapping) {
ko.utils.arrayForEach(clsMapping.ClassServices(), function (svcMapping) {
svcMapping.ServiceRate(newValue);
});
});
}
});
Here is an updated fiddle:
http://jsfiddle.net/MizardX/V8DTj/
I scaled down the models to the essential parts, to make them easier to work with.
To make the TaxServices show only for certain TaxClasses, you could filter which TaxService-objects you want to include for each TaxClass.
function TaxClassMapping(taxClass, availableServices) {
var self = this;
self.TaxClass = ko.observable(taxClass);
var classID = taxClass.ServiceClassID();
var filtered = ko.utils.arrayFilter(availableServices, function (svc) {
// svc.ServiceClassID is a new property in TaxService
return svc.ServiceClassID() === classID;
});
var mapped = ko.utils.arrayMap(filtered, function (svc) {
return new TaxServiceMapping(svc);
});
self.ClassServices = ko.observableArray(mapped);
}

MVC list of checkboxes check and select to Action then to csv file

I have a view like:
#model IEnumerable<VectorCheck.Models.Invoice>
#{
ViewBag.Title = "Exportable Invoices";
}
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script>
<script src="../../Scripts/Views/Export/index.js" type="text/javascript"></script
<header class="header">
<div class="headerText">
<h1>Exportable Invoices</h1>
</div>
</header>
#using (Html.BeginForm("Export", "Export")) {
<table>
<tr class="mainheader">
<th>Invoice Number</th>
<th>Date</th>
<th>Organisation</th>
<th>Total (Excl GST)</th>
<th>Status</th>
<th>Exported Date</th>
<th>
<select id="expenseSelect"></select>
<input type="submit" id="btnexport" value="Export" />
</th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.InvoiceNumber)
</td>
<td>
#Html.DisplayFor(modelItem => item.InvoiceDate, "{0:D}")
</td>
<td>
#Html.DisplayFor(modelItem => item.Organisation.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.TotalExcludingGst)
</td>
<td>
#Html.DisplayFor(modelItem => item.Status)
</td>
<td>
#Html.DisplayFor(modelItem => item.ExportedDateTime)
</td>
<td class="centered">
<input type="checkbox" class="exportcheckbox" data-invoiceid=#item.InvoiceId />
</td>
</tr>
}
</table>
}
<div>
#Html.ActionLink("Back to Summary", "Index", "Invoice")
</div>
Ok, so see how each checkbox has an attribrute data-invoiceid=#item.InvoiceId. Well I'm trying to get to an action method the Ids of all the invoices that have had their checkboxes checked. Also I'm trying to get the id of the selectlist expenseSelect which has options added to it on page load via jquery. I managed to achieve this with jquery and then sending the data with a $.post. The problem is in the file I'm sending the info to:
public ActionResult Export()
{
...
var csvData = _utility.GetCsvData(data);
return File(Encoding.UTF8.GetBytes(csvData), "text.csv", "invoices.csv");
}
brings up a save/open file dialog. I'm been informed this won't work for the jquery ajax call and I need to post the info back using a submit.
That's fine but now I have no idea how to send the select id and a list of the ids of the checked checkboxes to the method. Can anybody show me how to go about this?
You don't need any HTML5 data-* attributes since they are not sent to the server when you submit the form. In order to send their values you will have to use AJAX but this won't work with file downloads. So simply give your checkboxes a name:
<td class="centered">
<input type="checkbox" class="exportcheckbox" name="ids" value="#item.InvoiceId" />
</td>
and then on the server the default model binder will automatically construct an array of the ids of the checked items:
[HttpPost]
public ActionResult Export(int[] ids)
{
byte[] data = ...
return File(data, "text/csv", "invoices.csv");
}
Depending on the type of InvoiceId you might need to adjust the type of the action argument.
Radically changing my answer...
You could dynamically add a hidden IFRAME to your page. The IFRAME src can take your selected "ids" as a querystring parameter. This should get your your download dialog.
Got some help with the jquery from here: JQuery: Turn array input values into a string optimization
var selectedIdsArray = $(":checked").map(function(){return $(this).attr('data-invoiceid');});
var url = '#Url.Action("Export", "Export")?csv=' selectedIdsArray.get().join(',');
$('body').append("<iframe style='visibility:hidden' src='"+url +"'/>");

Resources