Asp.Net MVC4 Return Date and Time from Controller to View

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.

Answer 2

You can try this:

C#

[HttpPost] // Why do you need to use POST method?
public JsonResult Nuevo()
{
     return Json(new { Fecha = DateTime.Now, Hora = DateTime.Now });
     // if use get: return Json(object, JsonRequestBehavior.AllowGet);
}

HTML:

<button id="button-nuevo">Nuevo</button>

<h2>Registro persona</h2>
@using (Html.BeginForm("", "", FormMethod.Post, new { id = "formPersona" })){ 
   <input type="hidden" id="url-nuevo" value="@Url.Action("Nuevo", "Home")" />
   <table cellpadding="4" class="td.headerTabsColor">
     <tbody>
       <tr>
             <td><label>Fecha : </label>@Html.TextBoxFor(u => u.Fecha, new { @readonly=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 { @readonly = true })</td>  
       </tr>
     </tbody>
  </table>
}

JS

function dateFormat(d) {

   var date = d.getDate(), 
       month = d.getMonth() + 1,
       year = d.getFullYear();

   retur (month > 9 : month ? '0' + month) + "/" + (date > 9 : date ? '0' + date) + "/" + year;
} 

$('#button-nuevo').bind('click', function(event) {
    var $formContext = $('#formPersona');
    $.post($('#url-nuevo').val(), {}, function(data){

        //UPDATE
        var fecha = new Date(parseInt(data.Fecha.substr(6, 13)));
        var hora = new Date(parseInt(data.Hora.substr(6, 13)));

        $formContext.find('#Fecha').val(dateFormat(fecha));
        $formContext.find('#Hora').val(dateFormat(hora));

    }, "json");
});

Update based on this answer

Answer 3

If you are returning just a json object from the post call, you can write the success function in you ajax post back like below.

success : function(data) {
 $('#inputFecha').html(data.Fecha);
  $('#inputHora').html(data.Hora);
}

However if you are returning the view itself (which it looks like from your code), write the success function like this

success : function(data) {
 $('#formContainer').html(data); // where formContainer is the control containing your form - may be an html body.
}

EDIT

since you have posted the view, change the Html.TextBoxFor lines for Fecha and Hora like below and use the success function given further below,

@Html.TextBoxFor(u => u.Fecha, new { sololectura = true, id="inputFecha" })
@Html.TextBoxFor(u => u.Hora, new { sololectura = true, id="inputHora" })

success : function(data) {
     $('#inputFecha').html(data.Fecha);
      $('#inputHora').html(data.Hora);
}

Answer 4

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

Answer 5

Hi if i'm correct the problem is that the textbox values remain empty after you fired the function. The reason behind this is that your javascript function returns the data in the

success : function() {} part.
So what you have to do is return some kind of Json and then place the correct values in the textbox.

Javascript:

$.ajax({
   url: '@Url.Action("Nuevo", "Home")',
   type: 'POST',
   success: function(data) {
   //Do stuff with your data 
  }
});

c#:

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