I have a view that displays several checkbox lists of items in tables (the lists are dynamic). I need to know how to update the ViewModel when the user clicks on a checkbox so that when control returns to the controller it can inspect the viewmodel to determine which items were selected.
The VM contains several properties such as
public IEnumerable<IFilterItem> Cities;
public Interface IFilterItem
{
int ID { get; set; }
string Name { get; set; }
bool IsSelected { get; set; }
}
What I need help with is how to set the view's copy of the model data in the checkbox's onclick handler. Thanks as always, you guys are great!
Are you using the CheckBoxFor helper? If so, when control returns to the controller your view model should just have IsSelected set based on the state of the checkbox.
Related
c# code:
public class Person{
public string Name { get; set; }
public age int { get; set; }
}
cshtml code which generates an id of #Person_Name
#Html.DropDownListFor(m => m.Person.Name)
javascript code:
$('#Person_Name').on("change", function () {
//Do something
}
If I change the Person class property name from Name to FullName. The next step is to modify the cshtml code to read as:
#Html.DropDownListFor(m => m.Person.FullName)
I understand you can manually go in and change the Jquery code, but if this change is made and the person making the change is unaware of the jquery, it is going to cause an error. Is there a way to prevent this from happening through some form of notification or logging? Rather than just remembering that the jquery needs to be changed.
You do have the option to use:
#Html.IdFor(x => x.Person.FullName)
Or
#Html.NameFor(x => x.Person.FullName)
That does rely on having small bits of script in pages, but for what id do this is mostly calling functions in .js resources which from my point of view I find better for reuse anyway.
You may still not get alerted to all issues unless you choose to compile your MVC views, you'll probably get a warning if you have the view open. How you set up your project to compile your MVC views will depend on the type of project but a quick Google should help with that one.
I am making an if check in the controller
if(validDate<DateTime.Now)
{
//TODO
}
And what I want to do is to hide a specific button in my view if this statement is true, otherwise show it. I am also using jquery in front end.
Can someone help me to manipulate the html element, the button, from the controller, example add a style class or something?
In this case I need to make the changes from the controller and not from the jquery, but I can use the jquery after if needed.
You need to use models (aka as ViewModel), #thomashaid already gave you a comment with a useful article: Views And ViewModels.
Create a class in the "Models" folder of your MVC Project. Like this:
public class MyViewModel
{
public bool ShowButton { get; set; }
}
Then in your controller, create an object of your ViewModel class and assign the corresponding value to the ShowButton property. Then pass the ViewModel to the returning view:
public ActionResult MyAction()
{
var myViewmodel = new MyViewModel();ยด
if(validDate < DateTime.Now)
{
myViewModel.ShowButton = true;
}
return View(myViewModel);
}
Finally, use razor syntax in your view to manipulate the HTML code that will be returned to the client:
#model MyViewModel
#if (Model.ShowButton)
{
<Button>now you see me</Button>
}
I am making a web app which make use of multiple tabs.
I want show a Data of one type in one tab e.g Student Profile in one tab
And in other Tab a different model is needed e.g i need the Registeration model class in the same view
Yes you can by using either System.Tuple class (or) by means of using a ViewModel (a custom class)
ViewModel Option
public class ViewModel1
{
public StudentProfile profile {get; set;}
public Registration Reg {get; set;}
}
Pass this ViewModel1 as your model object to the view (or) bind your view with this model object. It's better than using a Tuple<T1, T2>
Yes, you could just add a main view model then nest the tab models within the main view model
public class YourMainViewModel
{
public Tab1ViewModel Tab1 {get; set;}
public Tab2ViewModel Tab2 {get; set;}
}
Then in your view, just pass the tab models to your partials (if you are using partials for your tabs)
#{Html.RenderPartial("Tab1", Model.Tab1);}
#{Html.RenderPartial("Tab2", Model.Tab2);}
Yes, I know at least 3 ways to set some models in a single view, but i think the best practice it's to use ViewModels.
If you are using entity framework you can do something like that.
Set in Models a class which will be you ViewModel.
public class StudensP_Registration
{
public IEnumerable<StudentsProfile> studentsp { get; set; }
public IEnumerable<Registration> registration { get; set; }
}
Then you call it in your controller like this.
public ActionResult Index()
{
StudensP_Registration oc = new StudensP_Registration();
oc.studentsp = db.StudentsProfile;
oc.registration = db.Registration;
return View(oc);
}
And then in the view
#using Proyect_name_space.Models;
#model StudensP_Registration
#foreach (ordenes_compra item in Model.studentsp) {#something you want..}
I hope i can help you.
I have an object (mockup below) I've populated client-side with JavaScript and I need to post it to my server. There's a corresponding type of object defined in a class server-side that I'm expecting to receive.
When I attempt to post the object, everything posts fine except for a single property. This property is defined server-side as a List<KeyValuePair<Guid,Bar>>. The Bar doesn't seem to be the issue, as I can post that just fine.
Client-side, I've attempted to reformat the corresponding property on the JavaScript object in a few ways (as an array of object pairs, as literal properties on the object, etc.), but it's always an empty list when it arrives at the server.
I'm guessing this is a syntax issue, but I'm having trouble figuring out what the proper syntax is, and I'm seeing a lot of conflicting examples online. I'm hoping someone can speak from experience as to how this should be posted.
//C# Class MockUp
public class Foo
{
public Guid FooId {get;set;}
public string Description {get;set;}
public bool Inactive {get;set;}
public List<KeyValuePair<Guid,Bar>> FooBar {get;set;} //This comes over as null regardless of how I arrange the object client-side.
}
//TypeScript Class MockUp
class Foo {
fooId: string;
description: string;
inactive: boolean;
fooBar: Array<KeyValuePair>;
}
class KeyValuePair {
key: string;
value: Bar
}
class Bar {
//...Implementation here mathces Bar on the server
}
Will work if you create a dto for foobar
public class FooDto
{
public Guid FooId {get;set;}
public string Description {get;set;}
public bool Inactive {get;set;}
public List<FooBarDto> FooBar {get;set;}
}
public class FooBarDto
{
public Guid Key {get;set;}
public Bar Value {get;set;}
}
The reason why KeyValuePair will not work in this case is because the properties in KeyValuePair are read only, take a look here at the msdn docs you can see that the Key and Value proerties only have getters
I am building a SPA (Single Page Application) using Breezejs and Knockoutjs.
I am running into an issue when trying to set a navigation property inside a knockout subscription. On the final line of the ko.subscription the console.log function shows me the entity, however, the WebPresences navigation property is null.
Not sure if the fact its in a ko.subscription really matters but I've been able to set the navigation prop just in a js function I call right before save, so I think it has some significance.
So here is my Entity Model
public partial class Entity
{
public int Id { get; set; }
public string Name { get; set; }
public Nullable<int> WebId { get; set; }
public virtual WebPresence WebPresence { get; set; }
}
And here is my ko.subscription and relevant variables:
var vm = {
newEntity: ko.observable(datacontext.createBreezeEntity('Entity')),
newWebPresence: ko.observable(datacontext.newBreezeEntity('WebPresence')),
}
vm.newEntity().WebPresence.subscribe(
function (data) {
var self = this;
if (data === null)
self.target(vm.newWebPresence());
console.log(vm.newEntity());
}
);
And last but not least my datacontext
createBreezeEntity: function (entityName) {
return manager.createEntity(entityName);
},
newBreezeEntity: function (entityName) {
return manager.metadataStore.getEntityType(entityName).createEntity();
}
I do not understand what you're striving to accomplish.
One thing I'm pretty confident about ... is that your the datacontext.newBreezeEntity creates an object that is just hanging in thin air and isn't part of any navigation property.
Let's look at your datacontext.newBreezeEntity method:
return manager.metadataStore.getEntityType(entityName).createEntity();
This indeed does create a new entity of the type named entityName. But this is a 'proto-entity'. It does not belong to an EntityManager ... certainly not to the manager instance. It isn't related to any particular other entity (e.g., your mysteriously-named Entity entity). It's just a detached entity.
I'm betting you thought that it would belong to manager because you started the expression there. Well it doesn't. You lost the connection with manager the moment you asked for its metadataStore.
But there is so much else that makes no sense to me at all. I can't tell why you're subscribing to vm.newBreezeEntity nor why it's called "newBreezeEntity" nor what it's relationship is supposed to be to vm.newEntity nor what you think this is within the subscription function.
Perhaps you should step back and describe what you WANT this code to do.