Monday, March 28, 2011

ASP.NET MVC scenario, similar to 'Post your answer' on StackOverflow

Hello,

I have a requirement to add commenting system to a page (similar to 'Post your answer' at the bottom of any SO question). What is the optimal way to implement this? Should I render the partial view with Ajax or should I just pass the Json data to server? In the latter case I don't quite get how I should add newly added comment to the bottom of existing comments.

I'm very very new to ASP.NET MVC, and don't quite feel solid with ajax patterns. Also, I heard, that the pillar of unobtrusive JavaScript is that your page should be first developed w/out JavaScript and be fully functional and only after that developer should add JavaScript and enhance the experience. Is this generally true and is this true in above particular case?

Thank you.

PS. I'm using jQuery.

From stackoverflow
  • Watch Phil Haack's presentation for PDC, where he builds HaackOverflow :)

    Get the video here: http://channel9.msdn.com/pdc2008/PC21/

    He demonstrates using the built-in AJAX functionality to submit a question, and have it automatically added to the bottom of the existing questions.

    Simucal : Awesome link Brannon, thanks.
    Brannon : Thank @haacked for an entertaining presentation :) I just remembered the link.
  • I typically would use JSON as my AJAX data type. JSON (JavaScript Object Notation) it works much like XML but it uses about 70% less data. You will also find it easier to parse in your javascript. You don't have to initialize date/number objects from xml!

    { "people": [
      { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
      { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
      { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
    ]}
    

    Thanks IBM For The Example

    <people>
      <person>
        <firstName>Brett</firstName>
        <lastName>McLaughlin</lastName>
        <email>brett@newInstance.com</email >
      </person>
      <person>
        <firstName>Jason</firstName>
        <lastName>Hunter</lastName>
        <email>jason@servlets.com</email >
      </person>
      <person>
        <firstName>Elliotte</firstName>
        <lastName>Harold</lastName>
        <email>elharo@macfaq.com</email >
      </person>
    </people >
    

    I have found the MVC JSON framework has some shortfalls, in regards to Serialization, De serialization, & Ignore Member Attributes. I have found Json.NET project on codeplex. it seams to fill all the functionality gaps that MVC JSON doesn't cover.

    So in your controller, i am using Json.NET, please note that the output is ContentResult and it Does Not have a View

     public ContentResult ProcessRequestAction(string Email, string Password)
     {
         Product product = new Product();
         product.Name = "Apple";
         product.Expiry = new DateTime(2008, 12, 28);
         product.Price = 3.99M;
         product.Sizes = new string[] { "Small", "Medium", "Large" };
         return Content(JavaScriptConvert.SerializeObject(product));
     }
    

    Typical JQuery Code, for JSON request

          $.ajax({
                type: "POST", /* GET OR POST */
                url: "JSON_MVC_URL_HERE", /* your url here */
                dataType: "json", /* json or xml */
                data: null, /* JSON CODE HERE TO SET GET OR POST BACK PARAMS */
                success: function(data){
                    alert(data.Name); /* Gets Name Element */
                    alert(data.Expiry); /* Gets Expiry Element */
                    alert(data.Price); /* Gets Price Element */
                    jQuery.each(data.Sizes, function() { /* Get Each Size */
                        alert(this);
                    });
                }
            });
    

    $.getJSON also works but lacks http request type POST/GET

  • in response to the 2nd paragraph:

    yes, i'd suggest developing the app without any ajax/js of any sort. make sure the actions work and function correctly. then add the ajax (for UX) later. this approach may also lend itself to inspiring you about how to have the app fall back to the non-ajax method for non-js-enabled users (like mobile phones)

  • Use disqus: http://www.disqus.com

    Trevor de Koekkoek : -1? Have you tried disqus? It's worth taking a look
    fretje : +1: You indeed don't deserve a downvote... disqus is a worthy alternative.

0 comments:

Post a Comment