JSON returned using Json() by jquery $.post()

Question

I can't work out what I'm doing wrong - I'm sure this used to work...:

<script type="text/javascript">
  $("#@containerId form").submit(function (event) {
    event.preventDefault();
    var form = $(this);
    if (form.valid()) {
      $.post(form.attr('action'), form.serialize(), function(data) {
        $("#@containerId").replaceWith(data.result);
      }, "json");
    }
  });      
</script>

I have a function that returns a view result as a string so I can return it as an object within the JSON response:

protected string RenderViewResultToString(ViewResultBase viewResult) {
  using (var sw = new StringWriter()) {
    if (string.IsNullOrEmpty(viewResult.ViewName))
      viewResult.ViewName = ControllerContext.RouteData.GetRequiredString("action");
    ViewEngineResult result = null;
    if (viewResult.View == null) {
      result = viewResult.ViewEngineCollection.FindPartialView(ControllerContext, viewResult.ViewName);
      if (result.View == null)
        throw new InvalidOperationException("Unable to find view. Searched in: " + string.Join(",", result.SearchedLocations));
      viewResult.View = result.View;
    }
    var view = viewResult.View;
    var viewContext = new ViewContext(ControllerContext, view, viewResult.ViewData, viewResult.TempData, sw);
    view.Render(viewContext, sw);
    if (result != null)
      result.ViewEngine.ReleaseView(ControllerContext, view);
    return sw.ToString();
  }
}

So, in my controller I have:

    [HttpPost, ValidateInput(false)]
    public JsonResult Edit(/* stuff */) {
        bool success = true;
        try {
            /* stuff */         
        } catch {
            /* stuff */
            success = false;
        }
        return Json(new { success, result = RenderViewResultToString(/* stuff - call to something that gives a ViewResult */) });
    }

In Chrome, I get: "Resource interpreted as Document but transferred with MIME type application/json." and it renders the JSON in the browser as text. In Firefox/IE, it prompts me to download a file.

What gives?

Brian Nickel · Accepted Answer · 2011-10-14 15:38:34Z

2

The form submission isn't getting suppressed. The messages you are getting are from an actual form submission to a page that returns JSON. If you check the browser address bar, you should see the URL is different.

If you run $("#@containerId form") in the console, you should see that you're getting no results. "@" is an invalid character in a selector and needs to be escaped. $("#\\@containerId form") should work.

answered Oct 14, 2011 at 15:38

Brian Nickel

27.6k5 gold badges83 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

enashnash Over a year ago

Yes the address does change. The @ is razor syntax, it outputs a valid id, so that isn't the problem.

enashnash Over a year ago

I thought event.preventDefault(); was supposed to suppress the form submission?

Brian Nickel Over a year ago

Are you positive that your submit method is getting called? Try adding an alert to the beginning. If it isn't, open it up in the console and see if the actual selector returns a result. If it is, try return false; instead of event.preventDefault(); The submit function is really old and this should work.

enashnash Over a year ago

Ah, although containerId should have been windowId in my case - I am using a Telerik window and it was being created in a separate place on the page - what a fool! Thank you for the console tip.

Collectives™ on Stack Overflow

JSON returned using Json() by jquery $.post()

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related