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

Yes Andres descalzo I need only date and time display en textbox but this from server no from client — raranibar, Dec 27 '12 at 19:33
With the attribute "sololectura" you want to make it read-only input? — andres descalzo, Dec 27 '12 at 20:10
for read-only attibute http://stackoverflow.com/questions/2539069/can-i-set-text-box-to-readonly-when-using-html-textboxfor — andres descalzo, Dec 27 '12 at 20:17
Finally, the date and time should be informative so if you do not want the user to touch him, and then Server reasignas values "Fecha" and "Hota". because the user could edit the HTML and send the changed data. — andres descalzo, Dec 27 '12 at 20:20

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

I probe your code I have error: function not defined jsonDate — raranibar, Dec 27 '12 at 20:35

score 0 · Answer 2 · answered Dec 27 '12 at 14:56

0

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

answered Dec 27 '12 at 14:56

Syneryx

1,278
11
18

Syneryx, I probe this form in the code javascript, how I can put the value persona.Fecha and Persona.Hora in TextBox? – raranibar Dec 27 '12 at 15:17
You should use strongly typed views. Assign your view with: @model FullNamespace.Persona @Html.TextBoxFor(x=>x.Fecha); @Html.TextBoxFor(x=>x.Hora); – Thiago Custodio Dec 27 '12 at 15:25
Hi Thiago, Yes I use typed views, I put @Html.TextBoxFor(x=>x.Fecha); @Html.TextBoxFor(x=>x.Hora); but don't show me the result – raranibar Dec 27 '12 at 15:28

humblelistener · Answer 3 · 2012-12-27T18:19:24.683

0

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

edited Dec 27 '12 at 18:19

answered Dec 27 '12 at 15:38

humblelistener

1,456
12
22

No need to get the data in JSON format, I just want to retrieve date and time from the controller and load this data by default when you click the New button in the view, I put this code put part of the code to see if it is correct but if there is another way I will be grateful if I work with this problem – raranibar Dec 27 '12 at 15:58
In your sample code, you are saying to return "return View(persona);" which is going to return a HTML. However in your comment you are saying you just want the date and time object to be bound to UI. Going by the latter, you should first change your controller to return Json - as suggested by @syneryx. and then use the first success function in my answer. Note you still have to know either the name or id of the input controls to bind date and time value of Fecha and Hora correspondingly.. If you still dont understand, why dont you share your view snippet as well.. – humblelistener Dec 27 '12 at 16:03
I updated the code kpadmanabhan but don't show me in textbox the date and time this is void – raranibar Dec 27 '12 at 19:43

score 0 · Answer 4 · answered Dec 27 '12 at 16:18

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

score 0 · Answer 5 · edited May 23 '17 at 11:56

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

Thanks Andres this it work, but I have a problem with date and time the format in my textbox I view of this form: Fecha = /Date(1356641543082)/ Hora = /Date(1356641543082)/ I like use moment.js or do you know other library that format the date? — raranibar, Dec 27 '12 at 20:52
I already updated the answer for date formatting. See also the change to read-only — andres descalzo, Dec 28 '12 at 01:30

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

5 Answers5

Server-Rendered Approach

Browser-Rendered Approach

A few more notes...