MVC3 JQuery Partial View Div Update

Question

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.

How do you get the partial view links? Does your model contain an IEnumerable<string>? — Eli
– Eli, Commented Apr 21, 2011 at 16:52
Yes. The MenuItem entity contains Id, MenuName, and MenuView — Toad
– Toad, Commented Apr 21, 2011 at 17:01

Eli · Accepted Answer · 2011-04-21 16:55:03Z

3

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');
});

answered Apr 21, 2011 at 16:55

Eli

17.8k4 gold badges40 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Toad Over a year ago

Yeah...this was my thought also.

ataddeini · Accepted Answer · 2011-04-21 16:52:58Z

0

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.

answered Apr 21, 2011 at 16:52

ataddeini

4,96128 silver badges34 bronze badges

1 Comment

Toad Over a year ago

That was my first thought. Using the html5 data- attribute. Just wondering if there is another way I hadn't thought of.

Oscar Godson · Accepted Answer · 2011-04-21 16:55:17Z

0

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.

answered Apr 21, 2011 at 16:55

Oscar Godson

32.9k42 gold badges129 silver badges207 bronze badges

Collectives™ on Stack Overflow

MVC3 JQuery Partial View Div Update

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related