MVC-helper maken voor javascript/jQuery

Voor een nieuw project gebruik ik een javascript/jQuery-suite om grafieken weer te geven ( http://www.highcharts.com ). De javascript-code voor elke pagina is ongeveer hetzelfde, dus ik wilde het centraliseren en iets herbruikbaar maken. Ik gebruik ASP.NET MVC voor deze applicatie, dus ik was op zoek naar het maken van een servercontrol met enkele instellingen die de javascript/jQuery-code op een georganiseerde manier zouden uitvoeren. Maar ik weet niet zeker hoe dit op een nette manier moet worden gedaan. Natuurlijk zou ik gewoon kunnen gaan en een lange reeks bouwen en die naar de pagina renderen, maar dat lijkt nogal lelijk.

Dus ik ben eigenlijk op zoek naar de beste manieren om een ​​stuk JavaScript in een beheersbare serverbesturing te converteren. Ik wil ook dingen zoals automatische databinding opnemen in JSON webservices.

Bijwerken; Ik heb een model gemaakt dat ik wil gebruiken voor het in kaart brengen. Het bevat dingen zoals aslabels, grafiektitels enzo.

Nu op mijn pagina, heb ik de jQuery-code die dingen als deze bevat:

title: { text: '<%: Model.Title %>' },

om de verschillende diagrameigenschappen in te stellen. Maar ik begrijp dat dit geen goede oefening is, ik weet alleen niet zeker wat het is. In het bovenstaande voorbeeld wil ik dingen doen zoals de eigenschap title toevoegen wanneer deze in mijn model is ingesteld, maar volledig weglaten wanneer dit niet het geval is (wat nu niet gebeurt). Ik kan er komen door heel wat if/else-dingen toe te voegen, maar dat maakt de dingen niet mooier. Daarom vraag ik me hardop af of de constructie van de jQuery-code niet iets is dat in een klasse moet worden gedaan.

3

3 antwoord

In MVC DisplayTemplates of gedeeltelijke weergaven zijn meer analoog aan besturingselementen dan HtmlHelpers. Als het een script is dat geen extra lookups of dergelijke dingen vereist, zou ik gewoon een gedeeltelijke weergave gebruiken en verwijzen naar @ Html.Partial . Als het extra functionaliteit/beveiliging/gegevens opzoeken heeft, zou ik met een onderliggende actie gaan (dwz een ChartController maken en verwijzen naar @ Html.Action ("ActionName", "Chart") , params) . Als het gebaseerd is op een eigenschap in uw model, dan zou ik gaan met een DisplayTemplate.

Als het volledig klantzijde is met slechts een gegevensverzoek, zou ik zeker doen wat wordt aanbevolen door Marquez en gewoon een .js-bestand hebben.

1
toegevoegd

Ik zou aanraden om het JavaScript in een .js-bestand te plaatsen en er eenvoudigweg naar te verwijzen met een scripttag uit de MVC-overzichtsweergave, paginaweergave of gebruikersbedieningsweergave wanneer u dit nodig hebt. Het plaatsen van JavaScript in een apart bestand heeft een aantal voordelen en het wordt als een goede gewoonte beschouwd. Het cachen van de javascript-inhoud in de browser zal de prestaties verbeteren en het gebruik van bandbreedte verminderen - en het zal gemakkelijker zijn om het JavaScript met firebug of een ander javascript-debugger te debuggen.

1
toegevoegd
Ok, klinkt als een goed idee. Maar ik heb een manier nodig om de output die de chartcontrols produceren te combineren met de data die ik eraan geef. De chartcontrol wordt hergebruikt in meerdere pagina's, dus ik wil het door de controller configureerbaar maken. Op een pagina waar de y-as het aantal gebruikers vertegenwoordigt, wil ik bijvoorbeeld aan mijn model kunnen vertellen dat de y-as het aantal gebruikers is en dat alleen in de grafiek uitvoeren. Ik kan dat doen door modellen in de jQuery-code weer te geven, maar ik ben er niet helemaal zeker van dat dit de juiste manier is om hier naartoe te gaan.
toegevoegd de auteur Jasper, de bron

Ik heb gewerkt aan een open-source MVC Html Helper voor Highcharts . Het is nog in ontwikkeling, maar ik vind het resultaat echt leuk, dus ik hoop dat het op de een of andere manier nuttig voor je kan zijn. Dit is een voorbeeld van wat u doet met Highcharts MVC:

@(
    Html.Highchart("myChart")
        .Title(this.Model.Title)
        .WithSerieType(ChartSerieType.Line)
        .AxisX("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")
        .AxisY(this.Model.MyChartAxisTitle)
        .Series(
            new Serie("iPad", new int?[] { 0, 0, 0, 0, 0, 0, 16, 20, 40, 61, 100, 120 }),
            new Serie("MacBook", new int?[] { 616, 713, 641, 543, 145, 641, 134, 673, 467, 859, 456, 120 }),
            new Serie("iPhone", new int?[] { 10, 45, 75, 100, null, 546, 753, 785, 967, 135, 765, 245 })
        ).ToHtmlString()
)
0
toegevoegd