CODEWITHSUNDEEP
javascriptasp.net-mvccontrolsascxnerddinner
peterfoldi
peterfoldi

Reputation: 7471

MVC, ascx and Javascript best practice(s) - how to create self-containing controls? NerdDinner does it wrong

The question is how to create controls/partial views/edittemplates (ascx files) in ASP.Net MVC2 so that they are "self-containing". Self-containing means here that if some Javascript code should be applied on the control, that's not included in the page (aspx), but in the control itself. Specific example: NerdDinner's DateTime.ascx. The file contains the JS code which makes the textbox a nice DateTime picker.

My problems: The containing page has the jQuery.js, the timepicker.js, the jQueryUI's css and the datepicker's css. (In case of NerdDinner these all are in the master page). So whenever I'd like to use the fancy DateTimePicker for my DateTime types, the containing page has to be aware of these dependencies and has to add all the js and css files. I think what I miss here is a solution which replaces the ClientScript.RegisterClientScriptBlock.

Other problem with the same NerdDinner example: In the DateTime.ascx it says $('#Dinner_EventDate') which is a dependency both on the container type and on the property name. That's not a general solution for a DateTime shared EditorTemplate.

Any suggestions?

Upvotes: 3

Views: 1097

Answers (2)

jason
jason

Reputation: 3615

I'm not sure if this is a question specific to MVC. If you want a truly self contained control, look at server controls (like a composite control or script control). These controls do not use ASCX pages and are independent of a web application. This way, you can embed your CSS sheets and JS pages in a resource. When you build the project, it compiles to a single DLL. In this way, you can create your own library's of controls. The downside, though, is that making these controls are considerably more difficult. If you are interested, let me know and I'll post an example. Take a look here, for an example: http://msdn.microsoft.com/en-us/library/aa719734%28v=vs.71%29.aspx

But, if you really want to use ASCX page to embed the javascript and CSS, you can do it through the script manager (well, I've at least done this with Javascript, not CSS). Example:

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
      dim myScript as new StringBuilder
      myScript.Append("function helloWorld(){" & vbcrlf)
      myScript.Append("alert('Hi')" & vbcrlf)
      myScript.Append("}" & vbcrlf)

      ScriptManager.RegisterStartupScript(Me.Page, Me.Page.GetType(),"MyScript",myScript.toString, false)
  End Sub

This example creates a simple javascript function text and registers it with the page. No, if you have lots of javascript, this will get cumbersome. Also, I'm not sure this will work with CSS. Let me know if this helps.

Upvotes: 0

eglasius
eglasius

Reputation: 36027

You need to link to these files from the page. Doing otherwise will be hacking your way against the way these elements are included in html vs. where your control is included in the page.

What we do is we join all these separate js/css files into a single file with some extra code (done once). That way you only link to the single file from your master page. As long as you don't have anything particularly heavy in there that's very reasonable.

For the id issue, change the jquery to search by css class.

original answer: ignore below, I thought it wasn't already in separate files.

Move it to a .js file, and change from using the id to use a class.

If you want to keep it structured / the .js code that's on a file dedicated to only that control's code, you can do so and add some extra code that joins all the various .js files in your site to a single .js file. This allows you to structure it as you please, without getting unnecessary extra requests.

Upvotes: 0

Related Questions