I seem to be having a problem posting the selected values from my Kendo Multiselect widget to an action on my controller. I've never had this issue before and as far as I know I am doing everything right, but something is obviously causing an issue.
I have this input on my view:
<input id="ProductHandlingTypes" name="ProductHandlingTypes" style="width: 100%"/>
My ViewModel
public class BuyerProfileViewModel
{
public string UserId { get; set; }
public string Name { get; set; }
public int BuyerTypeId { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string State { get; set; }
public string Zipcode { get; set; }
public string Description { get; set; }
public List<int> ProductHandlingTypes { get; set; }
public bool Producer { get; set; }
}
And my JavaScript:
$("#ProductHandlingTypes").kendoMultiSelect({
placeholder: "-- Select Type(s) --",
dataTextField: "Name",
dataValueField: "Id",
dataSource: new kendo.data.DataSource({
transport: {
read: {
url: "/Helper/GetProductHandlingTypes",
dataType: "json",
type: "GET"
}
}
})
});
$("#btnSave").on("click", function (e) {
e.preventDefault();
var formCreate = $(".form-register-buyer");
formCreate.validate();
if (formCreate.valid()) {
var options = {
url: $(formCreate).attr("action"),
type: $(formCreate).attr("method"),
data: $(formCreate).serialize()
};
$.ajax(options)
.done(function(data) {
if (data.success === true) {
window.location.href = data.redirectTo;
} else {
toastr.options = { "postiionClass": "toast-bottom-full-width" };
toastr.error(data.message, "Uh, Oh!");
}
});
}
});
When I submit my form to the controller I can see that all of the correct values are being passed except for ProductHandlingTypes. It just says it has a count of 1 and when I expand it out it says 0.
Related
I am trying to pass a JSON object to my MVC controller action via POST. The controller action is called but some elements of the object are NULL. The 'ArticleKey' is there but the 'MeasureDefinitions' are NULL (see below).
Here is the object which I am trying to parse (it gets appended with more values by the user):
var articleValues = [
{
'ArticleKey': {
'ArticleNo': 'ArticleNo',
'CustomerName': 'CustomerName',
},
'MeasureDefinitions ': [
{
'DisplayIndex': 0,
'MeasureType': 'MeasureType',
'Percentage': 99.99,
'OriginalPercentage': 0
}
]
}
];
My model looks like this:
public class ArticleValuesModel
{
[Key]
public ArticleKey ArticleKey { get; set; }
public List<MeasureDefinition> MeasureDefinitions { get; set; }
public string ArticleDescription { get; set; }
public bool AddToList { get; set; }
}
public class ArticleKey
{
public string ArticleNo { get; set; }
public string CustomerName { get; set; }
}
public class MeasureDefinition
{
public long DisplayIndex { get; set; }
[Key]
public string MeasureType { get; set; }
public double Percentage { get; set; }
public double OriginalPercentage { get; set; }
}
Here is my controller action:
[HttpPost]
public ActionResult UpdateArticleValuesJson(List<Gui.Models.ArticleValuesModel> modelList)
{
return RedirectToAction("Index");
}
Here is my Ajax POST:
$('#btnSaveArticleValues').click(function() {
$.ajax({
url: "/ArticleList/UpdateArticleValuesJson",
contentType: "application/json;charset=utf-8",
dataType: "JSON",
type: "POST",
data: JSON.stringify(articleValues),
success: function() {
console.log("Saved");
},
error: function(e) {
console.log(e);
}
});
});
Can you please help me to make the 'MeasureDefinitions' list accessible in my controller?
Removing the extra spaces in my JSON object like indicated by the_lotus did help to resolve the problem.
I'm using Kendo MultiSelect in my mvc5 project. So I have a View with multiselect:
#model Library.ViewModels.Models.BookViewModel
#{
ViewBag.Title = "Edit";
}
<script>
$(document).ready(function () {
$("#multiselect").kendoMultiSelect({
placeholder: "--Select Public Houses--",
dataTextField: "PublicHouseName",
dataValueField: "PublicHouseId",
autoBind: true,
dataSource: {
transport: {
read: {
dataType: "json",
url: "/book/getallpublichouses"
}
}
}
});
});
</script>
And I have 2 viewModels:
public class BookViewModel
{
public int BookId { get; set; }
public string Name { get; set; }
public string AuthorName { get; set; }
public int YearOfPublishing { get; set; }
public ICollection<PublicHouseViewModel> PublicHouses { get; set; }
}
public class PublicHouseViewModel
{
public int PublicHouseId { get; set; }
public string PublicHouseName { get; set; }
public string Country { get; set; }
public ICollection<BookViewModel> Books { get; set; }
}
In my Kendo MultiSelect a get all Public Houses from Book controller in JSON format. Next I selected some values:
So, how can I pass this selected values in public ICollection<PublicHouseViewModel> PublicHouses { get; set; } property in BookViewModel ?
You can use:
public int[] PublicHouses { get; set; }
instead of:
public ICollection<PublicHouseViewModel> PublicHouses { get; set; }
Or you can create a new field in BookViewModel only for posting.
When you are posting values from kendoMultiSelect, he posts only "dataValueField". After you post only id's you can do the rest of the logic in POST action.
It depends how you implemented your POST action and also on the relationship between two tables: Is it 1...N, or N....N.
I'm used Kendo MultiSelect in my mvc5 project.
So I have a View with multiselect:
#model Library.ViewModels.Models.BookViewModel
#{
ViewBag.Title = "Edit";
}
<script>
$(document).ready(function () {
$("#multiselect").kendoMultiSelect({
placeholder: "--Select Public Houses--",
dataTextField: "PublicHouseName",
dataValueField: "PublicHouseId",
autoBind: true,
dataSource: {
transport: {
read: {
dataType: "json",
url: "/book/getallpublichouses"
}
}
}
});
$("#multiselect").getKendoMultiSelect().value([/* there must be a string array of ID's of pre-selected values here*/]);
});
</script>
My BookViewModel looks like this:
public class BookViewModel
{
public int BookId { get; set; }
[Required(ErrorMessage = "This field is Required")]
[StringLength(15, ErrorMessage = "Must be under 15 characters")]
public string Name { get; set; }
public string AuthorName { get; set; }
[Required(ErrorMessage = "This field is Required")]
[Range(1, 2019, ErrorMessage = "Must be between 1 and 2019")]
public int YearOfPublishing { get; set; }
public List<int> PubHouses { get; set; }
public ICollection<PublicHouseViewModel> PublicHouses { get; set; }
}
The property public List<int> PubHouses { get; set; } contains a List of ID's which must be pre-selected in kendo MultiSelect.
So how can I pass this list of int in property BookViewModel.PubHouses like string array in kendo MultiSelect?
I have a treeview in kendoUI in which main nodes are calling into an mvc controller and that controller looks to whether there is an nullable id passed in and then uses a different model.
What I hit the url : http://localhost:2949/Report/GetReportGroupAssignments
I see this JSON
[
{"Id":1,"ReportGroupName":"Standard Reports","ReportGroupNameResID":null,"SortOrder":1},
{"Id":2,"ReportGroupName":"Custom Reports","ReportGroupNameResID":null,"SortOrder":2},
{"Id":3,"ReportGroupName":"Retail Reports","ReportGroupNameResID":null,"SortOrder":3},
{"Id":4,"ReportGroupName":"Admin Reports","ReportGroupNameResID":null,"SortOrder":5},
{"Id":5,"ReportGroupName":"QA Reports","ReportGroupNameResID":null,"SortOrder":4}
]
Now my mvc controller looks like this
public JsonResult GetReportGroupAssignments(int? id)
{
var model = new List<ReportGroup>();
var defModel = new List<ReportDefinition>();
try
{
if (id == null)
{
model = _reportService.GetReportGroups("en-us").ToList();
return Json(model, JsonRequestBehavior.AllowGet);
}
else
{
defModel = _reportService.GetReportDefinitions().Where(e=>e.ReportGroupID ==Convert.ToInt32(id)).ToList();
return Json(defModel, JsonRequestBehavior.AllowGet);
}
}
catch (Exception ex)
{
Logger.Error(ex, "Error loading LoadReportList.");
return null;
}
}
My Kendo javascript looks like the following:
var serviceRoot = "/Report"; // "//demos.telerik.com/kendo-ui/service";
homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot + "/GetReportGroupAssignments", //"/LoadReportTree", // "/Employees",
dataType: "json"
}
},
schema: {
model: {
id: "Id" //"ReportGroupName"
,hasChildren: "Id"
}
}
});
var treeview = $("#treeview").kendoTreeView({
expanded: true,
dragAndDrop: true,
dataSource: homogeneous,
dataTextField: "ReportGroupName"
}).data("kendoTreeView");
Seems that the calls (which I discovered that children records have a "load" method that it called behind the seens, so basically I pass in the ID in order to get the data from the other model ( table in db)
(Id is mapped with automapper to ReportGroupID )
So when i click to the left of "Standard Rports" I am getting all of these children as undefined, How do I get these to show up properly?
Update: My ReportDefinition class:
public class ReportDefinition {
public override int Id { get; set; }
public string ReportKey { get; set; }
public string ReportName { get; set; }
public int? ReportNameResID { get; set; }
public string ReportDef { get; set; }
public int? ReportDefinitionResID { get; set; }
public string ReportAssembly { get; set; }
public string ReportClass { get; set; }
public int ReportGroupID { get; set; }
public int AppID { get; set; }
public int SortOrder { get; set; }
public bool IsSubReport { get; set; }
}
I think your problem is that the class ReportDefinition does not have a property called: ReportGroupName. That is why TreeView displays 'undefined'.
Try adding this Property to your ReportDefinition class like:
public class ReportDefinition {
// Other Properties
// I guess this property is missing
public string ReportGroupName { get; set; }
}
Same code stopped working after move to mvc5. In the following code I am trying to get cities for a country which is chosen in a dropdownlist using json.
The View.cshtml
#Html.DropDownList("CountryId", (SelectList)ViewBag.Countries, " -- choose a country -- ", new { onchange = "CountryDDLChanged()", #class = "form-control" })
JavaScript file (a part of the code)
function CountryDDLChanged() {
var url1 = "../Country/GetCitiesByCountryId";
var countryid = $("#CountryId").val();
$.ajax({
type: "GET",
url: url1,
data: { countryId: countryid },
dataType: "json",
success: function (result) {
alert("yes");
},
error: function(req, status, error){
alert(error);
}
});
}
CountryController
public JsonResult GetCitiesByCountryId(int countryId)
{
JsonResult result = new JsonResult();
using (var db = new DBContext())
{
List<City> cities = db.Cities.Where(c => c.CountryId == countryId).ToList();
result.Data = cities;
result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
}
return result;
}
When I digg down in the code and debugging it. it generates this error.
he ObjectContext instance has been disposed and can no longer be used for operations that require a connection.
Why this works in MVC4 but not in MVC5? is it because of different version of EF?
how can I solve it?
UPDATED: Here is my Country Entithy and City :
[Table("Country")]
public class Country
{
[Key]
[DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
public int CountryId { get; set; }
[StringLength(100)]
public string Name { get; set; }
public virtual List<City> Cities { get; set; }
public virtual List<Member> Members { get; set; }
public virtual List<MemberFee> MemberFees { get; set; }
}
[Table("City")]
public class City
{
[Key]
[DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
public int CityId { get; set; }
public string Name { get; set; }
public int CountryId { get; set; }
[ForeignKey("CountryId")]
public virtual Country Country { get; set; }
public virtual List<Member> Members { get; set; }
}