ASP.NET MVC Razor View selector and model mapping/binding - javascript

I am new to ASP.NET MVC. I was trying to create a page where I was displaying few controls and 3 of them are Country, State and City. Since these are common on few other pages, I did research to find the best way to create them in Razor view and I finally ended up using $.getJSON and then filling the dropdown select with options in javascript, following is the code form JS:
$(document).ready(function () {
$.getJSON("/Meta/GetCountries", null, function (data) {
$.each(data, function (index, optionData) {
$("#country").append("<option>" +optionData.Text+"</option>")
});
});
});
And instead of DropDownListFor or EditFor I used normal HTML select for this purpose. But then I wasn't sure how MVC binds each control with the field in the model. Because the HTML is not aware of any model, I know we use something like m => m.Country, so I looked at the HTML code of Razor view and I didn't see any special things, so I felt that may be it is handled by Name/ID that we specify in the HTML tags so I tried to use the same and it worked. So my question is, is this the right approach? Using the field name value as Name in HTML tag works fine, but would there be any problems in future with this kind of approach?

Related

html table id's are dynamic in nature for me to filter data based on dropdown value

I'm new to html & js. I'm leveraging render() function in python to convert a dataframe to html where I'm trying to add dropdown to the page. once the html page is generated, i'm finding table id to be randomly generated unique value for me to use it in javascript logic for dropdown to filter html data. Kindly could someone help me how to handle this scenario.
While rendering pass the parameter, table_id="Your_id", to the dataframe.to_html function,
Ex:
DataFrame.to_html(table_id="Your_id").
Also the following is a good link to look over:
https://pandas.pydata.org/pandas-docs/version/0.23.4/generated/pandas.DataFrame.to_html.html
Here is a good github reference to the source code:
https://github.com/pandas-dev/pandas/blob/v0.23.4/pandas/core/frame.py#L1977-L2040

MVC 3 Page navigation and passing parameters with javascript

i have my main page and also two partial views. One partial view is a menu and the other is a telerik grid.
What i want to achieve is selecting a row in the grid and when i click a button in the menu i want the page to navigate to that action passing the selected row (id).
i want to refresh the entire page and not only the div with the grid.
I tried using document.location = "/Pedido/DetalhePedido/" + id; but i don't receive the id n the controller.
I also tried using $.get('#Url.Action("detalhePedido", "Pedido")', data, function (result) { }); usually i use this to refresh a div and i can't seem to make this work with the entire page (and it probably shouldn't ).
Wich methods do you usually use in your web apps to reproduce this sort of behaviour?
Because clicking on the row happens on the browser, you can't depend on anything from the controller or model unless it's already somewhere in your original model. I implement this by adding a hidden Id column to the grid and model it uses for rendering, then add client events and handlers to the grid and view. Check out the samples provided for the Grid under Client-Side Events for some of the different client events you can take advantage of.
On your grid, first add the Id column (hidden if you like):
.Columns(columns =>
{
columns.Bound(o => o.Id).Hidden(true);
}
Then add ClientEvents and wire up onRowSelect like so:
.ClientEvents(events =>
{
events.OnRowSelect("onRowSelected");
}
Then add a function to handle this event like so:
function onRowSelected(e) {
var id = e.row.cells[0].innerHTML;
window.location = "Something/Details/" + id;
}
UPDATE
Sounds like you are doing everything right on the client. The problem is likely elsewhere, in your Action or Bindings. But to be certain, take a look at what /Pedido/DetalhePedido/" + id actually is with an alert before venturing down that path. You should be able to take that and enter it directly into the url of your browser and hit your action as long as your action is correctly defined, accepting an int called id.
If its still a problem, you need to look at you action. Is it marked for Post? If it is Window.Location wont work because it's not a post. Is the argument it accepts named Id and of type int? If not, should it be? Have you changed your Routes, and if so does your Url match any routes defined?

Teleric MVC and knockout update values inside

I would like to use Teleric MVC components and knockout.
I found good example how to use it http://www.telerik.com/community/forums/aspnet-mvc/grid/compatibility-with-knockout.aspx
But i have a littel bit other task, when I change some value of knockout object inside of java-script function, teleric contol get this value but don't re-drow UI values. Teleric show new value just if user click on control. Does any one have any idea how to update teleric controls in my case ?
//Show selected information
function ShowKioskSettings(newDataFromAjaxcall) {
//general
viewModel.Somevalue = newDataFromAjaxcall.Somevalue;
ko.applyBindings(viewModel);
}
I findout solution, calling $("input:text").focus(); in the end of function. but any way it looks like Telerik issue.

MVC3 - jQuery datepicker when multiple elements have the same ID

I have a weird situation (don't we all?) with datepickers and want to get some advice.
I have a screen with a list of Locations, and for each Location, they can click Edit and edit that location. The Edit displays below the Edit link, and they can edit multiple locations at one time. This means the same View is rendered on the screen multiple times, and therefore multiple fields will exist with the same id (editing 4 locations will result in 4 "DateOpened" fields).
So, when I load my View, javascript adds datepickers to any fields that need it like so:
$(document).ready(function () {
var elements = $(".NeedsDatePicker > td > input");
$(".NeedsDatePicker > td > input").datepicker();
$(".NeedsDatePicker").removeClass("NeedsDatePicker");
});
Works fine, but, as you've probably already figured out, when I click a date on the calender, it populates the first "DateOpened" field when multiple Edit windows are open.
Is there a way to tell the datepicker to use the field WITHIN a certain parent, like you can for general jQuery selects?
$("#DateOpened", "Location-134").doWhatever...
...or is there a way to give the fields different id's without breaking MVC's UpdateModel() function? Or any other advice?
You should definitely keep IDs unique within an HTML DOM. Most, if not all, DOM manipulation libraries/frameworks, including jQuery, have this assumption built-in.
There are a few questions on SO WRT to avoid the same IDs in the form:
two forms with same input id in asp.net mvc
how to prevent html input id duplication on asp.net mvc 3 when a model contains multiple elements

Using Rails and Formtastic to make a dynamic form

I am trying to make a very simple dynamic form. I am using Rails 3.1 and formtastic. Basically, I want to change a couple of fields based on a radio button.
It would look something like..
What kind of a shape are you making?
(Radio Button with a choice of square or rectangle)
If square is selected one new field for size is displayed. If rectangle is selected two fields are displayed for size.
The table will actually have only one size column, so the model will munge the potentially two fields into one before the ultimately hit the database (i think, still working on this issue as well)
Anyway, it is my understanding that I would need to use javascript in order to change the form. I am pretty javascript illiterate and really don't understand how to use it with formtastic. Any pointers would help.
Thanks!
Yes, you should use js to do that. If you're new to js don't hesitate and learn jQuery, it's becoming sort of js standard for rails now.
To do what you want you should display both size fields in your view and show/hide second field depending on radio values. It can be something like that:
$(function() {
var $radios = $("input[name=radioName]");
var $size2 = $("#size_field_2");
function toggleSizeField() {
$size2.toggle($radios.filter(":checked").val() == 0);
}
$radios.click(toggleSizeField);
toggleSizeField();
});

Categories