src - Page 153 - Developer IT

Create Views for object properties in model in MVC 3 application?

- by Anders Svensson

I have an Asp.Net MVC 3 application with a database "Consultants", accessed by EF. Now, the Consultant table in the db has a one-to-many relationship to several other tables for CV type information (work experience, etc). So a user should be able to fill in their name etc once, but should be able to add a number of "work experiences", and so on. But these foreign key tables are complex objects in the model, and when creating the Create View I only get the simple properties as editor fields. How do I go about designing the View or Views so that the complex objects can be filled in as well? I picture a View in my mind where the simple properties are simple fields, and then some sort of control where you can click "add work experience", and as many as needed would be added. But how would I do that and still utilize the model binding? In fact, I don't know how to go about it at all. (BTW, Program and Language stand for things like software experience in general, and natural language competence, not programming languages, in case you're wondering about the relationships there). Any ideas greatly appreciated! Here's the Create View created by the add View command by default: @{ ViewBag.Title = "Create"; } <h2>Create</h2> <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> @using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset> <legend>Consultant</legend> <div class="editor-label"> @Html.LabelFor(model => model.FirstName) </div> <div class="editor-field"> @Html.EditorFor(model => model.FirstName) @Html.ValidationMessageFor(model => model.FirstName) </div> <div class="editor-label"> @Html.LabelFor(model => model.LastName) </div> <div class="editor-field"> @Html.EditorFor(model => model.LastName) @Html.ValidationMessageFor(model => model.LastName) </div> <div class="editor-label"> @Html.LabelFor(model => model.UserName) </div> <div class="editor-field"> @Html.EditorFor(model => model.UserName) @Html.ValidationMessageFor(model => model.UserName) </div> <div class="editor-label"> @Html.LabelFor(model => model.Description) </div> <div class="editor-field"> @Html.EditorFor(model => model.Description) @Html.ValidationMessageFor(model => model.Description) </div> <p> <input type="submit" value="Create" /> </p> </fieldset> } <div> @Html.ActionLink("Back to List", "Index") </div> And here's the EF database diagram:

Read the article

Why is there a Null Pointer Exception in this Java Code?

- by algorithmicCoder

This code takes in users and movies from two separate files and computes a user score for a movie. When i run the code I get the following error: Exception in thread "main" java.lang.NullPointerException at RecommenderSystem.makeRecommendation(RecommenderSystem.java:75) at RecommenderSystem.main(RecommenderSystem.java:24) I believe the null pointer exception is due to an error in this particular class but I can't spot it....any thoughts? import java.io.*; import java.lang.Math; public class RecommenderSystem { private Movie[] m_movies; private User[] m_users; /** Parse the movies and users files, and then run queries against them. */ public static void main(String[] argv) throws FileNotFoundException, ParseError, RecommendationError { FileReader movies_fr = new FileReader("C:\\workspace\\Recommender\\src\\IMDBTop10.txt"); FileReader users_fr = new FileReader("C:\\workspace\\Recommender\\src\\IMDBTop10-users.txt"); MovieParser mp = new MovieParser(movies_fr); UserParser up = new UserParser(users_fr); Movie[] movies = mp.getMovies(); User[] users = up.getUsers(); RecommenderSystem rs = new RecommenderSystem(movies, users); System.out.println("Alice would rate \"The Shawshank Redemption\" with at least a " + rs.makeRecommendation("The Shawshank Redemption", "asmith")); System.out.println("Carol would rate \"The Dark Knight\" with at least a " + rs.makeRecommendation("The Dark Knight", "cd0")); } /** Instantiate a recommender system. * * @param movies An array of Movie that will be copied into m_movies. * @param users An array of User that will be copied into m_users. */ public RecommenderSystem(Movie[] movies, User[] users) throws RecommendationError { m_movies = movies; m_users = users; } /** Suggest what the user with "username" would rate "movieTitle". * * @param movieTitle The movie for which a recommendation is made. * @param username The user for whom the recommendation is made. */ public double makeRecommendation(String movieTitle, String username) throws RecommendationError { int userNumber; int movieNumber; int j=0; double weightAvNum =0; double weightAvDen=0; for (userNumber = 0; userNumber < m_users.length; ++userNumber) { if (m_users[userNumber].getUsername().equals(username)) { break; } } for (movieNumber = 0; movieNumber < m_movies.length; ++movieNumber) { if (m_movies[movieNumber].getTitle().equals(movieTitle)) { break; } } // Use the weighted average algorithm here (don't forget to check for // errors). while(j<m_users.length){ if(j!=userNumber){ weightAvNum = weightAvNum + (m_users[j].getRating(movieNumber)- m_users[j].getAverageRating())*(m_users[userNumber].similarityTo(m_users[j])); weightAvDen = weightAvDen + (m_users[userNumber].similarityTo(m_users[j])); } j++; } return (m_users[userNumber].getAverageRating()+ (weightAvNum/weightAvDen)); } } class RecommendationError extends Exception { /** An error for when something goes wrong in the recommendation process. * * @param s A string describing the error. */ public RecommendationError(String s) { super(s); } }

Read the article

Is this a SEO SAFE anchor link

- by Mayhem

so... Is this a safe way to use internal links on your site.. By doing this i have the index page generating the usual php content section and handing it to the div element. THE MAIN QUESTION: Will google still index the pages using this method? Common sense tells me it does.. But just double checking and leaving this here as a base example as well if it is. As in. EXAMPLE ONLY PEOPLE The Server Side if (isset($_REQUEST['page'])) {$pageID=$_REQUEST['page'];} else {$pageID="home";} if (isset($_REQUEST['pageMode']) && $_REQUEST['pageMode']=="js") { require "content/".$pageID.".php"; exit; } // ELSE - REST OF WEBSITE WILL BE GENERATED USING THE page VARIABLE The Links <a class='btnMenu' href='?page=home'>Home Page</a> <a class='btnMenu' href='?page=about'>About</a> <a class='btnMenu' href='?page=Services'>Services</a> <a class='btnMenu' href='?page=contact'>Contact</a> The Javascript $(function() { $(".btnMenu").click(function(){return doNav(this);}); }); function doNav(objCaller) { var sPage = $(objCaller).attr("href").substring(6,255); $.get("index.php", { page: sPage, pageMode: 'js'}, function(data) { ("#siteContent").html(data).scrollTop(0); }); return false; } Forgive me if there are any errors, as just copied and pasted from my script then removed a bunch of junk to simplify it as still prototyping/white boarding the project its in. So yes it does look a little nasty at the moment. REASONS WHY: The main reason is bandwidth and speed, This will allow other scripts to run and control the site/application a little better and yes it will need to be locked down with some coding. -- FURTHER EXAMPLE-- INSERT PHP AT TOP <?php // PHP CODE HERE ?> <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="scripts.js"></script> </head> <body> <div class='siteBody'> <div class='siteHeader'> <?php foreach ($pageList as $key => $value) { if ($pageID == $key) {$btnClass="btnMenuSel";} else {$btnClass="btnMenu";} echo "<a class='$btnClass' href='?page=".$key."'>".$pageList[$key]."</a>"; } ?> </div><div id="siteContent" style='margin-top:10px;'> <?php require "content/".$pageID.".php"; ?> </div><div class='siteFooter'> </div> </div> </body> </html>

Read the article

PHP mysql multi-table search returning different table and field data row after row

- by Kinyanjui Kamau

Hi Guys, I am building a social networking site that is dedicated to nightclubs and night events. Among other tables, I have a users table, events table and establishments table. I am really intrigued with how Facebook in particular is able to query and return matches of not just users but also pages, ads etc row after row. Im sure most who are reading this have tried the facebook search My question is in my case, should I: Perform 3 separate LIKE %search% on each of the tables on search.php. Draw up 3 separate tables to show the results of what matches in the relevant queries which are collapsed when empty(on the same search.php) ie In search.php //query users table $query_user = "SELECT user_first_name, user_last_name, username, picture_thumb_url, avatar FROM users JOIN picture ON users.user_id = picture.user_id AND picture.avatar=1 ORDER BY users.user_id"; $result_users = mysql_query($query_user, $connections) or die(mysql_error()); $row_result_users = mysql_fetch_assoc($wid_updates); //query events table $query_event = "SELECT event_thumb_url, event_name, event_venue, event_date FROM event WHERE event_name LIKE '%".$search_value."%'"; $event = mysql_query($query_event, $connections) or die(mysql_error()); $row_event = mysql_fetch_assoc($event); $totalRows_event = mysql_num_rows($event); //query establishments table $query_establishment = "SELECT establishment_thumb_url, establishment_name, location_id, establishment_pricing FROM establishment WHERE establishment_name LIKE '%".$search_value."%'"; $establishment = mysql_query($query_establishment, $connections) or die(mysql_error()); $row_establishment = mysql_fetch_assoc($establishment); $totalRows_establishment = mysql_num_rows($establishment); My html: <table max-width="500" name="users" border="0"> <tr> <td width="50" height="50"></td> <td width="150"></td> <td width="150"></td> <td width="150"></td> </tr> </table> <table width="500" name="events" border="0"> <tr> <td width="50" height="50"><a href="#profile.php"><img src="Images/<?php echo $row_event['event_thumb_url']; ?>" border="0" height="50" width="50"/></a></td> <td width="150"><?php echo $row_event['event_name']; ?></td> <td width="150"><?php echo $row_event['event_venue']; ?></td> <td width="150"><?php echo $row_event['event_date']; ?></td> </tr> </table> <table width="500" name="establishments" border="0"> <tr> <td width="50" height="50"><a href="#profile.php"><img src="Establishment_Images/<?php echo $row_establishment['establishment_thumb_url']; ?>" border="0" height="50" width="50"/></a></td> <td width="150"><?php echo $row_establishment['establishment_name']; ?></td> <td width="150"><?php echo $row_establishment['location_id']; ?></td> <td width="150"><?php echo $row_establishment['establishment_pricing']; ?></td> </tr> </table> I haven't populated the PHP echo's for the user table. This is just to give you an idea of what I am trying to do. Any assistance?

Read the article

How to Load In Content with jQuery?

- by ClarkSKent

Hello, I am trying to add ajax functionality to my pagination so the content loads in the same page instead of the user having to navigate to another page when clicking the page links. I should mention that I am using this php pagination class. Being new to jquery, I am unsure of how to properly do this with the pagination class. This is what the main page looks like: <?php $categoryId=$_GET['category']; echo $categoryId; ?> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript" src="jquery_page.js"></script> <?php //Include the PS_Pagination class include('ps_pagination.php'); //Connect to mysql db $conn = mysql_connect('localhost', 'root', 'root'); mysql_select_db('ajax_demo',$conn); $sql = "select * from explore where category='$categoryId'"; //Create a PS_Pagination object $pager = new PS_Pagination($conn, $sql, 3, 11, 'param1=value1&param2=value2'); //The paginate() function returns a mysql //result set for the current page $rs = $pager->paginate(); //Loop through the result set echo "<table width='800px'>"; while($row = mysql_fetch_assoc($rs)) { echo "<tr>"; echo"<td>"; echo $row['id']; echo"</td>"; echo"<td>"; echo $row['site_description']; echo"</td>"; echo"<td>"; echo $row['site_price']; echo"</td>"; echo "</tr>"; } echo "</table>"; echo "<ul id='pagination'>"; echo "<li>"; //Display the navigation echo $pager->renderFullNav(); echo "</li>"; echo "</ul>"; ?> <div id="loading" ></div> <div id="content" ></div> <a href="#" class="category" id="marketing">Marketing</a> <a href="#" class="category" id="automotive">Automotive</a> <a href="#" class="category" id="sports">Sports</a> Any help on this would be great. Thanks.

Read the article

Why is my emit not getting called?

- by cRaZiRiCaN

The client and server connect just fine. For some reason the emit on my client is not firing correctly. I am trying to get the testEmit and testEmit2 working. This is my server: express = require 'express' mongo = require 'mongodb' app = express() server = (require 'http').createServer(app) io = (require 'socket.io').listen(server) server.listen(8080) app.use(express.static(__dirname + '/public')) # db = new mongo.Db("documentsdb", new mongo.Server("localhost", 27017, auto_reconnect: true), {safe:true}) io.sockets.on 'connection', (socket) -> console.log 'Socket.io is connected!' #This returns an array of documents sorted via date by decreasing order. (Most recent documents first.) socket.on 'loadRecentDocuments', -> console.log 'Loading most recent documents.' db.collection 'documents', (err, collection) -> collection.find().sort(dateAdded: -1).toArray (err, documents) -> #This emit is recieved at index.html where a javascript function sendDocuments manages the documents. socket.emit 'sendDocuments', documents return #The index.html provides the code data from the search box via a javascript. io.sockets.on 'findDocuments', (code) -> #Returns an array of documents with the corresponding class code. documentCodeToSearch = code console.log 'Retreaving documents with code: ' + documentCodeToSearch db.collection 'documents', (err, collection) -> collection.find(code:documentCodeToSearch).toArray (err, documents) -> socket.emit 'sendDocuments', documents return #Uploads a document to the server. documentData is sent via javascript from submit.html io.sockets.on 'addDocument', (documentData) -> console.log 'Adding document: ' + documentData db.collection 'documents', (err, collection) -> collection.insert documentData, safe: true return #Test socket.io io.sockets.on 'testEmit', -> console.log('Emit recieved.') socket.emit 'testEmit2', 'caca' return app.listen 1337 console.log "Listening on port 1337..." This is my client: <!doctype HTML> <html> <head> <title>ProjectShare</title> <script src="http://localhost:8080/socket.io/socket.io.js"></script> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script> //Make sure DOM is ready before mucking around. $(document).ready(function() { console.log('jQuery entered!'); var socket = io.connect('http://localhost:8080'); socket.emit('testEmit'); socket.on('testEmit2', function(data) { console.log('Emit recieved at browser.'); console.log(data); }); console.log('jQuery exit.'); }); </script> </head> <body> <ol> <li><a href="index.html">ProjectShare</a></li> <li><a href="guidelines.html">Guidelines</a></li> <li><a href="upload.html">Upload</a></li> <li> <form> <input type = "search" placeholder = "enter class code"/> <input type = "submit" value = "Go"/> </form> </li> </ol> <ol id = "documentList"> </ol> </body> </html>

