I am new to MVC, so sorry if I am being a bit thick. I am using VB
I am trying to fill an html drop down list using data from a db, but the first item is always selected, no matter what.
What am I doing wrong?
Here is my code - In the controller:
ViewData("MatchTypeList") = New SelectList(_db.GetMatchTypes.ToList(), "MatchTypeID", "MatchTypeName", SelectedValue)
And in the view
<%= Html.DropDownList("MatchType", CType(ViewData("MatchTypeList"), IEnumerable(Of SelectListItem)), "Any", New With {.class = "forminput"})%>
This is a problem with mvc. One work around would be to change the name of the dropdownlist to anything but the name of the property. Then, before submitting to change the name back to the true name of the property.
An example:
<script type="text/javascript">
$(function () {
$("form").submit(function () {
$("select").each(
function () {
$(this).attr("name", $(this).attr("name").replace(/ZZZ/, ''));
});
});
});
</script>
<%= Html.DropDownList("MatchTypeZZZ", CType(ViewData("MatchTypeList"), IEnumerable(Of SelectListItem)), "Any", New With {.class = "forminput"})%>
I place the javascript (it uses JQuery) in my master page so any form in the app that has a dropdownlist can safely have its name appended with ZZZ and then set back to its original name on submission.
Related
I need to create a more advanced method of adding new elements to a kendo grid, so in short I have replicated the following example as it does exactly what I needed:
https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/window/KendoWindow-Ajax-Form
And it works just fine. Only difference is the new row is added in it's correct spot in the grid, and not on the top as per usual. How can I, using the example linked to, place the new row on the top?
(I'm thinking it's not necessary to show my code here as it very closely resembles the code given in the link above)
So If you want to add a row up top I am thinking you could use a custom template. I may not be very clear on what you are doing but , I will attempt to help you.
Here is the grid in the code:`
#(Html.Kendo().Grid<OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Message).EditorTemplateName("MessageEditor");
}
.DataSource(datasource => datasource
.Ajax()
.Read(read => read.Action("GetOrders", "OrdersData"))
)
)`
Then write the template like this:
<script type="text/x-kendo-template" id="MessageEditor">
<div class="k-header k-grid-toolbar">
<div style="display: inline-block; font-size:1.25em; padding:
</div>
</div>
</script>
Well this may not be the best solution , however it is the only way I know to create a custom column in a Kendo grid
Ended up finding the solution myself eventually. Going by the example in the link I made in the original post, this is what I did:
Firstly when a new "order" is made, I make sure that the model returned in the "Create" method in OrdersDataController has an ID from when the model is added to the DB.
So when this part gets executed in "_OrdersCreate.cshtml":
#if (Model != null && ViewData.ModelState.IsValid)
{
<script>
closeCreatePopup();
</script>
}
I send information on the new Order created. So to that end I have modified "closeCreatePopup()" to handle arguments.
So for the finished results I will just use a piece of code from my own project, the following is my implementation of "closeCreatePopup()":
function closeCreateEmployeeWindow(name, rHPersonID, personID, organizationID) {
if (name !== undefined
&& rHPersonID !== undefined
&& personID !== undefined
&& organizationID !== undefined) {
var grid = $("#grid").data("kendoGrid");
grid.dataSource.insert({ Name: name, RHPersonID: rHPersonID, PersonID: personID, OrganizationID: organizationID });
grid.dataSource.sync();
}
var wnd = $("#createEmployeeModal").data("kendoWindow");
wnd.refresh({ url: '#Url.Action("CreateEmployee", "Employee", new { Area = "Administration" })' });
wnd.close();
}
The important part is this:
var grid = $("#grid").data("kendoGrid");
grid.dataSource.insert({ Name: name, RHPersonID: rHPersonID, PersonID: personID, OrganizationID: organizationID });
grid.dataSource.sync();
What is happening here is I use the "insert" method from the grid, and add a new object. "Insert" inserts the new object to the very top of the grid. Remember to call the "sync" method right after.
By doing it like this, the normal "create" method built into the grid is replicated.
I have an MVC3 C# .Net Web App. We are using the ckEditor library to enhance the TextAreas in our app. When using a standard TextArea, the Validation operates correctly. However, in the enhanced TextAreas (implementing the ckEditor), when submitting the page, the Validation fires an error. "Description is Required" even when though there is data present in the TextArea. Upon a second click of the Submit, the form submits fine.
Domain class property:
[Display(Name = "Description")]
[Required(ErrorMessage = "Description is required.")]
public virtual string Description { get; set; }
HTML:
<td style="border: 0;text-align:left " >
#Html.TextAreaFor(model => model.Description,
new
{
rows = 5,
cols = 100,
#class = "celltext2 save-alert"
})
#Html.ValidationMessageFor(model => model.Description)
</td>
I think that applying the ckEditor attributes is messing it up somehow. Ideas?`
Let me clarify more. We have a .js file that queries the controls and then does ckEditor initialzation. when I remove the $(this).ckeditor({}) it works fine.
JS File:
$('textarea').each(function () {
$(this).ckeditor({});
});
Something like this might work:
$('textarea').each(function () {
var textarea = $(this);
$(this).ckeditor({}).on('blur', function() {
textarea.html( $(this).html() );
});
});
EDIT(I've never used the jQuery adapter, after a small lesson I found this to work, the above the blur never fires and $(this).html() is not defined):
$('textarea').each(function () {
var textarea = $(this);
textarea.ckeditor(function () {
textarea.ckeditorGet().on('blur', function () {
textarea.html( this.getData() );
});
});
});
I think it's a little simpler than that. CKE creates an iframe that it is used instead of the actual textarea and you do correctly need to update the contents of the textarea with the data inside CKEditor before submitting. I would suggest, however, that you do this on submit instead of on blur. I would recommend setting an id to the relevant DOM elements but you get the idea.
// Replace textarea(s)
$('textarea').each(function () {
$(this).ckeditor({});
});
// Bind on submit event to update the text
$('form').submit(function() {
// Upate textarea value with the ckeditor data
$('textarea').val(CKEDITOR.instances.ValueCKE.getData());
});
Is there a way to use AJAX on a DropDownList changed event to dynamically modify a partial view on a page?
My main page has a DropDownList (DropDownListFor) and a partial view which ONLY contains a list of "items". The items shown in this partial view are dependent upon the item selected in the DropDownList. There's a 1 to many relationship between the DropDownList item and the items in the partial view. So, when the user changes the value of the DropDownList, the content in the partial view will dynamically change to reflect the item selected in the DropDownList.
Here's my DropDownList:
<div data-role="fieldcontain">
Choose Capsule:<br />
#Html.DropDownListFor(x => x.CapsuleFK, new SelectList(Model.Capsules, "pk", "name", "pk"), new { id = "ddlCapsules" })
<br />
</div>
Here's my Partial View declaration on the same page:
<div data-role="fieldcontain">
#Html.Partial("_FillerPartial", Model.Fillers)
</div>
I'm not very familiar with Ajax, but looking at other examples, here's what I have for my Ajax:
$(document).ready(function () {
$('#ddlCapsules').change(function () {
// make ajax call to modify the filler list partial view
var selection = $('#ddlCapsules').val();
var dataToSend = { cappk: selection };
$.ajax({
url: 'Process/GetFillersByCapsule',
data: { cappk: dataToSend },
success: function (data) {
alert("server returned: " + data);
}
});
});
});
And finally, here's a screenshot of what's going on. By changing the "Choose Capsule" drop down list, I want the Filler list to update dynamically:
You can load the drop down list as a partial view from the controller using ajax.
The controller code:
[HttpGet]
public virtual ActionResult GetFillersByCapsule(string cappk)
{
var model = //Method to get capsules by pk, this returns a ViewModel that is used to render the filtered list.
return PartialView("PartialViewName", model);
}
The main view html:
<div id="filteredList">
</div >
The partial view
#model IEnumerable<MyCapsuleModel>
foreach (var x in Model)
{
//Render the appropriate filtered list html.
}
And you can load the filtered list using ajax:
$('#ddlCapsules').change(function () {
// make ajax call to modify the filler list partial view
var selection = $('#ddlCapsules').val();
var dataToSend = { cappk: selection };
$.ajax({
url: 'Process/GetFillersByCapsule',
data: { cappk: dataToSend },
success: function (data) {
$("#filteredList").empty();
$("#filteredList").html(data);
}
});
});
Hope this helps.
You can't update the partial, per se, because the partial will never be rendered again without a page reload. Once you receive the HTML, ASP is done, you're on your own at that point.
What you can do, of course, is switch out the content of a particular div or whatever using JavaScript. Your example in particular screams Knockout, so that's what I would recommend using.
Change your HTML to add a data-bind to your containing div:
<div data-role="fieldcontain" data-bind="foreach: filler">
<button data-bind="text: name"></button>
</div>
And your DropDownList:
#Html.DropDownListFor(x => x.CapsuleFK, new SelectList(Model.Capsules, "pk", "name", "pk"), new { id = "ddlCapsules", data_bind = "event: { change: updateFillers }" })
Then, some JavaScript:
var FillersViewModel = function () {
var self = this;
self.fillers = ko.observableArray([]);
self.updateFillers = function () {
var selection = $('#ddlCapsules').val();
var dataToSend = { cappk: selection };
$.ajax({
url: 'Process/GetFillersByCapsule',
data: { cappk: dataToSend },
success: function (data) {
self.fillers(data.fillers) // where `fillers` is an array
}
});
}
}
var viewModel = new FillersViewModel();
ko.applyBindings(viewModel);
This is a very simplistic example, and you'll need to do some more work to make it do everything you need it to do in your scenario, but the general idea is that every time the dropdown list is changed, Knockout will call your updateFillers method, which will execute the AJAX and put new data into the fillers observable array. Knockout automatically tracks changes to this array (hence the "observable" part), so an update is automatically triggered to any part of your page that relies on it. In this scenario, that's your div containing the buttons. The foreach binding will repeat the HTML inside for each member of the array. I've used a simple button element here just to illustrate, but you would include the full HTML required to create your particular button like interface. The text binding will drop the content of name in between the opening and closing tag. Refer to: http://knockoutjs.com/documentation/introduction.html for all the binding options you have.
There's much more you could do with this. You could implement templates instead of hard-coding your HTML to be repeated in the foreach. And, you can use your partial view to control the HTML for this template. The important part is that Knockout takes the pain out of generating all this repeating HTML for you, which is why I recommend using it.
Hope that's enough to get you started.
I have a view with a drop down list. The default value for this is stored in a session variable. However, the user change change this, in which case new data is entered.
I have a change handler on the drop down:
#using (Html.BeginForm())
{
#Html.DropDownListFor(model => model.SelectedID,
new SelectList(Model.SelectValues, "Key", "Value",
Model.SelectedID), "", new { onchange = "this.form.submit()" });
... more fields ...
<input type="submit" name="Save" />
}
[HttpPost]
public ActionResult Index(ViewModel vm)
{
... decide if I update my data or save the changes ...
}
I tried wrapping the select in a separate form tag, but then the value of my SelectedID not updated in my view model.
How can I determine when the form is posted from a drop down change, and when it is posted from a button click?
If you don't want to reload the entire page when the user changes the selection of the dropdown you could use AJAX to silently trigger a request to a different controller action that will do the necessary updates. For example:
#Html.DropDownListFor(
model => model.SelectedID,
new SelectList(Model.SelectValues, "Key", "Value"),
"",
new {
id = "myddl",
data_url = Url.Action("update")
}
)
and then in a separate javascript file:
$(function() {
$('#myddl').change(function() {
var form = $(this).closest('form');
$.ajax({
url: $(this).data('url'),
type: 'POST',
data: form.serialize(),
success: function() {
alert('update success');
}
});
});
});
and finally you could have a controller action responsible for the update:
[HttpPost]
public ActionResult Update(ViewModel vm)
{
... this will be triggered everytime the user changes some value in the
droipdown list
}
The simplest way would be to simply attach some behavior to those element's events and set a hidden field with the event target (which by now, should sound very familiar to __EVENTTARGET).
Like so:
$('#someButton').click(function()
{
$('#someHiddenField').val('someButton');
});
$('#someDropDown').change(function()
{
$('#someHiddenField').val('someDropDown');
});
And then your action method could inspect this value and act appropriately.
HOWEVER
It sounds like you're thinking in an outmoded concept for MVC. If you really needed some new information, you should consider using some Ajax and then having one of your action methods return a partial view if you want to update part of the page.
Background:
I have an MVC layout (master) view which uses #Html.RenderAction to display a dropdown in the left side navigation panel. This dropdown will be displayed on all the pages of the site.
The dropdown is wrapped in a form element and on change of the dropdown the form is posted.
Question:
Now, once the form is posted, I need to reload the contents of the current page (whatever page the user is currently on...) with the value of the dropdown attached in the querystring. This would mean replacing the value which might already be there in the querystring from a previous selection.
Example:
The user navigates to the Home page of the website:
Url: /Home/?dropdownvalue=blue
At this point the dropdown displays 'Blue' as selected. The user changes the value in the dropdown to 'Red'. I need to reload the page with the following url -
/Home/?dropdownvalue=red
The user moves to another page in the site:
Url: /CustomerFavorite/?dropdown=red
Change the value in the dropdown from 'Red' to 'Green'.
The 'CustomerFavourite' page should be reloaded with 'Green' in querystring.
I apologize for the lenghty post. But, thought of providing some extra information to clarify the issue.
Thanks.
Thanks to Darin for providing the link for javascript manipulation of the querystring. But, I wanted a server side solution so here's how I implemented it -
public ActionResult _ColorSelection(ColorModel model)
{
string selectedColor = model.Color.Value;
// Modify Querystring params...
NameValueCollection querystring =
HttpUtility.ParseQueryString(Request.UrlReferrer.Query); // Parse QS
// If Querystring contains the 'color' param, then set it to selected value
if (!string.IsNullOrEmpty(querystring["color"]))
{
querystring["color"] = selectedColor;
}
else // Add color key to querystring
{
querystring.Add("color", selectedColor);
}
// Create new url
string url = Request.UrlReferrer.AbsolutePath
+ "?" + querystring.ToString();
return Redirect(url); // redirect
}
You may try using a GET method of the form in which the drop down is wrapped:
#using (Html.BeginForm(null, null, FormMethod.Get))
{
#Html.Action("SomeActionThatRendersTheDropDown", "SomeController")
}
or maybe the entire form is wrapped inside the action:
#Html.Action("SomeAction", "SomeController")
and then in javascript subscribe to the change event of the dropdown and trigger the submission of the form:
$(function() {
$('#DropDownId').change(function() {
$(this).closest('form').submit();
});
});
Because you have used GET request, this will automatically reload the current page sending the value of the dropdown in the query string.
If you are using jQuery you can create a function that will post the selected value in your list.
$(document).ready(function () {
$("#ListId").change(function () {
$.ajax({
url: "CustomerFavorite/Edit",
type: "POST",
data: "colour=" + $("#ListId").val(),
success: function (result) {
//Code to update your page
}
},
error: function () {
}
}