jQuery Forum

JΛ̊KE

We use the HTML id attribute in our jQuery Mobile apps by ensuring that each id value is unique within our site.

Example:

<div id="SocialTabs_65f33c1d-0282-4f0b-b2ae-a620f471d3fd" class="social-tabs">

We’re using ASP.NET MVC. Our base ViewModel class contains a property named ModelGuid. A new ViewModel is instantiated with each request. It’s initialized like this:

ModelGuid = "_" + Guid.NewGuid().ToString(); // Guid = “Globally Unique Identifier”

In our Razor view template, we’ll set the id using something like this:

<div id="SocialTabs@Model.ModelGuid" class="social-tabs">

(Actually, we get “SocialTabs” from a method call, but I don’t want to complicate the example.)

From http://msdn.microsoft.com/en-us/library/system.guid(v=vs.110).aspx :

“A GUID is a 128-bit integer (16 bytes) that can be used across all computers and networks wherever a unique identifier is required. Such an identifier has a very low probability of being duplicated.”

Jim

watusiware,

Thank you for your thoughtful reply.

Because the app instantiates a new ViewModel with each request, even when the page is reloaded a new GUID is created.

From an earlier post of mine, at http://forum.jquery.com/topic/need-advices-with-jqm-1-4-site-architecture-with-mvc4#14737000004805155 , this is the part where I agree someone might start pulling their hair out:

“Things get a little more complicated when you’re doing a partial page update because if you’re not careful, your GUIDs in the updated part of the page can become different than the GUIDs in the original part of the page. This is bad if these different parts of the page reference each other, or if your JavaScript only knows about the original GUID. To prevent this, you’ll need to POST back the original GUID when requesting a partial page update so you can reuse the original GUID.”

We don’t have any plans to use PhoneGap, but thank you for pointing that out. I’ll have to take a look at what would be required.

My chief motivation for using IDs is for a guarantee of selector precision. 

The probability of encountering a duplicate System.Guid in my limited use case is effectively zero.

Here’s an example of how the GUID is introduced into some JavaScript:

var emailer = new Emailer("@Model.ModelGuid", "@Url.Action("SendHelpFeedbackEmail")");

Jim

There is a different product named BridgeIt that serves a similar purpose as PhoneGap but which might be compatible with ASP.NET MVC, or any web app. I don't know anything else about it other than what's displayed on their website. I'm only pointing this out as a possibility to anyone who might land on this page looking for a solution.

Of course BridgeIt won't turn your web app into a native app, but if you're only trying to access some native features from within your jQuery Mobile/ASP.NET MVC web app, then maybe this can be of use. 

Jim