Read the article

complex css image centering help?

- by Tenshiko

My problem is a bit more complex than the title says. Sorry, I don't know how to be more specific... I'm working on a website and I came across a part where I should display some thumbnails. The thing is, the thumbnails are not matching in dimensions. (I know, it sounds ridiculous, since this is thumbnails are for, right?) No, there is simply NO WAY to create them in the same dimensions!! I've managed to create a HTML+CSS structure to fix this problem, and the images are not stretching to fit their containers if they are smaller while keeping their aspect ratio. The only issue remaining, is to center the images. Since setting margin to "0 auto" or "auto 0" are not helping, I've tried setting up multiple containers and setting the margins to position the images. This is also not working: if I put a 120x120 picture in a 120x80 inner container, and I set the container's top and left margin to -50%, the margins become -60px both. Can this be fixed? Or is there yet another way to center images? I'm open to any suggestions! HTML: <div id="roll"> <div class="imgfix"> <div class="outer"> <div class="inner"> @if (ImageDimensionHelper.WhereToAlignImg(item.Width, item.Height, 120, 82) == ImgAlign.Width)  { <img class="width" src="@Url.Content(item.URL)" alt="@item.Name"/> } else { <img class="height" src="@Url.Content(item.URL)" alt="@item.Name"/> } </div> </div> </div> </div> CSS: .imgfix{ overflow:hidden; } .imgfix .outer { width:100%; height:100%;} .imgfix .inner { width:100%; height:100%; margin-top:-50%; margin-left:-50%; } /*This div (.inner) gets -60px for both margins every time, regardless of the size of itself, or the image inside it*/ #roll .imgfix { width:120px; height:82px; border: 1px #5b91ba solid; } #roll .imgfix .outer { margin-top:41px; margin-left:60px; } /*since I know specificly what these margins should be, I set them explicitly, because 50% got the wrong size.*/ #roll .imgfix img.width { width:120px; height:auto; margin: auto 0; } #roll .imgfix img.height { height:82px; width:auto; margin: 0 auto; }

Read the article

Safely defining variables for public callback functions in javascript

- by djreed

I am working with the YouTube iFrame API to embed a number of videos on a page. Documentation here: https://developers.google.com/youtube/iframe_api_reference#Requirements In summary, you load the API asynchronously using the following snippet: var tag = document.createElement('script'); tag.src = "http://www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); Once loaded, the API fires the predefined callback function onYouTubePlayerAPIReady. For additional context: I am defining a library file for this in Google Closure. I am providing a namespace: goog.provide('yt.video'); I then use goog.exportSymbol so that the API can find the function. That all works fine. My challenge is that I would like to pass 2 variables to the callback function. Is there any way to do this without defining these 2 variables in the context of the window object? goog.provide('yt.video'); goog.require('goog.dom'); yt.video = function(videos, locales) { this.videos = videos; this.captionLocales = locales; this.init(); }; yt.video.prototype.init = function() { var tag = document.createElement('script'); tag.src = "http://www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); }; /* * Callback function fired when YT API is ready * This is exported using goog.exportSymbol in another file and * is being fired by the API properly. */ yt.video.prototype.onPlayerReady = function(videos, locales) { window.console.log('this :' + this); //logs window window.console.log('this.videos : ' + this.videos); //logs undefined /* * Video settings from Django variable */ for(i=0; i<this.videos.length; i++) { var playerEvents = {}; var embedVars = {}; var el = this.videos[i].el; var playerVid = this.videos[i].vid; var playerWidth = this.videos[i].width; var playerHeight = this.videos[i].height; var captionLocales = this.videos[i].locales; if(this.videos[i].playerVars) var embedVars = this.videos[i].playerVars; } if(this.videos[i].events) { var playerEvents = this.videos[i].events; } /* * Show captions by default */ if(goog.array.indexOf(captionLocales, 'es') >= 0) { embedVars.cc_load_policy = 1; }; new YT.Player(el, { height: playerHeight, width: playerWidth, videoId: playerVid, events: playerEvents, playerVars: embedVars }); }; }; To intialize this, I am currently using the following within a self-executing anonymous function: var videos = [ {"vid": "video_id", "el": "player-1", "width": 640, "height": 390, "locales": ["es", "fr"], "events": {"onStateChange": stateChanged}}, {"vid": "video_id", "el": "player-2", "locales": ["es", "fr"], "width": 640, "height": 390} ]; var locales = ['es']; var videoTemplate = new yt.video(videos, locales);

Read the article

Attaching functions to elements in a loop

- by user435377

I have the following HTML and JavaScript it works for the first set of elements when I have a '1' in the selector but when I replace the '1' with an 'i' it doesn't attach itself to any of the elements. Any ideas as to why this might not be working? (the script is meant to add the first 3 columns of each row and display it in the fourth) <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ for (i = 2; i <= 14; i++) { $("#Q19_LND_"+i).keyup(function(){ $("#autoSumRow_"+i).val(Number($("#Q19_LND_"+i).val()) + Number($("#Q19_CE_"+i).val()) + Number($("#Q19_SOLSD_"+i).val())); }); $("#Q19_CE_"+i).keyup(function(){ $("#autoSumRow_"+i).val(Number($("#Q19_LND_"+i).val()) + Number($("#Q19_CE_"+i).val()) + Number($("#Q19_SOLSD_"+i).val())); }); $("#Q19_SOLSD_"+i).keyup(function(){ $("#autoSumRow_"+i).val(Number($("#Q19_LND_"+i).val()) + Number($("#Q19_CE_"+i).val()) + Number($("#Q19_SOLSD_"+i).val())); }); } }); </script> </head> <body> <table> <tr> <td><font face="arial" size="-1">Lap Roux-N-Y</font> </td> <td align="center"><input tabindex="1" type="text" name="Q19_LND_1" size="3" value="" id="Q19_LND_1"></td> <td align="center"><input tabindex="2" type="text" name="Q19_CE_1" size="3" value="" id="Q19_CE_1"></td> <td align="center"><input tabindex="3" type="text" name="Q19_SOLSD_1" size="3" value="" id="Q19_SOLSD_1"></td> <td align="center"><input tabindex="4" disabled type="text" name="autoSumRow_1" size="3" value="" id="autoSumRow_1"></td> </tr> <tr> <td nowrap width="1" bgcolor="#006699" colspan="9"><img src="/images/wi/nothing.gif" width="1" height="1"></td> </tr> <tr> <td><font face="arial" size="-1">Lap Esophagectomy</font> </td> <td align="center"><input tabindex="5" type="text" name="Q19_LND_2" size="3" value="" id="Q19_LND_2"></td> <td align="center"><input tabindex="6" type="text" name="Q19_CE_2" size="3" value="" id="Q19_CE_2"></td> <td align="center"><input tabindex="7" type="text" name="Q19_SOLSD_2" size="3" value="" id="Q19_SOLSD_2"></td> <td align="center"><input tabindex="8" disabled type="text" name="autoSumRow_2" size="3" value="" id="autoSumRow_2"></td> </tr> <tr> </table> </body> </html>

Read the article

PHP Form Automatic Submission

- by sex stevens

I need to create a PHP script that runs around the clock and re-submits a form without actually loading the form, just sending the same request over and over. I used a program called WireShark to record my packets and play them back using a packet player. This took two hours of troubleshooting and configuring. When everything finally worked, it turns out the end result was a dead end. The packets being sent did not affect anything. This code is what the script needs to resubmit: <a href="#" onclick="_('_tf11').value=15; return false;">(15)</a> <input type="image" id="btn_train" class="dynamic_img" value="ok" name="s1" src="assets/x.gif" alt="Training"> Okay, I know that here on stackoverflow you can't just ask people to do your work. The problem is that I don't even know where to start here. So please at least give me a direction, or a function name or a lead on how to be able to submit this form. Then I'll write a program and you guys can help me finish it if I will need help. here is what I made: The program: <?php //create array of data to be posted $post_data['tf[11]'] = '10000'; $post_data['s1'] = 'ok'; //traverse array and prepare data for posting (key1=value1) foreach ( $post_data as $key => $value) { $post_items[] = $key . '=' . $value; } //create the final string to be posted using implode() $post_string = implode ('&', $post_items); //create cURL connection $curl_connection = curl_init('http://crusadertrav.com/build.php?id=33'); //set options curl_setopt($curl_connection, CURLOPT_CONNECTTIMEOUT, 30); curl_setopt($curl_connection, CURLOPT_USERAGENT, "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)"); curl_setopt($curl_connection, CURLOPT_RETURNTRANSFER, true); curl_setopt($curl_connection, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($curl_connection, CURLOPT_FOLLOWLOCATION, 1); //set data to be posted curl_setopt($curl_connection, CURLOPT_POSTFIELDS, $post_string); //perform our request $result = curl_exec($curl_connection); //show information regarding the request print_r(curl_getinfo($curl_connection)); echo curl_errno($curl_connection) . '-' . curl_error($curl_connection); //close the connection curl_close($curl_connection); ?> The forms: <input type="text" class="text" id="_tf11" name="tf[11]" value="0" maxlength="4"> <input type="image" id="btn_train" class="dynamic_img" value="ok" name="s1" src="assets/x.gif" alt="Training"> The result: Array ( [url] => http://crusadertrav.com/index.php [content_type] => text/html; charset=UTF-8 [http_code] => 200 [header_size] => 895 [request_size] => 350 [filetime] => -1 [ssl_verify_result] => 0 [redirect_count] => 1 [total_time] => 2.781 [namelookup_time] => 0 [connect_time] => 0.532 [pretransfer_time] => 0.532 [size_upload] => 0 [size_download] => 10655 [speed_download] => 3831 [speed_upload] => 0 [download_content_length] => 0 [upload_content_length] => 0 [starttransfer_time] => 0.954 [redirect_time] => 0.906 [certinfo] => Array ( ) [primary_ip] => 5.154.88.71 [primary_port] => 80 [local_ip] => 192.168.11.52 [local_port] => 3222 [redirect_url] => ) 0-

Read the article

Why isn't the inline element inheriting height from its children?

- by jbarz

I'm trying to make a rather complicated grid of images and information (almost like Pinterest). Specifically, I'm trying to inline position one set of <ul>s right after another. I have it working but one aspect is causing issues so I'm trying to ask about this small piece to avoid the complication of the whole problem. In order to horizontally align the images and their information we are using inline <li>s with other inline-block level elements inside of them. Everything works correctly for the most part except that the <li>s have almost no height. HTML and CSS is in JSFiddle here if you want to mess with it in addition to below: HTML: <div> <ul class="Container"> <li> <span class="Item"> <a href="#"><img src="http://jsfiddle.net/img/logo.png"/></a> <span class="Info"> <a href="#">Title One</a> <span class="Details">One Point One</span> </span> </span> </li> <li> <span class="Item"> <a href="#"><img src="http://jsfiddle.net/img/logo.png"/></a> <span class="Info"> <a href="#">Title Two</a> <span class="Details">Two Point One</span> </span> </span> </li> </ul> CSS: .Container { list-style-type:none; } .Container li { background-color:grey; display:inline; text-align:center; } .Container li .Item { border:solid 2px #ccc; display:inline-block; min-height:50px; vertical-align:top; width:170px; } .Container li .Item .Info { display:inline-block; } .Container li .Item .Info a { display:inline-block; width:160px; } If you check out the result in the jsfiddle link you can see that the grey background only encompasses a small strip of the whole <li>. I know that changing the <li> to display:inline-block solves this problem but that isn't feasible for other reasons. So first of all, I'm just looking to see if anyone understands why the inline <li> element doesn't have any height. I can't find anything in the spec that explains this. I know I can't add height to an inline element but any explanation as to why this is happening that might enable me to fix would be great. Secondly, if you inspect the elements using IE's Developer Mode you will see that although the background color is in the correct location, the actual location of the <li>'s bounding box is at the bottom of the container according to hovering over the element. I could deal with this problem if it was at the top in every browser but it apparently varies. NOTE: I don't really care about older browsers in this case but I don't use HTML5 or JavaScript positioning. Thanks.

Read the article

if statement to check available elements

- by nicmare

