StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There are basically two different routes you usually take when creating an AJAX action: letting the server render the HTML, or just sending data back to the browser and let the browser render the HTML. The code you have posted is a mixture of the two - that's why it's not working. The jQuery AJAX call is expecting JSON data back from the server, but the server is sending the HTML rendered by the <code>Views\Home\Nuevo.cshtml</code> view. Let's look at what these two different approaches might look like.</p> <h2>Server-Rendered Approach</h2> <p>You need to add an HTML element that will display the result. We will call it <code>NuevoResult</code>. And we also need some code that will put the response there. The easiest way is jQuery's <code>.html()</code> method.</p> <pre class="lang-html prettyprint-override"><code><div id="NuevoResult"></div> <script type= "text/javascript"> function Nuevo() { $.ajax({ url: '@Url.Action("Nuevo", "Home")', type: 'POST', // ... also 'contentType' and 'data' if you're actually sending anything to the server... dataType: 'html', success: function (data) { $('#NuevoResult').html(data); } }); } </script> </code></pre> <p>We also need a <code>Views\Home\Nuevo.cshtml</code> view for the server to render. It might look like:</p> <pre class="lang-html prettyprint-override"><code>@model MyCoolNamespace.Persona <h3>New person created!</h3> <p>Created on @string.Format("{0:d}", Model.Fecha) at @string.Format("{0:t}", Model.Hora).</p> </code></pre> <p>This is all the HTML we want to return from this action. We don't want it to be wrapped in any layout. To do this, we need to make sure we <code>return PartialView(persona)</code> instead of <code>return View(persona)</code>.</p> <h2>Browser-Rendered Approach</h2> <p>For the browser rendered approach, we'll go ahead and have the HTML ready on the browser, but hidden. We'll fill it in with the correct information and display it when we receive a response from the server.</p> <pre class="lang-html prettyprint-override"><code><div id="NuevoResult" style="display:none"> <h3>New person created!</h3> <p>Created on <span id="Fecha"></span> at <span id="Hora"></span>.</p> </div> <script type= "text/javascript"> function ParseJSONDateTime(value) { // from http://stackoverflow.com/questions/206384/how-to-format-a-json-date/2316066#2316066 return new Date(parseInt(value.substr(6))); } function Nuevo() { $.ajax({ url: '@Url.Action("Nuevo", "Home")', type: 'POST', // ... also 'contentType' and 'data' if you're actually sending anything to the server... dataType: 'json', success: function (data) { $('#Fecha').text(ParseJSONDateTime(data.Fecha).toLocaleDateString()); $('#Hora').text(ParseJSONDateTime(data.Hora).toLocaleTimeString()); $('#NuevoResult').show(); } }); } </script> </code></pre> <p>And then in the MVC action, use <code>return Json(persona)</code> to send the data back to the browser.</p> <h2>A few more notes...</h2> <p>The .NET DateTime structure holds both date and time information, so there's no need to have separate <code>Fecha</code> and <code>Hora</code> properties. Consider replacing with a single <code>CreatedTimestamp</code> property.</p> <p>If you're still having trouble, <a href="https://getfirebug.com/" rel="nofollow">Firefox's Firebug extension</a>, <a href="http://msdn.microsoft.com/en-us/library/hh772704.aspx" rel="nofollow">Internet Explorer's Developer Tools</a>, and <a href="https://developers.google.com/chrome-developer-tools/" rel="nofollow">Chrome's Developer Tools</a> can be very helpful in figuring out what is wrong, allowing you to see exactly what was returned from the server.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload