Databases
StackOverflow2013
Postsdbo
POASP.NET MVC and HTML5 JavaScript Data Practices
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POASP.NET MVC and HTML5 JavaScript Data Practices
    primarykey
    data
    text
    <p>I am trying to figure out the best way to get data onto my webpages for use in JavaScript.</p> <p>The majority of my experience is desktop land in .Net (WPF etc). </p> <p>Technology:</p> <p>I am currently using ASP.NET MVC3. I have a bunch of business layer models. These models can sometimes have interesting relationships. I need to get these models onto the client and do things in JavaScript with them and then send them back to the server for persistence and other business logic. </p> <p>Core Values:</p> <p>I would like to find a solution that minimizes coupling, minimizes code/functionality duplication, supports separation of concerns, and Easily maintainable (IE understandable, knowing where to change what etc.).</p> <p>There are a few ways of handling this that I have thought of. Both seem to fall short.</p> <p>Option 1:</p> <p>Create JavaScript versions of my models that I will call JavaScript View Models (JSVMs). these JSVMs are created through Ajax calls. The JSVMs are mapped to from generated JavaScript objects based on the server-side models. That means there is a "Map" "class" somewhere that handles mapping to and from these two models (to lower coupling and maintain SoC). </p> <p>Downside, Lots of code duplication. When you change either the JSVM or the server side model, you might need to change this mapping "class". </p> <p>This seems to solve only some of my issues.</p> <p>Option 2:</p> <p>I found a library called "FluentJson.Net". It basically allows me to create knockoutjs JavaScript objects from razor inline. From there I can basically just code against this dynamically create object. There is no need to create the JSVMs. </p> <p>Downside, There is very tight coupling to the server-side model. A change in the server-side model could cause needed changes on multiple pages! </p> <p>There are probably some combinations of option 1 and option 2 that I could explore but I assume they will all have drawbacks.</p> <p>Questions:</p> <p>What I really would like to know is: what are the best practices for handling models across the server and client? Is there a solution that maintains my core values?</p> <p>(Edit: Added the following example)</p> <p>Example:</p> <p>C# Models:</p> <pre><code>public interface IChartDefinition{ string Name{get; set}; IEnumerable&lt;IChartSeries&gt; Series {get; set;} } public interface IChartSeries{ Color Color{get; set;} Name {get; set;} } </code></pre> <p>On the server this definition defines the basic chart. This chart definition is persisted to a database and can later be pulled up and used with real data to display a chart on the client.</p> <p>I have a controller called "ChartDesignerController" and it's basic function is to let people manage their chart definitions.</p> <p>So I have a view for called Create for creating a chart definition. In my view I want a + button to add series. as series are added I want the UI to display options for the series such as color and name. The user can remove series etc.</p> <p>All of this interaction is done with javascript on underlying javascript objects that hold this data until the end user pushes the submit button and send this data back to the server to be persisted. </p> <p>These javascript objects will look almost identical to the C# models that get persisted.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMike Bynum
    1. USMike Bynum
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POASP.NET MVC and HTML5 JavaScript Data Practices
      1. USJesse
      1. VTFavorite
    2. VO
      singulars
      1. POASP.NET MVC and HTML5 JavaScript Data Practices
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhy do you need the model on the client other than for display? In java script you are going to be working with the objects on the page and their values, what would be the advantage of duplicating your MVC structure in java script?
      singulars
      1. POASP.NET MVC and HTML5 JavaScript Data Practices
      1. USMaess
    2. COMaybe that is part of my problem. Alot of functionality needs to be representable on the client. That data needs to exist there somewhere and then be sent back to the server to make changes. I dont think that I need to duplicate my entire set of models but some of them will need to be represented on the server for manipulation.
      singulars
      1. POASP.NET MVC and HTML5 JavaScript Data Practices
      1. USMike Bynum
    3. COOption 3: Use JavaScript on the server and re-use your business models server/client. You basically have a core Model and your server inherits from it and your client inherits from it. This maximises code re-use through inheritance
      singulars
      1. POASP.NET MVC and HTML5 JavaScript Data Practices
      1. USRaynos
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload