I am creating a dashboard comprised of several Telerik UI for ASP.NET MVC Charts. The first graph is supposed to plot sales volume month by month for a given agent. My controller class is as follows:
static List<SalesAgentViewModel> SalesAgentData = new List<SalesAgentViewModel>(){
new SalesAgentViewModel
{
SalesAgentID = 1,
ChartData = new List<SalesAgentChartItem>()
{
new SalesAgentChartItem
{
MonthName="January",
MerchantMCVolume=25000,
MerchantVisaVolume=500000
},
new SalesAgentChartItem
{
MonthName="February",
MerchantMCVolume = 225000,
MerchantVisaVolume = 725000
},
new SalesAgentChartItem
{
MonthName="March",
MerchantMCVolume = 75000,
MerchantVisaVolume = 150250
}
}
},
new SalesAgentViewModel
{
SalesAgentID = 2,
ChartData = new List<SalesAgentChartItem>()
{
new SalesAgentChartItem
{
MonthName="January",
MerchantMCVolume = 98000,
MerchantVisaVolume = 75250
},
new SalesAgentChartItem
{
MonthName = "February",
MerchantMCVolume = 87500,
MerchantVisaVolume = 68250
},
new SalesAgentChartItem
{
MonthName = "March",
MerchantMCVolume = 68500,
MerchantVisaVolume = 78125
}
}
}
};
[Authorize(Roles ="Admin,SalesAgent")]
public ActionResult ReadSalesAgentData([DataSourceRequest]DataSourceRequest request)
{
return Json(SalesAgentData.ToDataSourceResult(request));
}
[Authorize(Roles ="Admin,SalesAgent")]
public ActionResult ReadGraphData(int id)
{
return Json(SalesAgentData.First(v => v.SalesAgentID == id).ChartData);
}
I then new up a chart in my view as follows:
<div class="container" id="dashboard">
#(Html.Kendo().Chart<SalesAgentChartItem>()
.Name("SalesAgentVolume")
.Title("Sales Agent Volume")
.DataSource(dataSource => dataSource
.Read(read => read.Action("ReadGraphData","SalesAgents"))
)
.Series(series=>
{
series.Line(s => s.MerchantMCVolume).CategoryField("Mastercard Volume");
series.Line(s => s.MerchantVisaVolume).CategoryField("Visa Volume");
})
.CategoryAxis(axis=>axis
.Categories(model=>model.MonthName))
)
</div>
When I run the application, the graph is rendered but an HTTP 500 is thrown stating:
System.ArgumentException: The parameters dictionary contains a null entry
for parameter 'id' of non-nullable type 'System.Int32' for method
'System.Web.Mvc.ActionResult ReadGraphData(Int32)' in
'Web.Controllers.SalesAgentsController'. An optional parameter must be a
reference type, a nullable type, or be declared as an optional parameter.
Parameter name: parameters
My intent is to show the volume for a given agent identified by SalesAgentID. How would I accomplish this?
Related
I have a static dropdownlist and editor need to take the selected value from the dropdownlist and the written value from the editor and make a concatenation between the two values and save it in a Database table column in the post ActionResult:
This is the View:
#Html.DropDownList("Term.Description", new List<SelectListItem>
{
new SelectListItem{ Text="Winter", Value = "Winter-" },
new SelectListItem{ Text="Spring", Value = "Spring-" },
new SelectListItem{ Text="Fall", Value = "Fall-" },
new SelectListItem{ Text="Summer", Value = "Summer-" }
}, new { #class = "description-text" })
#Html.Editor("TermYear","", new { htmlAttributes = new { #class = "description-text", placeholder = "2018", data_placeholder = " " } })
ActionResult:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Term term, int[] applicantTypes)
{
ModelState.Remove("ApplicantTypes");
if (ModelState.IsValid)
{
if (applicantTypes != null && applicantTypes.Length > 0)
{
foreach (var item in applicantTypes)
{
term.ApplicantTypes.Add(db.ApplicantTypes.FirstOrDefault(x => x.ApplicantTypeID == item));
}
}
db.Terms.Add(term);
db.Configuration.ValidateOnSaveEnabled = false;
db.SaveChanges();
return RedirectToAction("Index");
}
ViewBag.ApplicantTypes = new MultiSelectList(db.ApplicantTypes, "ApplicantTypeID", "Name", term.ApplicantTypes.Select(x => x.ApplicantTypeID));
return View(term);
}
Finally, I need the `Term.Description = DropDownListSelectedValue-EditorValue'
This code which initializes an array with two hard-coded values is working perfectly fine:
var db = new GoogleGraph {
cols = new ColInfo[] {
new ColInfo { id = "", label = "Date", pattern ="", type = "string" },
new ColInfo { id = "", label = "Attendees", pattern ="", type = "number" }
}.ToList(),
rows = new List<DataPointSet>()
};
db.cols.AddRange(listOfValues.Select(p => new ColInfo { id = "", label = p, type = "number" }));
This code which attempts to add some dynamically generated values is not working:
var db = new GoogleGraph {
cols = new ColInfo[] {
new ColInfo { id = "", label = "Date", pattern ="", type = "string" },
new ColInfo { id = "", label = "Attendees", pattern ="", type = "number" },
listOfValues.Select(p => new ColInfo { id = "", label = p, type = "number" })
}.ToList(),
rows = new List<DataPointSet>()
};
How can I correctly implement the above snippet?
You can't pass an IEnumerable<T> to an initializer of T[] like that.
You can do what you want by putting the hard-coded objects in their own collection, then concatenating the dynamic ones:
var db = new GoogleGraph {
cols =
new ColInfo[] {
new ColInfo { id = "", label = "Date", pattern ="", type = "string" },
new ColInfo { id = "", label = "Attendees", pattern ="", type = "number" }
}
.Concat(listOfValues.Select(p =>
new ColInfo { id = "", label = p, type = "number" }))
.ToList(),
rows = new List<DataPointSet>()
};
I have model which as a nullable Date field. Everything works as expected except in the circumstance where I am editing the model and I want to remove the date. Then validation is triggered:
How do I allow removal while also keeping validation on a partially filled in date? Is worth mentioning that are using a custom EditorTemplate:
Here is the code for the editor template:
#model DateTime?
#{
var months = new[] {
new { Value = "", Display="" },
new { Value = "1", Display = "01-Jan" },
new { Value = "2", Display = "02-Feb" },
new { Value = "3", Display = "03-Mar" },
new { Value = "4", Display = "04-Apr" },
new { Value = "5", Display = "05-May" },
new { Value = "6", Display = "06-Jun" },
new { Value = "7", Display = "07-Jul" },
new { Value = "8", Display = "08-Aug" },
new { Value = "9", Display = "09-Sep" },
new { Value = "10", Display = "10-Oct" },
new { Value = "11", Display = "11-Nov" },
new { Value = "12", Display = "12-Dec" }
};
var monthSelect = new SelectList(months, "Value", "Display", Model.HasValue ? Model.Value.Month.ToString() : "");
var days = new List<String>();
days.Add("");
days.AddRange(Enumerable.Range(1, 31).Select(s => s.ToString()));
var daySelect = new SelectList(days.Select(x => new KeyValuePair<string, string>(x, x)), "Key", "Value", Model.HasValue ? Model.Value.Day.ToString() : "");
}
#Html.DropDownList("Month", monthSelect)
#Html.DropDownList("Day", daySelect)
#Html.TextBox("Year", (Model.HasValue ? Model.Value.ToString("yyyy") : string.Empty), new { style="width:75px;" })
The code on the edit view is dead simple:
#Html.EditorFor(model => model.MyDate)
In a view I'm using 3 dropdownlist strongly-typed to a model like this:
#using (Html.BeginForm())
{
<p>Filter by rarity: #Html.DropDownListFor(_item => _item.mRarity, Model.mRarityList, new {#id = "cardRarity"})
Filter by type: #Html.DropDownListFor(_item => _item.mType, Model.mTypeList, new {#id = "cardType"})
Filter by color: #Html.DropDownListFor(_item => _item.mColor, Model.mColorList, new {#id = "cardColor"})
</p>
}
Here's the view in which the thing is displayed:
#model PagedList.IPagedList<MvcMagicAdmin.Utilities.CardDisplay>
#{
ViewBag.Title = "Cards Display Results";
}
<h2>
Cards Display Results
</h2>
<script type="text/javascript">
$(document).ready(function () {
$('#cardRarity').change(function () {
var showCardRarity = $(this).val();
alert(showCardRarity);
var showCardType = $('#cardType').val();
var showCardColor = $('#cardColor').val();
refreshResults(showCardRarity, showCardType, showCardColor);
});
$('#cardType').change(function () {
var showCardType = $(this).val();
alert(showCardType);
var showCardRarity = $('#cardRarity').val();
var showCardColor = $('#cardColor').val();
refreshResults(showCardRarity, showCardType, showCardColor);
});
$('#cardColor').change(function () {
var showCardColor = $(this).val();
alert(showCardColor);
var showCardRarity = $('#cardRarity').val();
var showCardType = $('#cardType').val();
refreshResults(showCardRarity, showCardType, showCardColor);
});
function refreshResults(rarity, type, color) {
$.get("#Url.Action("DisplayCardsResults", "Card")", {
_page: 1,
_sortOrder: "#ViewBag._sortOrder",
_rarity: rarity,
_type: type,
_color: color,
}, function(data) {
$("#resultsDiv").html(data);
});
}
});
</script>
<div>
<div class="float-left">
<p>#Html.ActionLink("Make a new search", "SearchCardsAdvanced")</p>
</div>
<div class="float-right">
<p><span class="bold baseFontSize">Legend: </span>Details #Html.Image("~\\Images\\Functional\\Icons\\detailsIcon.jpg", "details", new { #class = "centerVert" } )
Edit #Html.Image("~\\Images\\Functional\\Icons\\editIcon.png", "edit", new {#class = "centerVert"} )
Delete #Html.Image("~\\Images\\Functional\\Icons\\trashIcon.png", "delete", new {#class = "centerVert"} )</p>
</div>
<div class="clear"></div>
</div>
#{
Html.RenderAction("FilterCardsResults", "PartialViews");
}
<div id="resultsDiv">
#{
Html.RenderPartial("ResultsTable", Model);
}
</div>
So, yes, I am calling a partial view from another controller because I pass a model which is not included in the Original List of models.
The view is generated like this:
private static readonly CardsFilters mCardsFilters = new CardsFilters();
public ActionResult FilterCardsResults()
{
return PartialView("Filters/FilterCardsResults", mCardsFilters);
}
Here's the model on which the data is built:
public class CardsFilters
{
public string mRarity { get; set; }
public IEnumerable<SelectListItem> mRarityList { get; set; }
public string mType { get; set; }
public IEnumerable<SelectListItem> mTypeList { get; set; }
public string mColor { get; set; }
public IEnumerable<SelectListItem> mColorList { get; set; }
public CardsFilters()
{
List<SelectListItem> items = new List<SelectListItem>
{
new SelectListItem() {Value = "All", Text = "All"},
new SelectListItem() {Value = "Land", Text = "Land"},
new SelectListItem() {Value = "Common", Text = "Common"},
new SelectListItem() {Value = "Uncommon", Text = "Uncommon"},
new SelectListItem() {Value = "Rare", Text = "Rare"},
new SelectListItem() {Value = "Mythic Rare", Text = "Mythic Rare"},
new SelectListItem() {Value = "Special", Text = "Special"}
};
mRarityList = new SelectList(items, "Value", "Text");
items = new List<SelectListItem>
{
new SelectListItem(){ Value = "All", Text = "All"},
new SelectListItem(){ Value = "Artifact", Text = "Artifact"},
new SelectListItem(){ Value = "Instant", Text = "Instant"},
new SelectListItem(){ Value = "Creature", Text = "Creature"},
new SelectListItem(){ Value = "Land", Text = "Land"},
new SelectListItem(){ Value = "Planeswalker", Text = "Planeswalker"},
new SelectListItem(){ Value = "Enchantment", Text = "Enchantment"},
new SelectListItem(){ Value = "Sorcery", Text = "Sorcery"},
new SelectListItem(){ Value = "Tribal", Text = "Tribal"},
};
mTypeList = new SelectList(items, "Value", "Text");
items = new List<SelectListItem>
{
new SelectListItem(){ Value = "All", Text = "All"},
new SelectListItem(){ Value = "White", Text = "White"},
new SelectListItem(){ Value = "Red", Text = "Red"},
new SelectListItem(){ Value = "Green", Text = "Green"},
new SelectListItem(){ Value = "Blue", Text = "Blue"},
new SelectListItem(){ Value = "Black", Text = "Black"},
new SelectListItem(){ Value = "Gold", Text = "Gold"},
new SelectListItem(){ Value = "Colorless", Text = "Colorless"},
};
mColorList = new SelectList(items, "Value", "Text");
}
}
And, finally, the post method called in the controller:
public ActionResult DisplayCardsResults(int? _page, string _sortOrder, string _rarity = "", string _type = "", string _color = "")
{
ViewBag._rarity = _rarity;
ViewBag._color = _color;
ViewBag._type = _type;
if (Request.HttpMethod != "GET")
{
_page = 1;
}
if (mListCards.Count == 0)
{
TempData[MessageDomain.Tags.TEMPDATA_MESSAGE_ERROR] = NODATAFILTERERRORMESSAGE;
}
int pageNumber = (_page ?? 1);
if (Request.IsAjaxRequest())
{
mListCardsToShow = GetListCardsToShow(_rarity, _color, _type);
return PartialView("ResultsTable", mListCardsToShow.ToPagedList(pageNumber, ValueDomain.PAGE_SIZE));
}
if (mListCardsToShow.Count > 0)
{
mListCardsToShow = SortListOrder(_sortOrder, mListCardsToShow);
return View(mListCardsToShow.ToPagedList(pageNumber, ValueDomain.PAGE_SIZE));
}
if (mListCards.Count > 0)
{
mListCards = SortListOrder(_sortOrder, mListCards);
}
return View(mListCards.ToPagedList(pageNumber, ValueDomain.PAGE_SIZE));
}
The dropdownlist works very fine, except for one reason. When I post back the form, all the values selected in the dropdownlist resets to "All", and I'd like to keep them selected. How might I do this?
You must make shure that you are correctly binding your return model into the view.
I took your example and included it into a simple project, that is working ok:
The controller with a simple POST:
public ActionResult Index()
{
ViewBag.Message = "Welcome to ASP.NET MVC!";
var model = new CardsFiltersViewModel();
return View(model);
}
[HttpPost]
public ActionResult Index(CardsFiltersViewModel model)
{
ViewBag.Message = "Welcome to ASP.NET MVC!";
return View(model);
}
public ActionResult About()
{
return View();
}
}
It returns the object the you presented above.
The View is the exact same as your code.
#using (Html.BeginForm())
{
<p>
Filter by rarity: #Html.DropDownListFor(_item => _item.mRarity, Model.mRarityList, new { #id = "cardRarity" })
Filter by type: #Html.DropDownListFor(_item => _item.mType, Model.mTypeList, new { #id = "cardType" })
Filter by color: #Html.DropDownListFor(_item => _item.mColor, Model.mColorList, new { #id = "cardColor" })
</p>
<input type="submit" name="name" value=" " />
}
With the reference to the model class object (
#model MvcApplication7.Controllers.CardsFiltersViewModel
)
I have a gender select field (--Select--, Male, Female) and I'm populating that in my controller. When the page loads, I want the gender that is selected in the model pm.Gender to be automatically selected when the page loads.
The values from pm.Gender come back as:
" "
"M"
"F"
View:
<%: Model.Gender %>
<%: Html.DropDownListFor(m => m.Gender, (IEnumerable<SelectListItem>)ViewData["gender"], new { #class = "span2" })%>
Controller:
gender = new[] { "Select", "Male", "Female" };
List<SelectListItem> genderselectList = new List<SelectListItem>();
foreach (string item in gender)
{
SelectListItem sli = new SelectListItem { Text = item, Value = item };
if (item.Trim().StartsWith(pm.Gender))
sli.Selected = true;
genderselectList.Add(sli);
}
ViewData["gender"] = genderselectList;
After debugging the application, I can see that genderselectList contains the proper data with Selected = true for the proper value that is supposed to be selected. But when the page loads, nothing is selected in the dropdown list that was supposed to be generated with the Html.DropDownListFor.
Edit: Does not work in any browser.
Anyone know what could be causing this problem? Any help would be appreciated.
Cheers.
EDIT: (After implementing Kaf's solution)
Ok so this is what I'm doing after implementing Kaf's solution.
View:
<%: Html.DropDownListFor(m => m.Gender, (SelectList)(ViewData["gender"]), new { #class = "span2" }) %>
Controller:
gender = new[] { "Select", "Male", "Female" };
List<SelectList> genderselectList = new List<SelectList>();
foreach (string item in gender)
{
SelectList sli;
if (item.Trim().StartsWith(pm.Gender))
sli = new SelectList(GetGender(), item, item, item);
else
sli = new SelectList(GetGender(), item, item);
//without selectedValue
genderselectList.Add(sli);
}
ViewData["gender"] = genderselectList;
When I do that, I get the following exception:
Unable to cast object of type 'System.Collections.Generic.List`1[System.Web.Mvc.SelectList]' to type 'System.Web.Mvc.SelectList'.
Anyone know what I'm doing wrong?
I suggest it's better if you use strongly typed property for SelectList (rather than using ViewBag/ViewData). I believe what you are expecting is that your dropdownlist to be pre-selected with the gender selection made in the model. Here is a solution (code is not 100% clean. But this will work)
Model
public class TestModel
{
public string Gender { get; set; }
public IEnumerable<SelectListItem> GenderList
{
get
{
List<SelectListItem> list = new List<SelectListItem> { new SelectListItem() { Text = "Select", Value = "Select" }, new SelectListItem() { Text = "Male", Value = "Male" }, new SelectListItem() { Text = "Female", Value = "Female" } };
return list.Select(l => new SelectListItem { Selected = (l.Value == Gender), Text = l.Text, Value = l.Value });
}
}
}
Controller Action
public ActionResult MyView()
{
TestModel m = new TestModel();
m.Gender = "Female";
return View(m);
}
MyView.cshtml
#model TestModel
#{
ViewBag.Title = "MyView";
}
<h2>MyView</h2>
#using (Html.BeginForm())
{
<div>
#Html.DropDownListFor(model => model.Gender, Model.GenderList)
</div>
}
OUTPUT
dropdown with 'Female' option selected
EDIT
Based on comments find below links to sample projects
1) https://github.com/prashanth-t/DropdownDemo_BareBones (Using the MVC 4 empty template. Smaller file size with bare minimum)
2) https://github.com/prashanth-t/DropdownDemo (Using the MVC 4 internet application template. Bigger file size)
This is a known bug in ASP.NET MVC Razor View. As per the known bug documentation
"The reason behind this problem is that asp.net MVC first looks for a match between the name of the drop down and property on the model. If there’s a match, the selected value of the SelectList is overridden. Changing the name of the drop down is all it takes to remedy the issue."
I'm here giving a small example which you can use to test the resolution.
var paymentTypeList = new List<SelectListItem>
{
new SelectListItem { Text = "Select Payment Type", Value = "NA" },
new SelectListItem { Text = "Card", Value = "Card" },
new SelectListItem { Text = "Paytm Wallet", Value = "Paytm Wallet" },
new SelectListItem { Text = "Cash", Value = "Cash", Selected = true },
new SelectListItem { Text = "Credit", Value = "Credit" },
new SelectListItem { Text = "Other", Value = "Other" }
};
ViewBag.paymentTypeList = paymentTypeList;
Resolution Option 1 (Easiest) - Change the Name of declaration id of select list id in MVC view e.g
#Html.DropDownList("paymentTypeListNew", (List<SelectListItem>)ViewBag.paymentTypeList, new { #class = "form-control select2 select1" })
Resolution 2: (Use only single constructor of #Html.DropDownList that matches viewbag/viewdata property)
To ensure that selected item (cash in this example) gets selected do the following in MVC Razor View. Use only the following constructor without any CSS or new object values
#Html.DropDownList("paymentTypeList")
Now if you are worried that you cannot initialize the CSS then you need to initialize the css programitally. For example if you are using Jquery then can you can use
$("#paymentTypeList").addClass("form-control");
$("#paymentTypeList").addClass("select2");
Method to get genders with select:
private Dictionary<string,string> GetGender(){
Dictionary<string, string> myDic = new Dictionary<string, string>();
myDic.Add(System.DBNull.Value.ToString(), "Select");
myDic.Add("Male", "Male");
myDic.Add("Female", "Female");
return myDic;
}
In the controller:
//without selectedValue
ViewData["gender"] = new SelectList(GetGender(), "Key", "Value");
OR
//"Male" as selectedValue
ViewData["gender"] = new SelectList(GetGender(), "Key", "Value", "Male");
In the view:
Html.DropDownListFor(m => m.Gender, (SelectList)(ViewData["gender"]),
new { #class = "span2" })
Try this instead in the controller:
string[] gender = new string[] {"Male", "Female"};
string selectedGender = gender.Where(x => x.StartsWith(pm.gender)).FirstOrDefault();
ViewData["gender"] = new SelectList(gender, selectedGender);
And in the view:
<%: Html.Dropdownlist(x => x.Gender, ViewData["gender"], "Select") %>
After searching myself for answer to this problem - I had some hints along the way but this is the resulting solution. It is an extension Method. I am using MVC 5 C# 4.52 is the target. The code below sets the Selection to the First Item in the List because that is what I needed, you might desire simply to pass a string and skip enumerating - but I also wanted to make sure I had something returned to my SelectList from the DB)
Extension Method:
public static class SelectListextensions
{
public static System.Web.Mvc.SelectList SetSelectedValue
(this System.Web.Mvc.SelectList list, string value)
{
if (value != null)
{
var selected = list.Where(x => x.Text == value).FirstOrDefault();
selected.Selected = true;
}
return list;
}
}
And for those who like the complete low down (like me) here is the usage.
The object Category has a field defined as Name - this is the field that will show up as Text in the drop down. You can see that test for the Text property in the code above.
Example Code:
SelectList categorylist = new SelectList(dbContext.Categories, "Id", "Name");
SetSelectedItemValue(categorylist);
select list function:
private SelectList SetSelectedItemValue(SelectList source)
{
Category category = new Category();
SelectListItem firstItem = new SelectListItem();
int selectListCount = -1;
if (source != null && source.Items != null)
{
System.Collections.IEnumerator cenum = source.Items.GetEnumerator();
while (cenum.MoveNext())
{
if (selectListCount == -1)
{
selectListCount = 0;
}
selectListCount += 1;
category = (Category)cenum.Current;
source.SetSelectedValue(category.Name);
break;
}
if (selectListCount > 0)
{
foreach (SelectListItem item in source.Items)
{
if (item.Value == cenum.Current.ToString())
{
item.Selected = true;
break;
}
}
}
}
return source;
}
You can make this a Generic All Inclusive function / Extension - but it is working as is for me.
Try this;
public static List<SelectListItem> ListSexo { get; } = new List<SelectListItem>
{
new SelectListItem{Selected =true, Value="N", Text="Seleccione"},
new SelectListItem{Value="F", Text="Femenino"},
new SelectListItem{Value="M", Text="Masculino"}
};
<select asp-for="Sexo" asp-items="Commons.ListSexo" class="form-control"></select>