CODEWITHSUNDEEP
jqueryasp.net-mvc-3htmlpartial-views
Toad
Toad

Reputation: 115

MVC3 JQuery Partial View Div Update

Here is my scenario:

I have the following menu created from a viewModel

<ul>
    <li id="1" class="menu-item-click">Item 1</li>
    <li id="2" class="menu-item-click">Item 2</li>
    <li id="3" class="menu-item-click">Item 3</li>
</ul>

Each item in the list has the "capability" of knowing what partial view it should load (it is stored in the database this way)

I have the following code to capture the click event on each list item

$(".menu-item-click").click(function () {
//load the correct partial view

});

My question is were should i store the information on what partial view to load?

I could store it in the list item (li) as a custom attribute. (Doesn't seem like the best way)

I wish there was a way to send the list item's id to a type of "master" controller that could return the correct partial view.

Any help/direction would be greatly appreciated.

Upvotes: 2

Views: 2318

Answers (3)

Oscar Godson
Oscar Godson

Reputation: 32716

I'm not sure exactly what type of information you want to store and on what, but if you are using jQuery and its based on the DOM, a great way to store information is $.data();

$.data('#someElement','theKey','some data goes here')

Then, calling:

$.data('#someElement','theKey')
//returns "some data goes here"

You can also store JSON stuff in there also like:

$.data(document.body,'data',{name:'Jim smith', email:'[email protected]'});

This is how I would do it if the data you want to store is based on an element. If it's arbitrary data you could store it in localStorage. If thats more of what you are looking for let me know and I can write an example of that too.

Upvotes: 0

Eli
Eli

Reputation: 17825

I prefer attaching the data to the element, it is considered a semantic way of storing data with your elements without mixing in with JS code, plus it's considered a standard practice starting with HTML5.

<ul>
    @foreach (MyView item in Model.MyViews) {
        <li id="@item.id" class="menu-item-click" data-view="@item.href">Item 1</li>
    }
</ul>


$(".menu-item-click").click(function () {
    var view = $(this).data('view');
});

Upvotes: 3

ataddeini
ataddeini

Reputation: 4951

You could consider using data-* attributes for this on each li. I know you mentioned you didn't think that was the best option, but I think it ends up keeping things nice and simple.

Upvotes: 0

Related Questions