Hi there, i allways found an answer here just be reading the threads but now its time for my very first thread because i was unable to find related questions: this is my target code: <li> <span class="panel"> <a href="…" class="image" rel="group"> <img title="…" src="…" alt="…" width="128" height="96" /> </a> <span class="sizes"> <span class="button"> <a href="#" class="size1" rel="…" title="1">9x13</a> </span> <span class="button"> <a href="#" class="size2" rel="…" title="3">10x15</a> </span> <span class="button"> <a href="#" class="size3" rel="…" title="6">20x30</a> </span> </span> </span> <a href="…" class="image" rel="group"> <span class="added"></span> <img title="…" src="…" alt="…" width="128" height="96" class="thumbnail" /> </a> </li> i add two "span" elements through jquery: $('.sizes a').click( function (e) { e.preventDefault(); $(this).after("<span class='checked'></span><span class='remove'></span>"); } ); the maximum amount of those s are 3 times in a wrapped div. so i am trying to do is the following: $(".remove").live('click', function(){ $(this).hide(); $(this).prev().hide(); // hide checked span if ($(this).parent().parent().children().children().each().hasClass('checked')) { $(this).parent().parent().parent().next().children(".added").hide(); } } ); of course my if statement is crap. i try it in my own words: if there are more than one span(class=remove) in span(class=panel) then nothing should happen. but if there is just one span(class=remove) left in span(class=panel) THEN should be hidden how do i achieve this? there is an online demonstration of this: http://bit.ly/972be4 as you can see, every time when i hit a button below an image, the image gets marked by a label. and i want to hide this label (class=added) when no button is selected Thank you very much! best wishes from germany

Read the article

Replace html element with data in javascript

- by Ultimate

I trying to auto increment the serial number when row increases and automatically readjust the numbering order when a row gets deleted in javascript. For that I am using the following clone method for doing my task. Rest of the thing is working correct except its not increasing the srno because its creating the clone of it. Following is my code for this: function addCloneRow(obj) { if(obj) { var tBody = obj.parentNode.parentNode.parentNode; var trTable = tBody.getElementsByTagName("tr")[1]; var trClone = trTable.cloneNode(true); if(trClone) { var txt = trClone.getElementsByTagName("input"); var srno = trClone.getElementsByTagName("span"); var dd = trClone.getElementsByTagName("select"); text = tBody.getElementsByTagName("tr").length; alert(text) //here i am getting the srno in increasing order //I tried something like following but not working //var ele = srno.replace(document.createElement("h1"), srno); //alert(ele); for(var i=0; i<dd.length; i++) { dd[i].options[0].selected=true; var nm = dd[i].name; var nNm = nm.substring((nm.indexOf("_")+1),nm.indexOf("[")); dd[i].name = nNm+"[]"; } for(var j=0; j<txt.length; j++) { var nm = txt[j].name; var nNm = nm.substring((nm.indexOf("_")+1),nm.indexOf("[")); txt[j].name = nNm+"[]"; if(txt[j].type == "hidden"){ txt[j].value = "0"; }else if(txt[j].type == "text") { txt[j].value = ""; }else if(txt[j].type == "checkbox") { txt[j].checked = false; } } for(var j=0; j<txt.length; j++) { var nm = txt[j].name; var nNm = nm.substring((nm.indexOf("_")+1),nm.indexOf("[")); txt[j].name = nNm+"[]"; if(txt[j].type == "hidden"){ txt[j].value = "0"; }else if(txt[j].type == "text") { txt[j].value = ""; }else if(txt[j].type == "checkbox") { txt[j].checked = false; } } tBody.insertBefore(trClone,tBody.childNodes[1]); } } } Following is my html : <table id="step_details" style="display:none;"> <tr> <th width="5">#</th> <th width="45%">Step details</th> <th>Expected Results</th> <th width="25">Execution</th> <th><img src="gui/themes/default/images/ico_add.gif" onclick="addCloneRow(this);"/></th> </tr> <tr> <td><span>1</span></td> <td><textArea name="step_details[]"></textArea></td> <td><textArea name="expected_results[]"></textArea></td> <td><select onchange="content_modified = true" name="exec_type[]"> <option selected="selected" value="1" label="Manual">Manual</option> <option value="2" label="Automated">Automated</option> </select> </td> <td><img src="gui/themes/default/images/ico_del.gif" onclick="removeCloneRow(this);"/></td> </tr> </table> I want to change the srno. of span element dynamically after increment and decrement on it. Need help thanks

Read the article

Radio Button Validation u

- by Sirojan Gnanaretnam

I am trying validate the radio button using Javascript . But I couldn't get it. Can any one please help me to fix this Issue. I Have attached My Code Below. Thanks. <form action="submitAd.php" method="POST" enctype="multipart/form-data" name="packages" onsubmit="return checkForm()"> <div id="plans_pay"> <input type="radio" name="group1" id="r1" value="Office" onchange="click_Pay_Office()" style="float:left;margin-top:20px;font-size:72px;"> <label style="float:left; margin-top:20px;" for="pay_office">At Our Office</label> <img style="float:left;margin-bottom:10px;" src="images/Pay-at-office.png" /> </div> <div id="plans_pay"> <input style="float:left;margin-top:20px;font-size:72px;" type="radio" name="group1" id="r2" value="HNB" onchange="click_Pay_Hnb()"> <label style="float:left; margin-top:20px;" for="pay_hnb">At Any HNB Branch</label> <img style="float:left;margin-bottom:10px;" src="images/HNB.png" /> </div> </form> Javascript function checkForm(){ if( document.packages.pso.checked == false && document.packages.pso1.checked == false && document.packages.ph.checked == false && document.packages.ph2.checked == false && document.packages.ph3.checked == false && document.packages.pl.checked == false && document.packages.p3.checked == false && document.packages.p4.checked == false && document.packages.p5.checked == false && document.packages.p6.checked == false ){ alert('Please Select At Least One Package'); return false; } if( document.packages.pso.checked == false && document.packages.pso1.checked == false && document.packages.ph.checked == false && document.packages.ph.checked == false && document.packages.ph2.checked == false && document.packages.ph3.checked == false && document.packages.pl.checked == false && document.packages.p3.checked == false && document.packages.p4.checked == false && document.packages.p5.checked == false && document.packages.p6.checked == false){ alert('Please Select At Least One with the Advertise online option in premium package'); return false; } if(document.getElementById('words').value==''){ alert("Please Enter the Texts"); return false; } if(document.getElementById('r1').checked==false && document.getElementById('r2').checked==false){ alert("Please Select a Payment Method"); return false; } }

Read the article

I am making a maze type of game using javascript and HTML and need some questions answered [on hold]

- by Timothy Bilodeau

First off, i am a noob to JavaScript but am willing to learn. :) I found a simple JavaScript moment engine created by another member on this site. Using that i made it so my character can walk around within a rectangle/square shaped room. I want to make it so the character can walk through a "doorway" within a wall to the next room. Either that or make it so if the character moves over a certain image within the room it will take the player to another webpage in which the character "spawns" into the room and so on and so fourth. Here is a link to what i have made so far as to get an idea. http://bit.ly/1fSMesA Any help would be much appreciated. Here is the javascript code for the character movement and boundaries. <script type='text/javascript'> // movement vars var xpos = 100; var ypos = 100; var xspeed = 1; var yspeed = 0; var maxSpeed = 5; // boundary var minx = 37; var miny = 41; var maxx = 187; // 10 pixels for character's width var maxy = 178; // 10 pixels for character's width // controller vars var upPressed = 0; var downPressed = 0; var leftPressed = 0; var rightPressed = 0; function slowDownX() { if (xspeed > 0) xspeed = xspeed - 1; if (xspeed < 0) xspeed = xspeed + 1; } function slowDownY() { if (yspeed > 0) yspeed = yspeed - 1; if (yspeed < 0) yspeed = yspeed + 1; } function gameLoop() { // change position based on speed xpos = Math.min(Math.max(xpos + xspeed,minx),maxx); ypos = Math.min(Math.max(ypos + yspeed,miny),maxy); // or, without boundaries: // xpos = xpos + xspeed; // ypos = ypos + yspeed; // change actual position document.getElementById('character').style.left = xpos; document.getElementById('character').style.top = ypos; // change speed based on keyboard events if (upPressed == 1) yspeed = Math.max(yspeed - 1,-1*maxSpeed); if (downPressed == 1) yspeed = Math.min(yspeed + 1,1*maxSpeed) if (rightPressed == 1) xspeed = Math.min(xspeed + 1,1*maxSpeed); if (leftPressed == 1) xspeed = Math.max(xspeed - 1,-1*maxSpeed); // deceleration if (upPressed == 0 && downPressed == 0) slowDownY(); if (leftPressed == 0 && rightPressed == 0) slowDownX(); // loop setTimeout("gameLoop()",10); } function keyDown(e) { var code = e.keyCode ? e.keyCode : e.which; if (code == 38) upPressed = 1; if (code == 40) downPressed = 1; if (code == 37) leftPressed = 1; if (code == 39) rightPressed = 1; } function keyUp(e) { var code = e.keyCode ? e.keyCode : e.which; if (code == 38) upPressed = 0; if (code == 40) downPressed = 0; if (code == 37) leftPressed = 0; if (code == 39) rightPressed = 0; } </script> here is the HTML code to follow  <img src="room1.png" />  <img id='character' src='../texture packs/characters/snazgel.png' style='position:absolute;left:100;top:100;height:40;width:26;'/>

Read the article

Shrinking image by 57% and centering inside css structure

- by Johua

Hy, i'm really stuck. I'll go step by step and hope to make it short. This is the html structure: <li class="FAVwithimage"> <a href=""> <img src="pics/Joshua.png"> <span class="name">Joshua</span> <span class="comment">Developer</span> <span class="arrow"></span> </a> </li> Before i paste the css classes, some info about the exact goal to accomplish: Resize the picture (img) by 57%. If it cannot be done with css, then jquery/javascript solution. For example: Original pic is 240x240px, i need to resize it by 57%. That means that a pic of 400x400 would be bigger after resizing. After resizing, the picture needs to be centered vertical&horizontal inside a: 68x90 boundaries. So you have an LI element, wich has an A element, and inside A we have IMG, IMG is resized by 57% and centered where the maximum width can be of course 68px and maximum height 90px. No for that to work i was adding a SPAN element arround the IMG. This is what i was thinking: <li class="FAVwithimage"> <a href=""> <span class="picHolder"><img src="pics/Joshua.png"></span> <span class="name">Joshua</span> <span class="comment">Developer</span> <span class="arrow"></span> </a> </li> Then i would give the span element: display:block and w=68px, h=90px. But unforunatelly that didn't work. I know it's a long post but i'v did my best to describe it very simple. Beneath are the css classes and a picture to see what i need. li.FAVwithimage { height: 90px!important; } li.FAVwithimage a, li.FAVwithimage:hover a { height: 81px!important; } That's it what's relevant. I have not included the classes for: name,comment,arrow And now the classes that are incomplete and refer to IMG. li.FAVwithimage a span.picHolder{ /*put the picHolder to the beginning of the LI element*/ position: absolute; left: 0; top: 0; width: 68px; height: 90px; diplay:block; border:1px solid #F00; } Border is used just temporary to show the actuall picHolder. It is now on the beginning of LI, width and height is set. li.FAVwithimage span.picHolder img { max-width:68px!important; max-height:90px!important; } This is the class wich should shrink the pic by 57% and center inside picHolder Here I have a drawing describing what i need:

Read the article

How do I remove an element class after success?

- by sharataka

When the user clicks on a button in the form associated with it's image, I'd like the image to disappear on success. I'm having trouble implementing this. Any advice? <script type="text/javascript"> $(document).ready(function() { $(".removebutton").submit(function(event){ event.preventDefault(); $.ajax({ type:"POST", url:"/munch_video/", data: { 'video_id': $('.video_id', this).val(), // from form 'playlist': $('.playlist').val(), // from form 'add_remove': $('.add_remove').val(), // from form }, success: function(message){ alert(message); $('.span8').removeClass('.video_id', this); } }); return false; }); }); </script> <div class = "span8" style = "width: 900px;">  <div class='wrapper huluDotCom'>  <div class="image" style="position: relative; left: 0; top: 0;"> <a href = "/partners/Business/huluDotCom"> <img src = "/huluDotCom.png"> </a>  <div class='munchbutton'> <form method='post' action = '/munch_video/ ' class = 'removebutton'><div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='dKrS8NzqPWFLM6u8wJrAeid4nGw1avGK' /></div> <input type="hidden" value="Channel" class = "playlist"/> <input type="hidden" value="huluDotCom" class = "video_id"/> <input type="hidden" value="remove_video" class = "add_remove"/> <input type='submit' class="btn btn-danger" value='Remove from plate'/> </form> </div>  </div>  </div>   <div class='wrapper TheEllenShow'>  <div class="image" style="position: relative; left: 0; top: 0;"> <a href = "/partners/Business/TheEllenShow"> <img src = "/TheEllenShow.png"> </a>  <div class='munchbutton'> <form method='post' action = '/munch_video/ ' class = 'removebutton'><div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='dKrS8NzqPWFLM6u8wJrAeid4nGw1avGK' /></div> <input type="hidden" value="Channel" class = "playlist"/> <input type="hidden" value="TheEllenShow" class = "video_id"/> <input type="hidden" value="remove_video" class = "add_remove"/> <input type='submit' class="btn btn-danger" value='Remove from plate'/> </form> </div>  </div>  </div>  </div>

Read the article

How can I Display an extract from MySQL database entry?

- by ThatMacLad

I'm after creating a webpage that includes a blog section and it currently displays the whole post on the homepage. I'd like to set it so that it only displays a certain part of the entry i.e 50 words. I'd then like to be able to set it so that I have a read more button below the post that links to the post id. I currently use post.php?=# (# = whatever the post id is). Here is the homepage: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Blog Name</title> <link rel="stylesheet" href="css/style.css" type="text/css" /> <body> <div id="upper-bar"> <div id="bar-content"> <a href="#">Home</a> <a href="#">Archives</a> <a href="#">Contact</a> <a href="#">About</a> <a href="#"><img src="images/twitter.png" id="tweet"></a><a href="#"><img src="images/feed.png" id="feed"></a> </div> </div> <div id="clear"> </div> <div class="main"> <h1>Blog Name</h1> <div class="post-col"> <?php mysql_connect ('localhost', 'root', 'root') ; mysql_select_db ('tmlblog'); $sql = "SELECT * FROM php_blog ORDER BY timestamp DESC LIMIT 5"; $result = mysql_query($sql) or print ("Can't select entries from table php_blog.<br />" . $sql . "<br />" . mysql_error()); while($row = mysql_fetch_array($result)) { $date = date("l F d Y", $row['timestamp']); $title = stripslashes($row['title']); $entry = stripslashes($row['entry']); $id = $row['id']; ?> <div id='post-info'><?php echo "<p id='title'><strong><a href=\"post.php?id=". $id . "\">" . $title . "</a></strong></p>"; ?><br /></div> <div id="post"> <?php echo $entry; ?>  </p> </div> </p> </div> <?php } ?> </div> </div> </body> </html>

Read the article

strange data annotations issue in MVC 2

- by femi

Hello, I came across something strange when creating an edit form with MVC 2. i realised that my error messages come up on form sumission even when i have filled ut valid data! i am using a buddy class which i have configured correctly ( i know that cos i can see my custom errors). Here is the code from the viewmodel that generates this; <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<TG_Careers.Models.Applicant>" %> <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script> <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> <script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script> <%= Html.ValidationSummary() %> <% Html.EnableClientValidation(); %> <% using (Html.BeginForm()) {%> <div class="confirm-module"> <table cellpadding="4" cellspacing="2"> <tr> <td><%= Html.LabelFor(model => model.FirstName) %> </td> <td><%= Html.EditorFor(model => model.FirstName) %></td> </tr> <tr> <td colspan="2"><%= Html.ValidationMessageFor(model => model.FirstName) %></td> </tr> <tr> <td><%= Html.LabelFor(model => model.MiddleName) %></td> <td><%= Html.EditorFor(model => model.MiddleName) %></td> </tr> <tr> <td colspan="2"><%= Html.ValidationMessageFor(model => model.MiddleName) %></td> </tr> <tr> <td><%= Html.LabelFor(model => model.LastName) %></td> <td><%= Html.EditorFor(model => model.LastName) %></td> </tr> <tr> <td colspan="2"><%= Html.ValidationMessageFor(model => model.LastName) %></td> </tr> <tr> <td><%= Html.LabelFor(model => model.Gender) %></td> <td><%= Html.EditorFor(model => model.Gender) %></td> </tr> <tr> <td colspan="2"><%= Html.ValidationMessageFor(model => model.Gender) %></td> </tr> <tr> <td><%= Html.LabelFor(model => model.MaritalStatus) %></td> <td> <%= Html.EditorFor(model => model.MaritalStatus) %></td> </tr> <tr> <td colspan="2"><%= Html.ValidationMessageFor(model => model.MaritalStatus) %></td> </tr> <tr> <td><%= Html.LabelFor(model => model.DateOfBirth) %></td> <td><%= Html.EditorFor(model => model.DateOfBirth) %></td> </tr> <tr> <td colspan="2"><%= Html.ValidationMessageFor(model => model.DateOfBirth) %></td> </tr> <tr> <td><%= Html.LabelFor(model => model.Address) %></td> <td><%= Html.EditorFor(model => model.Address) %></td> </tr> <tr> <td colspan="2"><%= Html.ValidationMessageFor(model => model.Address) %></td> </tr> <tr> <td><%= Html.LabelFor(model => model.City) %></td> <td><%= Html.EditorFor(model => model.City) %></td> </tr> <tr> <td colspan="2"><%= Html.ValidationMessageFor(model => model.City) %></td> </tr> <tr> <td><%= Html.LabelFor(model => model.State) %></td> <td><%= Html.EditorFor(model => model.State) %></td> </tr> <tr> <td colspan="2"><%= Html.ValidationMessageFor(model => model.State) %></td> </tr> <tr> <td><%= Html.LabelFor(model => model.StateOfOriginID) %></td> <td><%= Html.DropDownList("StateOfOriginID", new SelectList(ViewData["States"] as IEnumerable, "StateID", "Name", Model.StateOfOriginID))%></td> </tr> <tr> <td colspan="2"><%= Html.ValidationMessageFor(model => model.StateOfOriginID) %></td> </tr> <tr> <td><%= Html.LabelFor(model => model.CompletedNYSC) %></td> <td><%= Html.EditorFor(model => model.CompletedNYSC) %></td> </tr> <tr> <td colspan="2"><%= Html.ValidationMessageFor(model => model.CompletedNYSC) %></td> </tr> <tr> <td><%= Html.LabelFor(model => model.YearsOfExperience) %></td> <td><%= Html.EditorFor(model => model.YearsOfExperience) %></td> </tr> <tr> <td colspan="2"><%= Html.ValidationMessageFor(model => model.YearsOfExperience) %></td> </tr> <tr> <td><%= Html.LabelFor(model => model.MobilePhone) %></td> <td><%= Html.EditorFor(model => model.MobilePhone) %></td> </tr> <tr> <td colspan="2"><%= Html.ValidationMessageFor(model => model.MobilePhone) %></td> </tr> <tr> <td><%= Html.LabelFor(model => model.DayPhone) %></td> <td> <%= Html.EditorFor(model => model.DayPhone) %></td> </tr> <tr> <td colspan="2"><%= Html.ValidationMessageFor(model => model.DayPhone) %></td> </tr> <tr> <td><%= Html.LabelFor(model => model.CVFileName) %></td> <td><%= Html.EditorFor(model => model.CVFileName) %></td> </tr> <tr> <td colspan="2"><%= Html.ValidationMessageFor(model => model.CVFileName) %></td> </tr> <tr> <td><%= Html.LabelFor(model => model.CurrentPosition) %></td> <td><%= Html.EditorFor(model => model.CurrentPosition) %></td> </tr> <tr> <td colspan="2"><%= Html.ValidationMessageFor(model => model.CurrentPosition) %></td> </tr> <tr> <td><%= Html.LabelFor(model => model.EmploymentCommenced) %></td> <td><%= Html.EditorFor(model => model.EmploymentCommenced) %></td> </tr> <tr> <td colspan="2"><%= Html.ValidationMessageFor(model => model.EmploymentCommenced) %></td> </tr> <tr> <td><%= Html.LabelFor(model => model.DateofTakingupCurrentPosition) %></td> <td><%= Html.EditorFor(model => model.DateofTakingupCurrentPosition) %></td> </tr> <tr> <td colspan="2"><%= Html.ValidationMessageFor(model => model.DateofTakingupCurrentPosition) %></td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td colspan="2"> </td> </tr> </table> <p> <input type="submit" value="Save Profile Details" /> </p> </div> <% } %> Any ideas on this one please? Thanks

Read the article

Scriptaculous Shaking Effect Problem

- by TheOnly92

The scriptaculous shaking effect somehow produce some bugs for Webkit browsers, including Chrome and Safari. When shaking, the element will shift to the top left of the screen covering everything. An example code is given as below, are there any ways of solving this? <html> <head> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js'></script> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js?load=effects'></script> </head> <body> <div style="z-index: 20000; position: fixed; display: block; bottom: 10px; right: 10px; background-attachment: scroll; background-color: white;" id="floating_text"> <p>This should be some floating text.</p> <p>Some more floating text.</p> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui ligula, tempus adipiscing posuere id, sollicitudin sed nulla. Sed neque diam, volutpat non interdum vel, pellentesque vitae lorem. Vivamus et leo risus. Fusce at nunc nulla, non ultricies elit. Aliquam erat volutpat. Aliquam pulvinar mi at purus laoreet eu varius nisl laoreet. Mauris lobortis sapien diam. Maecenas arcu est, ullamcorper fringilla placerat nec, semper ut arcu. Curabitur metus nisl, ornare nec posuere at, tincidunt tempor nisi. Ut ut est risus. Curabitur elit urna, sagittis sagittis cursus quis, accumsan eget nulla. Donec odio ante, rutrum at fermentum vel, tempus gravida odio. Quisque a ante a urna vehicula posuere ac ut orci. Integer luctus sem et justo condimentum consequat. Phasellus pharetra malesuada velit, et commodo arcu imperdiet vitae. Suspendisse vitae risus orci. Maecenas massa tortor, sodales ut luctus ac, lacinia vitae sapien. Vestibulum sit amet rutrum est. Nullam magna erat, semper a volutpat id, porta sed nisl.</p> <p>Praesent nec consectetur sapien. Integer mollis libero a odio pharetra vulputate. Donec mattis consequat arcu, vel ultricies orci imperdiet sit amet. Mauris sit amet tellus libero. Morbi ac venenatis ligula. Cras tellus neque, porttitor sit amet hendrerit nec, ornare quis tellus. Nam iaculis mi at mi bibendum at commodo justo pretium. Ut in nibh non diam hendrerit fermentum a ut odio. Curabitur lorem turpis, tincidunt et rhoncus et, pulvinar a metus. Vestibulum a quam sit amet arcu condimentum cursus vitae feugiat lectus. Sed ut lorem tellus, non sagittis enim. Curabitur lectus eros, commodo a elementum et, molestie eget est. Donec ullamcorper, arcu nec volutpat auctor, sem odio interdum tellus, nec volutpat lacus libero at nisl. Aliquam metus sapien, aliquam a rutrum ac, tincidunt at purus. Donec in erat mi. Quisque semper mauris in massa bibendum sed tincidunt augue facilisis. In tempus lacinia urna ac tristique.</p> <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce tristique urna sem. Etiam iaculis aliquam dui nec porta. Proin tristique diam non augue mattis tristique. Phasellus nulla erat, adipiscing sed cursus sed, pulvinar eget nisl. Maecenas blandit nibh eu nisl facilisis et semper turpis posuere. Pellentesque auctor sem in massa sollicitudin congue. Vivamus quis lacinia massa. Aliquam sodales dictum magna, eget ullamcorper eros placerat at. Quisque gravida diam sit amet nunc porta aliquam. Ut quis aliquet est. Maecenas risus tellus, euismod id porttitor at, porta id turpis. Phasellus id molestie ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean purus nibh, egestas vestibulum aliquet eget, luctus nec eros. Nulla facilisi. Quisque molestie, sem interdum posuere lacinia, nisl purus ornare lectus, id dapibus lacus dolor in ipsum. Aenean pharetra leo nulla.</p> <p>Curabitur nisi quam, iaculis eget pellentesque vel, pretium sed massa. In viverra, tellus at sollicitudin fringilla, orci eros blandit elit, a bibendum mauris dolor ut metus. Vivamus pellentesque suscipit diam, vitae euismod mi pellentesque vitae. Nullam neque libero, vehicula ut iaculis at, tincidunt eget leo. Suspendisse vitae velit justo. Nullam vitae sem tincidunt nulla tincidunt mollis in id massa. Duis rhoncus elementum turpis quis mollis. Vivamus egestas urna in velit commodo iaculis. Aenean quis dolor eu odio porttitor rhoncus nec vel eros. Donec ut est eu nisl vehicula pulvinar et id dolor. Donec a dolor neque. Morbi tempus mattis tortor ut rutrum. Phasellus orci metus, pellentesque vel tincidunt nec, pulvinar eu ante. Duis faucibus felis et diam ullamcorper in feugiat urna dignissim. Quisque nec diam mauris, vel viverra arcu. Cras sagittis dignissim nisl in sagittis. Fusce venenatis rhoncus est, nec elementum libero dapibus eget. Donec eu velit metus. Sed sollicitudin felis a diam condimentum in suscipit neque varius. Nulla nec tortor tristique elit malesuada luctus luctus quis leo.</p> <p>Nullam at quam dui. Ut gravida, tellus malesuada faucibus gravida, purus nulla consequat lorem, pellentesque egestas justo quam et enim. Suspendisse fringilla tellus id odio tristique varius. Cras et metus elit. Etiam interdum adipiscing mollis. Aliquam aliquet vestibulum imperdiet. In consectetur, nunc cursus sodales scelerisque, tellus eros tristique nisl, ut luctus augue dolor vel nibh. Fusce eget dui sed eros tristique varius lacinia id sapien. Nullam ac lorem ac lacus cursus ultricies id a risus. Ut eget dolor sem. Aliquam euismod consequat euismod. Duis sit amet neque et massa ullamcorper tempor.</p> <p>Quisque rutrum, ipsum ac volutpat dictum, urna diam facilisis enim, ac vestibulum justo metus eu mi. Curabitur nunc sem, consequat a mollis non, bibendum vitae dolor. Mauris pulvinar pellentesque tellus, vel aliquet mauris vulputate vel. Morbi eu ante id nulla ultricies tincidunt. Proin porta, felis nec tincidunt iaculis, justo nibh laoreet dolor, eu sollicitudin arcu justo et odio. Sed suscipit tellus lobortis est tristique semper fermentum magna laoreet. Sed eget ante nunc, vitae varius purus. Mauris nec viverra neque. Morbi et lectus velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer sit amet lobortis magna.</p> <p>Phasellus elementum iaculis sem in consectetur. Curabitur nec dictum enim. Nunc at pellentesque augue. Nulla sit amet sapien neque, et molestie augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin non elit ante. Mauris justo tellus, feugiat at dapibus a, placerat id felis. Nullam lobortis vehicula rutrum. Fusce tristique pharetra urna, ac scelerisque ipsum consequat eget. Morbi at ipsum in tellus luctus volutpat. Duis placerat accumsan lacus, dictum convallis elit porttitor eu.</p> <p>Sed ac neque sit amet neque luctus rhoncus. Vestibulum sit amet commodo ante. Duis ullamcorper est id dui ullamcorper cursus. Maecenas fringilla ultricies turpis, nec pulvinar libero faucibus a. Quisque bibendum aliquam sapien, in fermentum arcu iaculis at. Mauris bibendum, metus sed rhoncus fringilla, nisl purus interdum eros, vitae malesuada felis est rhoncus magna. Phasellus elit justo, sagittis nec interdum tincidunt, mollis quis justo. Suspendisse rhoncus rutrum vestibulum. Aliquam ut nunc lectus, quis aliquam risus. Aliquam vel nulla sed odio blandit sagittis. Nulla facilisi. Vivamus ullamcorper, lectus facilisis eleifend accumsan, purus massa sollicitudin nunc, in sodales tellus dui eget est. Morbi ipsum nisi, semper sit amet vehicula sit amet, semper at mauris. Nam mollis massa sed risus scelerisque quis congue mauris tempus. Vestibulum nec urna magna, vitae ornare massa. Aenean adipiscing tempor rutrum.</p> <p>In hac habitasse platea dictumst. Etiam in dolor eros, eleifend volutpat magna. Sed blandit gravida feugiat. Sed eu dolor in odio sagittis molestie eget ac orci. Phasellus tellus erat, scelerisque tincidunt lacinia sed, placerat eu sapien. Curabitur lobortis feugiat cursus. Nam eu egestas justo. Nullam dignissim enim ipsum, sed semper orci. Donec nulla dui, viverra vel viverra eu, eleifend nec justo. Sed in ultricies turpis. Maecenas ullamcorper, erat ac scelerisque mattis, augue magna laoreet mauris, nec sagittis tellus enim eget tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vestibulum urna eu magna ultricies adipiscing. Phasellus sed urna at nibh euismod vestibulum at eget dui. Nulla ullamcorper viverra tellus ut volutpat. Praesent hendrerit, purus a imperdiet tempus, turpis est suscipit felis, ut commodo diam orci ac augue. Quisque consectetur varius sapien, vel lobortis ante porttitor sit amet. Proin fermentum blandit justo, id faucibus elit feugiat ut. Nulla quam elit, tristique gravida ultrices in, imperdiet et enim.</p> <p>Aliquam malesuada, nibh eget laoreet malesuada, lorem ligula gravida eros, a consectetur dui odio id urna. Vivamus tincidunt porttitor facilisis. Maecenas vitae lacus at lorem porttitor sodales. Duis et velit ac ipsum cursus ornare. Aliquam eu rhoncus est. Cras nec facilisis tellus. Nunc in felis odio. Nam facilisis dui eu lacus egestas sit amet malesuada dolor volutpat. In placerat dictum turpis ac vulputate. Suspendisse neque odio, elementum sagittis sollicitudin quis, eleifend ac orci. Proin suscipit molestie orci non venenatis. Sed metus mauris, laoreet id lobortis at, tempor eu erat. Mauris tempor, nisi id interdum tempor, tellus ligula pretium mi, a viverra nibh neque vitae est. Integer mattis, lorem ac congue fermentum, quam ipsum gravida erat, in egestas lorem eros ac massa. Vestibulum lobortis ante libero, vel fermentum ante. Aliquam augue ipsum, ullamcorper sit amet dictum id, commodo sit amet lacus. Vivamus elit purus, elementum a vestibulum quis, iaculis id metus. Cras facilisis orci in nulla consequat gravida. Integer blandit, felis at lacinia porta, lacus velit pretium magna, ut eleifend diam magna a justo. Donec scelerisque diam quis nisi molestie vel egestas urna condimentum. </p> <script type="text/javascript"> Effect.Shake('floating_text'); </script> </body> </html>

Read the article

XML\Jquery create listings based on user selection

- by Sirius Mane

Alright, so what I need to try and accomplish is having a static web page that will display information pulled from an XML document and render it to the screen without refreshing. Basic AJAX stuff I guess. The trick is, as I'm trying to think this through I keep coming into 'logical' barriers mentally. Objectives: -Have a chart which displays baseball team names, wins, losses, ties. In my XML doc there is a 'pending' status, so games not completed should not be displayed.(Need help here) -Have a selection list which allows you to select a team which is populated from XML doc. (done) -Upon selecting a particular team from the aforementioned selection list the page should display in a separate area all of the planned games for that team. Including pending. Basically all of the games associated with that team and the dates (which is included in the XML file). (Need help here) What I have so far: HTML\JS <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="batty.css" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Little Batty League</title> <script type="text/javascript" src="library.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var IE = window.ActiveXObject ? true: false; var MOZ = document.implementation.createDocument ? true: false; $(document).ready(function(){ $.ajax({ type: "GET", url: "schedule.xml", dataType: "xml", success: function(xml) { var select = $('#mySelect'); $(xml).find('Teams').each(function(){ var title = $(this).find('Team').text(); select.append("<option/><option class='ddheader'>"+title+"</option>"); }); select.children(":first").text("please make a selection").attr("selected",true); } }); }); </script> </script> </head> <body onLoad="init()">  <div id="container">  <div id="banner"> <img src="images/mascot.jpg" width="324" height="112" alt="Mascot" />  <table width="900" border="0" cellpadding="0" cellspacing="0"> <tr> <td><div class="menuButton"><a href="index.html">Home</a></div></td> <td><div class="menuButton"><a href="schedule.html">Schedule</a></div></td> <td><div class="menuButton"><a href="contact.html">Contact</a></div></td> <td><div class="menuButton"><a href="about.html">About</a></div></td> </tr> </table>  </div>   <div id="content"> <br /> <form> <select id="mySelect"> <option>please make a selection</option> </select> </form> </div>   <div id="footer"> © 2012 Batty League </div>  </div>  </body> </html> And the XML is: <?xml version="1.0" encoding="utf-8"?> <Schedule season="1"> <Teams> <Team>Bluejays</Team> </Teams> <Teams> <Team>Chickens</Team> </Teams> <Teams> <Team>Lions</Team> </Teams> <Teams> <Team>Pixies</Team> </Teams> <Teams> <Team>Zombies</Team> </Teams> <Teams> <Team>Wombats</Team> </Teams> <Game status="Played"> <Home_Team>Chickens</Home_Team> <Away_Team>Bluejays</Away_Team> <Date>2012-01-10T09:00:00</Date> </Game> <Game status="Pending"> <Home_Team>Bluejays </Home_Team> <Away_Team>Chickens</Away_Team> <Date>2012-01-11T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Bluejays</Home_Team> <Away_Team>Lions</Away_Team> <Date>2012-01-18T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Lions</Home_Team> <Away_Team>Bluejays</Away_Team> <Date>2012-01-19T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Bluejays</Home_Team> <Away_Team>Pixies</Away_Team> <Date>2012-01-21T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Pixies</Home_Team> <Away_Team>Bluejays</Away_Team> <Date>2012-01-23T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Bluejays</Home_Team> <Away_Team>Zombies</Away_Team> <Date>2012-01-25T09:00:00</Date> </Game> <Game status="Pending"> <Home_Team>Zombies</Home_Team> <Away_Team>Bluejays</Away_Team> <Date>2012-01-27T09:00:00</Date> </Game> <Game status="Pending"> <Home_Team>Bluejays</Home_Team> <Away_Team>Wombats</Away_Team> <Date>2012-01-28T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Wombats</Home_Team> <Away_Team>Bluejays</Away_Team> <Date>2012-01-30T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Chickens</Home_Team> <Away_Team>Lions</Away_Team> <Date>2012-01-31T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Lions</Home_Team> <Away_Team>Chickens</Away_Team> <Date>2012-02-04T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Chickens</Home_Team> <Away_Team>Pixies</Away_Team> <Date>2012-02-05T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Pixies</Home_Team> <Away_Team>Chickens</Away_Team> <Date>2012-02-07T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Chickens</Home_Team> <Away_Team>Zombies</Away_Team> <Date>2012-02-08T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Zombies</Home_Team> <Away_Team>Chickens</Away_Team> <Date>2012-02-10T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Lions</Home_Team> <Away_Team>Pixies</Away_Team> <Date>2012-02-12T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Pixies </Home_Team> <Away_Team>Lions</Away_Team> <Date>2012-02-14T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Lions</Home_Team> <Away_Team>Zombies</Away_Team> <Date>2012-02-15T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Zombies</Home_Team> <Away_Team>Lions</Away_Team> <Date>2012-02-16T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Lions</Home_Team> <Away_Team>Wombats</Away_Team> <Date>2012-01-23T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Wombats</Home_Team> <Away_Team>Lions</Away_Team> <Date>2012-02-24T09:00:00</Date> </Game> <Game status="Pending"> <Home_Team>Pixies</Home_Team> <Away_Team>Zombies</Away_Team> <Date>2012-02-25T09:00:00</Date> </Game> <Game status="Pending"> <Home_Team>Zombies</Home_Team> <Away_Team>Pixies</Away_Team> <Date>2012-02-26T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Pixies</Home_Team> <Away_Team>Wombats</Away_Team> <Date>2012-02-27T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Wombats</Home_Team> <Away_Team>Pixies</Away_Team> <Date>2012-02-28T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Zombies</Home_Team> <Away_Team>Wombats</Away_Team> <Date>2012-02-04T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Wombats</Home_Team> <Away_Team>Zombies</Away_Team> <Date>2012-02-05T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Wombats</Home_Team> <Away_Team>Chickens</Away_Team> <Date>2012-02-07T09:00:00</Date> </Game> <Game status="Played"> <Home_Team>Chickens</Home_Team> <Away_Team>Wombats</Away_Team> <Date>2012-02-08T09:00:00</Date> </Game> </Schedule> If anybody can point me to Jquery code\modules that would greatly help me with this I'd be appreciate. Any help right now would be great, I'm just banging my head against a wall. I'm trying to avoid using XSLT transforms because I absolutely despise XML and I'm not good with it. So I'd -like- to just use Javascript\PHP\etc with only a sprinkling of the necessary XML where possible..

Read the article

ASP.Net MVC 2 Auto Complete Textbox With Custom View Model Attribute & EditorTemplate

- by SeanMcAlinden

In this post I’m going to show how to create a generic, ajax driven Auto Complete text box using the new MVC 2 Templates and the jQuery UI library. The template will be automatically displayed when a property is decorated with a custom attribute within the view model. The AutoComplete text box in action will look like the following: The first thing to do is to do is visit my previous blog post to put the custom model metadata provider in place, this is necessary when using custom attributes on the view model. http://weblogs.asp.net/seanmcalinden/archive/2010/06/11/custom-asp-net-mvc-2-modelmetadataprovider-for-using-custom-view-model-attributes.aspx Once this is in place, make sure you visit the jQuery UI and download the latest stable release – in this example I’m using version 1.8.2. You can download it here. Add the jQuery scripts and css theme to your project and add references to them in your master page. Should look something like the following: Site.Master <head runat="server"> <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title> <link href="../../Content/Site.css" rel="stylesheet" type="text/css" /> <link href="../../css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" /> <script src="../../Scripts/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="../../Scripts/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script> </head> Once this is place we can get started. Creating the AutoComplete Custom Attribute The auto complete attribute will derive from the abstract MetadataAttribute created in my previous post. It will look like the following: AutoCompleteAttribute using System.Collections.Generic; using System.Web.Mvc; using System.Web.Routing; namespace Mvc2Templates.Attributes { public class AutoCompleteAttribute : MetadataAttribute { public RouteValueDictionary RouteValueDictionary; public AutoCompleteAttribute(string controller, string action, string parameterName) { this.RouteValueDictionary = new RouteValueDictionary(); this.RouteValueDictionary.Add("Controller", controller); this.RouteValueDictionary.Add("Action", action); this.RouteValueDictionary.Add(parameterName, string.Empty); } public override void Process(ModelMetadata modelMetaData) { modelMetaData.AdditionalValues.Add("AutoCompleteUrlData", this.RouteValueDictionary); modelMetaData.TemplateHint = "AutoComplete"; } } } As you can see, the constructor takes in strings for the controller, action and parameter name. The parameter name will be used for passing the search text within the auto complete text box. The constructor then creates a new RouteValueDictionary which we will use later to construct the url for getting the auto complete results via ajax. The main interesting method is the method override called Process. With the process method, the route value dictionary is added to the modelMetaData AdditionalValues collection. The TemplateHint is also set to AutoComplete, this means that when the view model is parsed for display, the MVC 2 framework will look for a view user control template called AutoComplete, if it finds one, it uses that template to display the property. The View Model To show you how the attribute will look, this is the view model I have used in my example which can be downloaded at the end of this post. View Model using System.ComponentModel; using Mvc2Templates.Attributes; namespace Mvc2Templates.Models { public class TemplateDemoViewModel { [AutoComplete("Home", "AutoCompleteResult", "searchText")] [DisplayName("European Country Search")] public string SearchText { get; set; } } } As you can see, the auto complete attribute is called with the controller name, action name and the name of the action parameter that the search text will be passed into. The AutoComplete Template Now all of this is in place, it’s time to create the AutoComplete template. Create a ViewUserControl called AutoComplete.ascx at the following location within your application – Views/Shared/EditorTemplates/AutoComplete.ascx Add the following code: AutoComplete.ascx <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> <% var propertyName = ViewData.ModelMetadata.PropertyName; var propertyValue = ViewData.ModelMetadata.Model; var id = Guid.NewGuid().ToString(); RouteValueDictionary urlData = (RouteValueDictionary)ViewData.ModelMetadata.AdditionalValues.Where(x => x.Key == "AutoCompleteUrlData").Single().Value; var url = Mvc2Templates.Views.Shared.Helpers.RouteHelper.GetUrl(this.ViewContext.RequestContext, urlData); %> <input type="text" name="<%= propertyName %>" value="<%= propertyValue %>" id="<%= id %>" class="autoComplete" /> <script type="text/javascript"> $(function () { $("#<%= id %>").autocomplete({ source: function (request, response) { $.ajax({ url: "<%= url %>" + request.term, dataType: "json", success: function (data) { response(data); } }); }, minLength: 2 }); }); </script> There is a lot going on in here but when you break it down it’s quite simple. Firstly, the property name and property value are retrieved through the model meta data. These are required to ensure that the text box input has the correct name and data to allow for model binding. If you look at line 14 you can see them being used in the text box input creation. The interesting bit is on line 8 and 9, this is the code to retrieve the route value dictionary we added into the model metada via the custom attribute. Line 11 is used to create the url, in order to do this I created a quick helper class which looks like the code below titled RouteHelper. The last bit of script is the code to initialise the jQuery UI AutoComplete control with the correct url for calling back to our controller action. RouteHelper using System.Web.Mvc; using System.Web.Routing; namespace Mvc2Templates.Views.Shared.Helpers { public static class RouteHelper { const string Controller = "Controller"; const string Action = "Action"; const string ReplaceFormatString = "REPLACE{0}"; public static string GetUrl(RequestContext requestContext, RouteValueDictionary routeValueDictionary) { RouteValueDictionary urlData = new RouteValueDictionary(); UrlHelper urlHelper = new UrlHelper(requestContext); int i = 0; foreach(var item in routeValueDictionary) { if (item.Value == string.Empty) { i++; urlData.Add(item.Key, string.Format(ReplaceFormatString, i.ToString())); } else { urlData.Add(item.Key, item.Value); } } var url = urlHelper.RouteUrl(urlData); for (int index = 1; index <= i; index++) { url = url.Replace(string.Format(ReplaceFormatString, index.ToString()), string.Empty); } return url; } } } See it in action All you need to do to see it in action is pass a view model from your controller with the new AutoComplete attribute attached and call the following within your view: <%= this.Html.EditorForModel() %> NOTE: The jQuery UI auto complete control expects a JSON string returned from your controller action method… as you can’t use the JsonResult to perform GET requests, use a normal action result, convert your data into json and return it as a string via a ContentResult. If you download the solution it will be very clear how to handle the controller and action for this demo. The full source code for this post can be downloaded here. It has been developed using MVC 2 and Visual Studio 2010. As always, I hope this has been interesting/useful. Kind Regards, Sean McAlinden.

Read the article

Using JSON.NET for dynamic JSON parsing

- by Rick Strahl

With the release of ASP.NET Web API as part of .NET 4.5 and MVC 4.0, JSON.NET has effectively pushed out the .NET native serializers to become the default serializer for Web API. JSON.NET is vastly more flexible than the built in DataContractJsonSerializer or the older JavaScript serializer. The DataContractSerializer in particular has been very problematic in the past because it can't deal with untyped objects for serialization - like values of type object, or anonymous types which are quite common these days. The JavaScript Serializer that came before it actually does support non-typed objects for serialization but it can't do anything with untyped data coming in from JavaScript and it's overall model of extensibility was pretty limited (JavaScript Serializer is what MVC uses for JSON responses). JSON.NET provides a robust JSON serializer that has both high level and low level components, supports binary JSON, JSON contracts, Xml to JSON conversion, LINQ to JSON and many, many more features than either of the built in serializers. ASP.NET Web API now uses JSON.NET as its default serializer and is now pulled in as a NuGet dependency into Web API projects, which is great. Dynamic JSON Parsing One of the features that I think is getting ever more important is the ability to serialize and deserialize arbitrary JSON content dynamically - that is without mapping the JSON captured directly into a .NET type as DataContractSerializer or the JavaScript Serializers do. Sometimes it isn't possible to map types due to the differences in languages (think collections, dictionaries etc), and other times you simply don't have the structures in place or don't want to create them to actually import the data. If this topic sounds familiar - you're right! I wrote about dynamic JSON parsing a few months back before JSON.NET was added to Web API and when Web API and the System.Net HttpClient libraries included the System.Json classes like JsonObject and JsonArray. With the inclusion of JSON.NET in Web API these classes are now obsolete and didn't ship with Web API or the client libraries. I re-linked my original post to this one. In this post I'll discus JToken, JObject and JArray which are the dynamic JSON objects that make it very easy to create and retrieve JSON content on the fly without underlying types. Why Dynamic JSON? So, why Dynamic JSON parsing rather than strongly typed parsing? Since applications are interacting more and more with third party services it becomes ever more important to have easy access to those services with easy JSON parsing. Sometimes it just makes lot of sense to pull just a small amount of data out of large JSON document received from a service, because the third party service isn't directly related to your application's logic most of the time - and it makes little sense to map the entire service structure in your application. For example, recently I worked with the Google Maps Places API to return information about businesses close to me (or rather the app's) location. The Google API returns a ton of information that my application had no interest in - all I needed was few values out of the data. Dynamic JSON parsing makes it possible to map this data, without having to map the entire API to a C# data structure. Instead I could pull out the three or four values I needed from the API and directly store it on my business entities that needed to receive the data - no need to map the entire Maps API structure. Getting JSON.NET The easiest way to use JSON.NET is to grab it via NuGet and add it as a reference to your project. You can add it to your project with: PM> Install-Package Newtonsoft.Json From the Package Manager Console or by using Manage NuGet Packages in your project References. As mentioned if you're using ASP.NET Web API or MVC 4 JSON.NET will be automatically added to your project. Alternately you can also go to the CodePlex site and download the latest version including source code: http://json.codeplex.com/ Creating JSON on the fly with JObject and JArray Let's start with creating some JSON on the fly. It's super easy to create a dynamic object structure with any of the JToken derived JSON.NET objects. The most common JToken derived classes you are likely to use are JObject and JArray. JToken implements IDynamicMetaProvider and so uses the dynamic keyword extensively to make it intuitive to create object structures and turn them into JSON via dynamic object syntax. Here's an example of creating a music album structure with child songs using JObject for the base object and songs and JArray for the actual collection of songs:[TestMethod] public void JObjectOutputTest() { // strong typed instance var jsonObject = new JObject(); // you can explicitly add values here using class interface jsonObject.Add("Entered", DateTime.Now); // or cast to dynamic to dynamically add/read properties dynamic album = jsonObject; album.AlbumName = "Dirty Deeds Done Dirt Cheap"; album.Artist = "AC/DC"; album.YearReleased = 1976; album.Songs = new JArray() as dynamic; dynamic song = new JObject(); song.SongName = "Dirty Deeds Done Dirt Cheap"; song.SongLength = "4:11"; album.Songs.Add(song); song = new JObject(); song.SongName = "Love at First Feel"; song.SongLength = "3:10"; album.Songs.Add(song); Console.WriteLine(album.ToString()); } This produces a complete JSON structure: { "Entered": "2012-08-18T13:26:37.7137482-10:00", "AlbumName": "Dirty Deeds Done Dirt Cheap", "Artist": "AC/DC", "YearReleased": 1976, "Songs": [ { "SongName": "Dirty Deeds Done Dirt Cheap", "SongLength": "4:11" }, { "SongName": "Love at First Feel", "SongLength": "3:10" } ] } Notice that JSON.NET does a nice job formatting the JSON, so it's easy to read and paste into blog posts :-). JSON.NET includes a bunch of configuration options that control how JSON is generated. Typically the defaults are just fine, but you can override with the JsonSettings object for most operations. The important thing about this code is that there's no explicit type used for holding the values to serialize to JSON. Rather the JSON.NET objects are the containers that receive the data as I build up my JSON structure dynamically, simply by adding properties. This means this code can be entirely driven at runtime without compile time restraints of structure for the JSON output. Here I use JObject to create a album 'object' and immediately cast it to dynamic. JObject() is kind of similar in behavior to ExpandoObject in that it allows you to add properties by simply assigning to them. Internally, JObject values are stored in pseudo collections of key value pairs that are exposed as properties through the IDynamicMetaObject interface exposed in JSON.NET's JToken base class. For objects the syntax is very clean - you add simple typed values as properties. For objects and arrays you have to explicitly create new JObject or JArray, cast them to dynamic and then add properties and items to them. Always remember though these values are dynamic - which means no Intellisense and no compiler type checking. It's up to you to ensure that the names and values you create are accessed consistently and without typos in your code. Note that you can also access the JObject instance directly (not as dynamic) and get access to the underlying JObject type. This means you can assign properties by string, which can be useful for fully data driven JSON generation from other structures. Below you can see both styles of access next to each other:// strong type instance var jsonObject = new JObject(); // you can explicitly add values here jsonObject.Add("Entered", DateTime.Now); // expando style instance you can just 'use' properties dynamic album = jsonObject; album.AlbumName = "Dirty Deeds Done Dirt Cheap"; JContainer (the base class for JObject and JArray) is a collection so you can also iterate over the properties at runtime easily:foreach (var item in jsonObject) { Console.WriteLine(item.Key + " " + item.Value.ToString()); } The functionality of the JSON objects are very similar to .NET's ExpandObject and if you used it before, you're already familiar with how the dynamic interfaces to the JSON objects works. Importing JSON with JObject.Parse() and JArray.Parse() The JValue structure supports importing JSON via the Parse() and Load() methods which can read JSON data from a string or various streams respectively. Essentially JValue includes the core JSON parsing to turn a JSON string into a collection of JsonValue objects that can be then referenced using familiar dynamic object syntax. Here's a simple example:public void JValueParsingTest() { var jsonString = @"{""Name"":""Rick"",""Company"":""West Wind"", ""Entered"":""2012-03-16T00:03:33.245-10:00""}"; dynamic json = JValue.Parse(jsonString); // values require casting string name = json.Name; string company = json.Company; DateTime entered = json.Entered; Assert.AreEqual(name, "Rick"); Assert.AreEqual(company, "West Wind"); } The JSON string represents an object with three properties which is parsed into a JObject class and cast to dynamic. Once cast to dynamic I can then go ahead and access the object using familiar object syntax. Note that the actual values - json.Name, json.Company, json.Entered - are actually of type JToken and I have to cast them to their appropriate types first before I can do type comparisons as in the Asserts at the end of the test method. This is required because of the way that dynamic types work which can't determine the type based on the method signature of the Assert.AreEqual(object,object) method. I have to either assign the dynamic value to a variable as I did above, or explicitly cast ( (string) json.Name) in the actual method call. The JSON structure can be much more complex than this simple example. Here's another example of an array of albums serialized to JSON and then parsed through with JsonValue():[TestMethod] public void JsonArrayParsingTest() { var jsonString = @"[ { ""Id"": ""b3ec4e5c"", ""AlbumName"": ""Dirty Deeds Done Dirt Cheap"", ""Artist"": ""AC/DC"", ""YearReleased"": 1976, ""Entered"": ""2012-03-16T00:13:12.2810521-10:00"", ""AlbumImageUrl"": ""http://ecx.images-amazon.com/images/I/61kTaH-uZBL._AA115_.jpg"", ""AmazonUrl"": ""http://www.amazon.com/gp/product/…ASIN=B00008BXJ4"", ""Songs"": [ { ""AlbumId"": ""b3ec4e5c"", ""SongName"": ""Dirty Deeds Done Dirt Cheap"", ""SongLength"": ""4:11"" }, { ""AlbumId"": ""b3ec4e5c"", ""SongName"": ""Love at First Feel"", ""SongLength"": ""3:10"" }, { ""AlbumId"": ""b3ec4e5c"", ""SongName"": ""Big Balls"", ""SongLength"": ""2:38"" } ] }, { ""Id"": ""7b919432"", ""AlbumName"": ""End of the Silence"", ""Artist"": ""Henry Rollins Band"", ""YearReleased"": 1992, ""Entered"": ""2012-03-16T00:13:12.2800521-10:00"", ""AlbumImageUrl"": ""http://ecx.images-amazon.com/images/I/51FO3rb1tuL._SL160_AA160_.jpg"", ""AmazonUrl"": ""http://www.amazon.com/End-Silence-Rollins-Band/dp/B0000040OX/ref=sr_1_5?ie=UTF8&qid=1302232195&sr=8-5"", ""Songs"": [ { ""AlbumId"": ""7b919432"", ""SongName"": ""Low Self Opinion"", ""SongLength"": ""5:24"" }, { ""AlbumId"": ""7b919432"", ""SongName"": ""Grip"", ""SongLength"": ""4:51"" } ] } ]"; JArray jsonVal = JArray.Parse(jsonString) as JArray; dynamic albums = jsonVal; foreach (dynamic album in albums) { Console.WriteLine(album.AlbumName + " (" + album.YearReleased.ToString() + ")"); foreach (dynamic song in album.Songs) { Console.WriteLine("\t" + song.SongName); } } Console.WriteLine(albums[0].AlbumName); Console.WriteLine(albums[0].Songs[1].SongName); } JObject and JArray in ASP.NET Web API Of course these types also work in ASP.NET Web API controller methods. If you want you can accept parameters using these object or return them back to the server. The following contrived example receives dynamic JSON input, and then creates a new dynamic JSON object and returns it based on data from the first:[HttpPost] public JObject PostAlbumJObject(JObject jAlbum) { // dynamic input from inbound JSON dynamic album = jAlbum; // create a new JSON object to write out dynamic newAlbum = new JObject(); // Create properties on the new instance // with values from the first newAlbum.AlbumName = album.AlbumName + " New"; newAlbum.NewProperty = "something new"; newAlbum.Songs = new JArray(); foreach (dynamic song in album.Songs) { song.SongName = song.SongName + " New"; newAlbum.Songs.Add(song); } return newAlbum; } The raw POST request to the server looks something like this: POST http://localhost/aspnetwebapi/samples/PostAlbumJObject HTTP/1.1User-Agent: FiddlerContent-type: application/jsonHost: localhostContent-Length: 88 {AlbumName: "Dirty Deeds",Songs:[ { SongName: "Problem Child"},{ SongName: "Squealer"}]} and the output that comes back looks like this: { "AlbumName": "Dirty Deeds New", "NewProperty": "something new", "Songs": [ { "SongName": "Problem Child New" }, { "SongName": "Squealer New" } ]} The original values are echoed back with something extra appended to demonstrate that we're working with a new object. When you receive or return a JObject, JValue, JToken or JArray instance in a Web API method, Web API ignores normal content negotiation and assumes your content is going to be received and returned as JSON, so effectively the parameter and result type explicitly determines the input and output format which is nice. Dynamic to Strong Type Mapping You can also map JObject and JArray instances to a strongly typed object, so you can mix dynamic and static typing in the same piece of code. Using the 2 Album jsonString shown earlier, the code below takes an array of albums and picks out only a single album and casts that album to a static Album instance.[TestMethod] public void JsonParseToStrongTypeTest() { JArray albums = JArray.Parse(jsonString) as JArray; // pick out one album JObject jalbum = albums[0] as JObject; // Copy to a static Album instance Album album = jalbum.ToObject<Album>(); Assert.IsNotNull(album); Assert.AreEqual(album.AlbumName,jalbum.Value<string>("AlbumName")); Assert.IsTrue(album.Songs.Count > 0); } This is pretty damn useful for the scenario I mentioned earlier - you can read a large chunk of JSON and dynamically walk the property hierarchy down to the item you want to access, and then either access the specific item dynamically (as shown earlier) or map a part of the JSON to a strongly typed object. That's very powerful if you think about it - it leaves you in total control to decide what's dynamic and what's static. Strongly typed JSON Parsing With all this talk of dynamic let's not forget that JSON.NET of course also does strongly typed serialization which is drop dead easy. Here's a simple example on how to serialize and deserialize an object with JSON.NET:[TestMethod] public void StronglyTypedSerializationTest() { // Demonstrate deserialization from a raw string var album = new Album() { AlbumName = "Dirty Deeds Done Dirt Cheap", Artist = "AC/DC", Entered = DateTime.Now, YearReleased = 1976, Songs = new List<Song>() { new Song() { SongName = "Dirty Deeds Done Dirt Cheap", SongLength = "4:11" }, new Song() { SongName = "Love at First Feel", SongLength = "3:10" } } }; // serialize to string string json2 = JsonConvert.SerializeObject(album,Formatting.Indented); Console.WriteLine(json2); // make sure we can serialize back var album2 = JsonConvert.DeserializeObject<Album>(json2); Assert.IsNotNull(album2); Assert.IsTrue(album2.AlbumName == "Dirty Deeds Done Dirt Cheap"); Assert.IsTrue(album2.Songs.Count == 2); } JsonConvert is a high level static class that wraps lower level functionality, but you can also use the JsonSerializer class, which allows you to serialize/parse to and from streams. It's a little more work, but gives you a bit more control. The functionality available is easy to discover with Intellisense, and that's good because there's not a lot in the way of documentation that's actually useful. Summary JSON.NET is a pretty complete JSON implementation with lots of different choices for JSON parsing from dynamic parsing to static serialization, to complex querying of JSON objects using LINQ. It's good to see this open source library getting integrated into .NET, and pushing out the old and tired stock .NET parsers so that we finally have a bit more flexibility - and extensibility - in our JSON parsing. Good to go! Resources Sample Test Project http://json.codeplex.com/© Rick Strahl, West Wind Technologies, 2005-2012Posted in .NET Web Api AJAX Tweet !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

Read the article

Using an alternate JSON Serializer in ASP.NET Web API

- by Rick Strahl

The new ASP.NET Web API that Microsoft released alongside MVC 4.0 Beta last week is a great framework for building REST and AJAX APIs. I've been working with it for quite a while now and I really like the way it works and the complete set of features it provides 'in the box'. It's about time that Microsoft gets a decent API for building generic HTTP endpoints into the framework. DataContractJsonSerializer sucks As nice as Web API's overall design is one thing still sucks: The built-in JSON Serialization uses the DataContractJsonSerializer which is just too limiting for many scenarios. The biggest issues I have with it are: No support for untyped values (object, dynamic, Anonymous Types) MS AJAX style Date Formatting Ugly serialization formats for types like Dictionaries To me the most serious issue is dealing with serialization of untyped objects. I have number of applications with AJAX front ends that dynamically reformat data from business objects to fit a specific message format that certain UI components require. The most common scenario I have there are IEnumerable query results from a database with fields from the result set rearranged to fit the sometimes unconventional formats required for the UI components (like jqGrid for example). Creating custom types to fit these messages seems like overkill and projections using Linq makes this much easier to code up. Alas DataContractJsonSerializer doesn't support it. Neither does DataContractSerializer for XML output for that matter. What this means is that you can't do stuff like this in Web API out of the box:public object GetAnonymousType() { return new { name = "Rick", company = "West Wind", entered= DateTime.Now }; } Basically anything that doesn't have an explicit type DataContractJsonSerializer will not let you return. FWIW, the same is true for XmlSerializer which also doesn't work with non-typed values for serialization. The example above is obviously contrived with a hardcoded object graph, but it's not uncommon to get dynamic values returned from queries that have anonymous types for their result projections. Apparently there's a good possibility that Microsoft will ship Json.NET as part of Web API RTM release. Scott Hanselman confirmed this as a footnote in his JSON Dates post a few days ago. I've heard several other people from Microsoft confirm that Json.NET will be included and be the default JSON serializer, but no details yet in what capacity it will show up. Let's hope it ends up as the default in the box. Meanwhile this post will show you how you can use it today with the beta and get JSON that matches what you should see in the RTM version. What about JsonValue? To be fair Web API DOES include a new JsonValue/JsonObject/JsonArray type that allow you to address some of these scenarios. JsonValue is a new type in the System.Json assembly that can be used to build up an object graph based on a dictionary. It's actually a really cool implementation of a dynamic type that allows you to create an object graph and spit it out to JSON without having to create .NET type first. JsonValue can also receive a JSON string and parse it without having to actually load it into a .NET type (which is something that's been missing in the core framework). This is really useful if you get a JSON result from an arbitrary service and you don't want to explicitly create a mapping type for the data returned. For serialization you can create an object structure on the fly and pass it back as part of an Web API action method like this:public JsonValue GetJsonValue() { dynamic json = new JsonObject(); json.name = "Rick"; json.company = "West Wind"; json.entered = DateTime.Now; dynamic address = new JsonObject(); address.street = "32 Kaiea"; address.zip = "96779"; json.address = address; dynamic phones = new JsonArray(); json.phoneNumbers = phones; dynamic phone = new JsonObject(); phone.type = "Home"; phone.number = "808 123-1233"; phones.Add(phone); phone = new JsonObject(); phone.type = "Home"; phone.number = "808 123-1233"; phones.Add(phone); //var jsonString = json.ToString(); return json; } which produces the following output (formatted here for easier reading):{ name: "rick", company: "West Wind", entered: "2012-03-08T15:33:19.673-10:00", address: { street: "32 Kaiea", zip: "96779" }, phoneNumbers: [ { type: "Home", number: "808 123-1233" }, { type: "Mobile", number: "808 123-1234" }] } If you need to build a simple JSON type on the fly these types work great. But if you have an existing type - or worse a query result/list that's already formatted JsonValue et al. become a pain to work with. As far as I can see there's no way to just throw an object instance at JsonValue and have it convert into JsonValue dictionary. It's a manual process. Using alternate Serializers in Web API So, currently the default serializer in WebAPI is DataContractJsonSeriaizer and I don't like it. You may not either, but luckily you can swap the serializer fairly easily. If you'd rather use the JavaScriptSerializer built into System.Web.Extensions or Json.NET today, it's not too difficult to create a custom MediaTypeFormatter that uses these serializers and can replace or partially replace the native serializer. Here's a MediaTypeFormatter implementation using the ASP.NET JavaScriptSerializer:using System; using System.Net.Http.Formatting; using System.Threading.Tasks; using System.Web.Script.Serialization; using System.Json; using System.IO; namespace Westwind.Web.WebApi { public class JavaScriptSerializerFormatter : MediaTypeFormatter { public JavaScriptSerializerFormatter() { SupportedMediaTypes.Add(new System.Net.Http.Headers.MediaTypeHeaderValue("application/json")); } protected override bool CanWriteType(Type type) { // don't serialize JsonValue structure use default for that if (type == typeof(JsonValue) || type == typeof(JsonObject) || type== typeof(JsonArray) ) return false; return true; } protected override bool CanReadType(Type type) { if (type == typeof(IKeyValueModel)) return false; return true; } protected override System.Threading.Tasks.Taskobject OnReadFromStreamAsync(Type type, System.IO.Stream stream, System.Net.Http.Headers.HttpContentHeaders contentHeaders, FormatterContext formatterContext) { var task = Taskobject.Factory.StartNew(() = { var ser = new JavaScriptSerializer(); string json; using (var sr = new StreamReader(stream)) { json = sr.ReadToEnd(); sr.Close(); } object val = ser.Deserialize(json,type); return val; }); return task; } protected override System.Threading.Tasks.Task OnWriteToStreamAsync(Type type, object value, System.IO.Stream stream, System.Net.Http.Headers.HttpContentHeaders contentHeaders, FormatterContext formatterContext, System.Net.TransportContext transportContext) { var task = Task.Factory.StartNew( () = { var ser = new JavaScriptSerializer(); var json = ser.Serialize(value); byte[] buf = System.Text.Encoding.Default.GetBytes(json); stream.Write(buf,0,buf.Length); stream.Flush(); }); return task; } } } Formatter implementation is pretty simple: You override 4 methods to tell which types you can handle and then handle the input or output streams to create/parse the JSON data. Note that when creating output you want to take care to still allow JsonValue/JsonObject/JsonArray types to be handled by the default serializer so those objects serialize properly - if you let either JavaScriptSerializer or JSON.NET handle them they'd try to render the dictionaries which is very undesirable. If you'd rather use Json.NET here's the JSON.NET version of the formatter:// this code requires a reference to JSON.NET in your project #if true using System; using System.Net.Http.Formatting; using System.Threading.Tasks; using System.Web.Script.Serialization; using System.Json; using Newtonsoft.Json; using System.IO; using Newtonsoft.Json.Converters; namespace Westwind.Web.WebApi { public class JsonNetFormatter : MediaTypeFormatter { public JsonNetFormatter() { SupportedMediaTypes.Add(new System.Net.Http.Headers.MediaTypeHeaderValue("application/json")); } protected override bool CanWriteType(Type type) { // don't serialize JsonValue structure use default for that if (type == typeof(JsonValue) || type == typeof(JsonObject) || type == typeof(JsonArray)) return false; return true; } protected override bool CanReadType(Type type) { if (type == typeof(IKeyValueModel)) return false; return true; } protected override System.Threading.Tasks.Taskobject OnReadFromStreamAsync(Type type, System.IO.Stream stream, System.Net.Http.Headers.HttpContentHeaders contentHeaders, FormatterContext formatterContext) { var task = Taskobject.Factory.StartNew(() = { var settings = new JsonSerializerSettings() { NullValueHandling = NullValueHandling.Ignore, }; var sr = new StreamReader(stream); var jreader = new JsonTextReader(sr); var ser = new JsonSerializer(); ser.Converters.Add(new IsoDateTimeConverter()); object val = ser.Deserialize(jreader, type); return val; }); return task; } protected override System.Threading.Tasks.Task OnWriteToStreamAsync(Type type, object value, System.IO.Stream stream, System.Net.Http.Headers.HttpContentHeaders contentHeaders, FormatterContext formatterContext, System.Net.TransportContext transportContext) { var task = Task.Factory.StartNew( () = { var settings = new JsonSerializerSettings() { NullValueHandling = NullValueHandling.Ignore, }; string json = JsonConvert.SerializeObject(value, Formatting.Indented, new JsonConverter[1] { new IsoDateTimeConverter() } ); byte[] buf = System.Text.Encoding.Default.GetBytes(json); stream.Write(buf,0,buf.Length); stream.Flush(); }); return task; } } } #endif One advantage of the Json.NET serializer is that you can specify a few options on how things are formatted and handled. You get null value handling and you can plug in the IsoDateTimeConverter which is nice to product proper ISO dates that I would expect any Json serializer to output these days. Hooking up the Formatters Once you've created the custom formatters you need to enable them for your Web API application. To do this use the GlobalConfiguration.Configuration object and add the formatter to the Formatters collection. Here's what this looks like hooked up from Application_Start in a Web project:protected void Application_Start(object sender, EventArgs e) { // Action based routing (used for RPC calls) RouteTable.Routes.MapHttpRoute( name: "StockApi", routeTemplate: "stocks/{action}/{symbol}", defaults: new { symbol = RouteParameter.Optional, controller = "StockApi" } ); // WebApi Configuration to hook up formatters and message handlers // optional RegisterApis(GlobalConfiguration.Configuration); } public static void RegisterApis(HttpConfiguration config) { // Add JavaScriptSerializer formatter instead - add at top to make default //config.Formatters.Insert(0, new JavaScriptSerializerFormatter()); // Add Json.net formatter - add at the top so it fires first! // This leaves the old one in place so JsonValue/JsonObject/JsonArray still are handled config.Formatters.Insert(0, new JsonNetFormatter()); } One thing to remember here is the GlobalConfiguration object which is Web API's static configuration instance. I think this thing is seriously misnamed given that GlobalConfiguration could stand for anything and so is hard to discover if you don't know what you're looking for. How about WebApiConfiguration or something more descriptive? Anyway, once you know what it is you can use the Formatters collection to insert your custom formatter. Note that I insert my formatter at the top of the list so it takes precedence over the default formatter. I also am not removing the old formatter because I still want JsonValue/JsonObject/JsonArray to be handled by the default serialization mechanism. Since they process in sequence and I exclude processing for these types JsonValue et al. still get properly serialized/deserialized. Summary Currently DataContractJsonSerializer in Web API is a pain, but at least we have the ability with relatively limited effort to replace the MediaTypeFormatter and plug in our own JSON serializer. This is useful for many scenarios - if you have existing client applications that used MVC JsonResult or ASP.NET AJAX results from ASMX AJAX services you can plug in the JavaScript serializer and get exactly the same serializer you used in the past so your results will be the same and don't potentially break clients. JSON serializers do vary a bit in how they serialize some of the more complex types (like Dictionaries and dates for example) and so if you're migrating it might be helpful to ensure your client code doesn't break when you switch to ASP.NET Web API. Going forward it looks like Microsoft is planning on plugging in Json.Net into Web API and make that the default. I think that's an awesome choice since Json.net has been around forever, is fast and easy to use and provides a ton of functionality as part of this great library. I just wish Microsoft would have figured this out sooner instead of now at the last minute integrating with it especially given that Json.Net has a similar set of lower level JSON objects JsonValue/JsonObject etc. which now will end up being duplicated by the native System.Json stuff. It's not like we don't already have enough confusion regarding which JSON serializer to use (JavaScriptSerializer, DataContractJsonSerializer, JsonValue/JsonObject/JsonArray and now Json.net). For years I've been using my own JSON serializer because the built in choices are both limited. However, with an official encorsement of Json.Net I'm happily moving on to use that in my applications. Let's see and hope Microsoft gets this right before ASP.NET Web API goes gold.© Rick Strahl, West Wind Technologies, 2005-2012Posted in Web Api AJAX ASP.NET Tweet !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

Read the article

Where does ASP.NET Web API Fit?

- by Rick Strahl

With the pending release of ASP.NET MVC 4 and the new ASP.NET Web API, there has been a lot of discussion of where the new Web API technology fits in the ASP.NET Web stack. There are a lot of choices to build HTTP based applications available now on the stack - we've come a long way from when WebForms and Http Handlers/Modules where the only real options. Today we have WebForms, MVC, ASP.NET Web Pages, ASP.NET AJAX, WCF REST and now Web API as well as the core ASP.NET runtime to choose to build HTTP content with. Web API definitely squarely addresses the 'API' aspect - building consumable services - rather than HTML content, but even to that end there are a lot of choices you have today. So where does Web API fit, and when doesn't it? But before we get into that discussion, let's talk about what a Web API is and why we should care. What's a Web API? HTTP 'APIs' (Microsoft's new terminology for a service I guess) are becoming increasingly more important with the rise of the many devices in use today. Most mobile devices like phones and tablets run Apps that are using data retrieved from the Web over HTTP. Desktop applications are also moving in this direction with more and more online content and synching moving into even traditional desktop applications. The pending Windows 8 release promises an app like platform for both the desktop and other devices, that also emphasizes consuming data from the Cloud. Likewise many Web browser hosted applications these days are relying on rich client functionality to create and manipulate the browser user interface, using AJAX rather than server generated HTML data to load up the user interface with data. These mobile or rich Web applications use their HTTP connection to return data rather than HTML markup in the form of JSON or XML typically. But an API can also serve other kinds of data, like images or other binary files, or even text data and HTML (although that's less common). A Web API is what feeds rich applications with data. ASP.NET Web API aims to service this particular segment of Web development by providing easy semantics to route and handle incoming requests and an easy to use platform to serve HTTP data in just about any content format you choose to create and serve from the server. But .NET already has various HTTP Platforms The .NET stack already includes a number of technologies that provide the ability to create HTTP service back ends, and it has done so since the very beginnings of the .NET platform. From raw HTTP Handlers and Modules in the core ASP.NET runtime, to high level platforms like ASP.NET MVC, Web Forms, ASP.NET AJAX and the WCF REST engine (which technically is not ASP.NET, but can integrate with it), you've always been able to handle just about any kind of HTTP request and response with ASP.NET. The beauty of the raw ASP.NET platform is that it provides you everything you need to build just about any type of HTTP application you can dream up from low level APIs/custom engines to high level HTML generation engine. ASP.NET as a core platform clearly has stood the test of time 10+ years later and all other frameworks like Web API are built on top of this ASP.NET core. However, although it's possible to create Web APIs / Services using any of the existing out of box .NET technologies, none of them have been a really nice fit for building arbitrary HTTP based APIs. Sure, you can use an HttpHandler to create just about anything, but you have to build a lot of plumbing to build something more complex like a comprehensive API that serves a variety of requests, handles multiple output formats and can easily pass data up to the server in a variety of ways. Likewise you can use ASP.NET MVC to handle routing and creating content in various formats fairly easily, but it doesn't provide a great way to automatically negotiate content types and serve various content formats directly (it's possible to do with some plumbing code of your own but not built in). Prior to Web API, Microsoft's main push for HTTP services has been WCF REST, which was always an awkward technology that had a severe personality conflict, not being clear on whether it wanted to be part of WCF or purely a separate technology. In the end it didn't do either WCF compatibility or WCF agnostic pure HTTP operation very well, which made for a very developer-unfriendly environment. Personally I didn't like any of the implementations at the time, so much so that I ended up building my own HTTP service engine (as part of the West Wind Web Toolkit), as have a few other third party tools that provided much better integration and ease of use. With the release of Web API for the first time I feel that I can finally use the tools in the box and not have to worry about creating and maintaining my own toolkit as Web API addresses just about all the features I implemented on my own and much more. ASP.NET Web API provides a better HTTP Experience ASP.NET Web API differentiates itself from the previous Microsoft in-box HTTP service solutions in that it was built from the ground up around the HTTP protocol and its messaging semantics. Unlike WCF REST or ASP.NET AJAX with ASMX, it’s a brand new platform rather than bolted on technology that is supposed to work in the context of an existing framework. The strength of the new ASP.NET Web API is that it combines the best features of the platforms that came before it, to provide a comprehensive and very usable HTTP platform. Because it's based on ASP.NET and borrows a lot of concepts from ASP.NET MVC, Web API should be immediately familiar and comfortable to most ASP.NET developers. Here are some of the features that Web API provides that I like: Strong Support for URL Routing to produce clean URLs using familiar MVC style routing semantics Content Negotiation based on Accept headers for request and response serialization Support for a host of supported output formats including JSON, XML, ATOM Strong default support for REST semantics but they are optional Easily extensible Formatter support to add new input/output types Deep support for more advanced HTTP features via HttpResponseMessage and HttpRequestMessage classes and strongly typed Enums to describe many HTTP operations Convention based design that drives you into doing the right thing for HTTP Services Very extensible, based on MVC like extensibility model of Formatters and Filters Self-hostable in non-Web applications Testable using testing concepts similar to MVC Web API is meant to handle any kind of HTTP input and produce output and status codes using the full spectrum of HTTP functionality available in a straight forward and flexible manner. Looking at the list above you can see that a lot of functionality is very similar to ASP.NET MVC, so many ASP.NET developers should feel quite comfortable with the concepts of Web API. The Routing and core infrastructure of Web API are very similar to how MVC works providing many of the benefits of MVC, but with focus on HTTP access and manipulation in Controller methods rather than HTML generation in MVC. There’s much improved support for content negotiation based on HTTP Accept headers with the framework capable of detecting automatically what content the client is sending and requesting and serving the appropriate data format in return. This seems like such a little and obvious thing, but it's really important. Today's service backends often are used by multiple clients/applications and being able to choose the right data format for what fits best for the client is very important. While previous solutions were able to accomplish this using a variety of mixed features of WCF and ASP.NET, Web API combines all this functionality into a single robust server side HTTP framework that intrinsically understands the HTTP semantics and subtly drives you in the right direction for most operations. And when you need to customize or do something that is not built in, there are lots of hooks and overrides for most behaviors, and even many low level hook points that allow you to plug in custom functionality with relatively little effort. No Brainers for Web API There are a few scenarios that are a slam dunk for Web API. If your primary focus of an application or even a part of an application is some sort of API then Web API makes great sense. HTTP ServicesIf you're building a comprehensive HTTP API that is to be consumed over the Web, Web API is a perfect fit. You can isolate the logic in Web API and build your application as a service breaking out the logic into controllers as needed. Because the primary interface is the service there's no confusion of what should go where (MVC or API). Perfect fit. Primary AJAX BackendsIf you're building rich client Web applications that are relying heavily on AJAX callbacks to serve its data, Web API is also a slam dunk. Again because much if not most of the business logic will probably end up in your Web API service logic, there's no confusion over where logic should go and there's no duplication. In Single Page Applications (SPA), typically there's very little HTML based logic served other than bringing up a shell UI and then filling the data from the server with AJAX which means the business logic required for data retrieval and data acceptance and validation too lives in the Web API. Perfect fit. Generic HTTP EndpointsAnother good fit are generic HTTP endpoints that to serve data or handle 'utility' type functionality in typical Web applications. If you need to implement an image server, or an upload handler in the past I'd implement that as an HTTP handler. With Web API you now have a well defined place where you can implement these types of generic 'services' in a location that can easily add endpoints (via Controller methods) or separated out as more full featured APIs. Granted this could be done with MVC as well, but Web API seems a clearer and more well defined place to store generic application services. This is one thing I used to do a lot of in my own libraries and Web API addresses this nicely. Great fit. Mixed HTML and AJAX Applications: Not a clear Choice For all the commonality that Web API and MVC share they are fundamentally different platforms that are independent of each other. A lot of people have asked when does it make sense to use MVC vs. Web API when you're dealing with typical Web application that creates HTML and also uses AJAX functionality for rich functionality. While it's easy to say that all 'service'/AJAX logic should go into a Web API and all HTML related generation into MVC, that can often result in a lot of code duplication. Also MVC supports JSON and XML result data fairly easily as well so there's some confusion where that 'trigger point' is of when you should switch to Web API vs. just implementing functionality as part of MVC controllers. Ultimately there's a tradeoff between isolation of functionality and duplication. A good rule of thumb I think works is that if a large chunk of the application's functionality serves data Web API is a good choice, but if you have a couple of small AJAX requests to serve data to a grid or autocomplete box it'd be overkill to separate out that logic into a separate Web API controller. Web API does add overhead to your application (it's yet another framework that sits on top of core ASP.NET) so it should be worth it .Keep in mind that MVC can generate HTML and JSON/XML and just about any other content easily and that functionality is not going away, so just because you Web API is there it doesn't mean you have to use it. Web API is not a full replacement for MVC obviously either since there's not the same level of support to feed HTML from Web API controllers (although you can host a RazorEngine easily enough if you really want to go that route) so if you're HTML is part of your API or application in general MVC is still a better choice either alone or in combination with Web API. I suspect (and hope) that in the future Web API's functionality will merge even closer with MVC so that you might even be able to mix functionality of both into single Controllers so that you don't have to make any trade offs, but at the moment that's not the case. Some Issues To think about Web API is similar to MVC but not the Same Although Web API looks a lot like MVC it's not the same and some common functionality of MVC behaves differently in Web API. For example, the way single POST variables are handled is different than MVC and doesn't lend itself particularly well to some AJAX scenarios with POST data. Code Duplication I already touched on this in the Mixed HTML and Web API section, but if you build an MVC application that also exposes a Web API it's quite likely that you end up duplicating a bunch of code and - potentially - infrastructure. You may have to create authentication logic both for an HTML application and for the Web API which might need something different altogether. More often than not though the same logic is used, and there's no easy way to share. If you implement an MVC ActionFilter and you want that same functionality in your Web API you'll end up creating the filter twice. AJAX Data or AJAX HTML On a recent post's comments, David made some really good points regarding the commonality of MVC and Web API's and its place. One comment that caught my eye was a little more generic, regarding data services vs. HTML services. David says: I see a lot of merit in the combination of Knockout.js, client side templates and view models, calling Web API for a responsive UI, but sometimes late at night that still leaves me wondering why I would no longer be using some of the nice tooling and features that have evolved in MVC ;-) You know what - I can totally relate to that. On the last Web based mobile app I worked on, we decided to serve HTML partials to the client via AJAX for many (but not all!) things, rather than sending down raw data to inject into the DOM on the client via templating or direct manipulation. While there are definitely more bytes on the wire, with this, the overhead ended up being actually fairly small if you keep the 'data' requests small and atomic. Performance was often made up by the lack of client side rendering of HTML. Server rendered HTML for AJAX templating gives so much better infrastructure support without having to screw around with 20 mismatched client libraries. Especially with MVC and partials it's pretty easy to break out your HTML logic into very small, atomic chunks, so it's actually easy to create small rendering islands that can be used via composition on the server, or via AJAX calls to small, tight partials that return HTML to the client. Although this is often frowned upon as to 'heavy', it worked really well in terms of developer effort as well as providing surprisingly good performance on devices. There's still plenty of jQuery and AJAX logic happening on the client but it's more manageable in small doses rather than trying to do the entire UI composition with JavaScript and/or 'not-quite-there-yet' template engines that are very difficult to debug. This is not an issue directly related to Web API of course, but something to think about especially for AJAX or SPA style applications. Summary Web API is a great new addition to the ASP.NET platform and it addresses a serious need for consolidation of a lot of half-baked HTTP service API technologies that came before it. Web API feels 'right', and hits the right combination of usability and flexibility at least for me and it's a good fit for true API scenarios. However, just because a new platform is available it doesn't meant that other tools or tech that came before it should be discarded or even upgraded to the new platform. There's nothing wrong with continuing to use MVC controller methods to handle API tasks if that's what your app is running now - there's very little to be gained by upgrading to Web API just because. But going forward Web API clearly is the way to go, when building HTTP data interfaces and it's good to see that Microsoft got this one right - it was sorely needed! Resources ASP.NET Web API AspConf Ask the Experts Session (first 5 minutes) © Rick Strahl, West Wind Technologies, 2005-2012Posted in Web Api Tweet !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

Search Results

Search found 6781 results on 272 pages for 'src'.

Page 153/272 | < Previous Page | 149 150 151 152 153 154 155 156 157 158 159 160 | Next Page >

- by Anders Svensson

- by algorithmicCoder

- by Mayhem

- by Kinyanjui Kamau

- by ClarkSKent

- by cRaZiRiCaN

- by Tenshiko

- by djreed

- by user435377

- by sex stevens

- by jbarz

- by nicmare

- by Ultimate

- by Sirojan Gnanaretnam

- by Timothy Bilodeau

- by Johua

- by sharataka

- by ThatMacLad

- by femi

- by TheOnly92

- by Sirius Mane

- by SeanMcAlinden

- by Rick Strahl

- by Rick Strahl

- by Rick Strahl

< Previous Page | 149 150 151 152 153 154 155 156 157 158 159 160 | Next Page >