Question

I am working with Asp.Net MVC4, I need to retrieve the date and time from the server and not the client. To restore them when I must click a button in the view, for example the name of the button “Nuevo” and from the view so I defined, the event is called by javascript in Action define the controller (Home) and ActionResult (Nuevo):

<script type= "text/javascript">
    function Nuevo() {
        $.ajax({
           url: '@Url.Action("Nuevo", "Home")',
           type: 'POST',
           contentType: 'application/json; charset=utf-8',
           dataType: 'json',
           data: JSON.stringify({ }),
           success: function () {}
        });
     }
</script>

On receipt the data controller in the New ActionResult as follows:

[HttpPost]
public ActionResult Nuevo()
{
     Persona persona = new Persona();
     persona.Fecha = DateTime.Now;
     persona.Hora = DateTime.Now;
     return View(persona);
}

This is my view, I use typed views:

@model MvcJavaScript.Models.Persona
<script type= "text/javascript">
    function Nuevo() {
        $.ajax({
            url: '@Url.Action("Nuevo", "Home")',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            data: JSON.stringify({}),
            success: function (data) {
            }
        });
    } 
</script>
<h2>Registro persona</h2>
@using (Html.BeginForm("", "", FormMethod.Post, new { id = "formPersona" })){ 
   <table cellpadding="4" class="td.headerTabsColor">
     <tbody>
       <tr>
             <td><label>Fecha : </label>@Html.TextBoxFor(u => u.Fecha, new { sololectura = true })</td> 
       </tr> 
       <tr>
         <td><label>Sexo : </label>@Html.TextBoxFor(u => u.Sexo, new { style = "width:225px", sololectura = false })</td>
       </tr>
       <tr>
            <td><label>Hora : </label>@Html.TextBoxFor(u => u.Hora, new { sololectura = true })</td>  
       </tr>
     </tbody>
  </table>
}

What I need to do is to insert a new record (by clicking on the button “Nuevo”) I load the default server time and date in different textbox.

Running this example enters the New ActionResult but to return to the data to view the TextBox is void, I tried other fields and the same result.

Any suggestions or help with this problem.

regards

Ricardo

Answer 1

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 Views\Home\Nuevo.cshtml view. Let’s look at what these two different approaches might look like.

Server-Rendered Approach

You need to add an HTML element that will display the result. We will call it NuevoResult. And we also need some code that will put the response there. The easiest way is jQuery’s .html() method.

<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>

We also need a Views\Home\Nuevo.cshtml view for the server to render. It might look like:

@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>

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 return PartialView(persona) instead of return View(persona).

Browser-Rendered Approach

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.

<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>

And then in the MVC action, use return Json(persona) to send the data back to the browser.

A few more notes…

The .NET DateTime structure holds both date and time information, so there’s no need to have separate Fecha and Hora properties. Consider replacing with a single CreatedTimestamp property.

If you’re still having trouble, Firefox’s Firebug extension, Internet Explorer’s Developer Tools, and Chrome’s Developer Tools can be very helpful in figuring out what is wrong, allowing you to see exactly what was returned from the server.