Question

I am trying to send some serialized data to the view and bind it to the knockout code. I am using json.net library for serialization because I want to pass the constants of an enum to the view ( and not the underlying integers.) I am not sure how my controller returning Json data should look like. Here is the sample code:

My view model that will be serialized:

public class FranchiseInfoViewModel
    {

        public string FolderName { get; set; }

        [JsonConverter(typeof(StringEnumConverter))]
        public LobbyTemplateOptions LobbyTemplate { get; set; }

        public List<LobbyTemplateOptions> LobbyTemplates { get; set; }

        public void Initialize()
        {
            FolderName = "Test";

            LobbyTemplate = LobbyTemplateOptions.G;
            LobbyTemplates = new List<LobbyTemplateOptions>
                                 {
                                     LobbyTemplateOptions.G,
                                     LobbyTemplateOptions.H,
                                     LobbyTemplateOptions.I
                                 };

Enum:

[JsonConverter(typeof(StringEnumConverter))]
    public enum LobbyTemplateOptions
    {
        G = 7,
        H = 8,
        I = 9
    }

My knockout code:

$(function () {
    omega.FranchiseInfo = (function () {
        var FolderName = ko.observable();
        var LobbyTemplates = ko.observableArray([]);

        $.getJSON("FranchiseData", function (data) {
            FolderName(data.FolderName);

            for (var i = 0; i < data.LobbyTemplate.length; i++) {
               LobbyTemplates.push(data.LobbyTemplate[i]);
            }
        });

        return {
            folderName: FolderName,

            lobbyTemplates: LobbyTemplates
        }
    } ());
    ko.applyBindings(omega.FranchiseInfo);
})

        }

I am wondering how my controller that passes serialized Json data to the view should look like as I have not used json.net and I am relatively new to programming:

Controller passing the Json data to the view:

 public JsonResult FranchiseData()
            {
                FranchiseInfoViewModel franchiseInfoViewModel = new FranchiseInfoViewModel();
                franchiseInfoViewModel.MapFranchiseInfoToFranchiseInfoViewModel();
                string json = JsonConvert.SerializeObject(franchiseInfoViewModel);

                // this is how I do it with the default Json serializer
               // return Json(franchiseInfoViewModel, JsonRequestBehavior.AllowGet);
            }

I would be very gratefull if somebody can post a working example of my controller. Thank You!

Answer 1

You need to implement JsonNetResult.

public class JsonNetResult : ActionResult
{
  public Encoding ContentEncoding { get; set; }
  public string ContentType { get; set; }
  public object Data { get; set; }

  public JsonSerializerSettings SerializerSettings { get; set; }
  public Formatting Formatting { get; set; }

  public JsonNetResult()
  {
    SerializerSettings = new JsonSerializerSettings();
  }

  public override void ExecuteResult(ControllerContext context)
  {
    if (context == null)
      throw new ArgumentNullException("context");

    HttpResponseBase response = context.HttpContext.Response;

    response.ContentType = !string.IsNullOrEmpty(ContentType)
      ? ContentType
      : "application/json";

    if (ContentEncoding != null)
      response.ContentEncoding = ContentEncoding;

    if (Data != null)
    {
      JsonTextWriter writer = new JsonTextWriter(response.Output) { Formatting = Formatting };

      JsonSerializer serializer = JsonSerializer.Create(SerializerSettings);
      serializer.Serialize(writer, Data);

      writer.Flush();
    }
  }
}

To use it, in your case you need to rewrite controller method in this way:

public ActionResult FranchiseData()
{
    FranchiseInfoViewModel franchiseInfoViewModel = new FranchiseInfoViewModel();
    franchiseInfoViewModel.MapFranchiseInfoToFranchiseInfoViewModel();

    JsonNetResult jsonNetResult = new JsonNetResult();
    jsonNetResult.Formatting = Formatting.Indented;
    jsonNetResult.Data = franchiseInfoViewModel;

    return jsonNetResult;
}

(implementation of JsonNetResult above was taken this blog post
http://james.newtonking.com/archive/2008/10/16/asp-net-mvc-and-json-net.aspx )