Asp.Net MVC4 从控制器返回日期和时间到视图

Question

我正在使用 Asp.Net MVC4，我需要从服务器而不是客户端检索日期和时间。要在我必须单击视图中的按钮时恢复它们，例如按钮“Nuevo”的名称，并且从我定义的视图中，事件由 javascript 在 Action 定义控制器 (Home) 和 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>

在收到新 ActionResult 中的数据控制器后，如下所示：

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

这是我的观点，我使用类型化的观点：

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

我需要做的是插入一条新记录（通过单击“Nuevo”按钮）我在不同的文本框中加载默认的服务器时间和日期。

运行这个例子进入New ActionResult但是返回数据查看TextBox是无效的，我尝试了其他字段和相同的结果。

关于这个问题的任何建议或帮助。

问候

里卡多

Answer 1

在创建 AJAX 操作时通常采用两种不同的方式：让服务器呈现 HTML，或者只是将数据发送回浏览器并让浏览器呈现 HTML。您发布的代码是两者的混合 - 这就是它不起作用的原因。 jQuery AJAX 调用期望从服务器返回 JSON 数据，但服务器正在发送由 Views\Home\Nuevo.cshtml 视图呈现的 HTML。让我们看看这两种不同的方法可能是什么样子。

服务器渲染方法

您需要添加一个 HTML 元素来显示结果。我们称之为NuevoResult。我们还需要一些将响应放在那里的代码。最简单的方法是jQuery的.html()方法。

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

我们还需要一个Views\Home\Nuevo.cshtml 视图供服务器渲染。它可能看起来像：

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

这是我们想要从此操作返回的所有 HTML。我们不希望它被包裹在任何布局中。为此，我们需要确保我们使用return PartialView(persona) 而不是return View(persona)。

浏览器渲染方法

对于浏览器呈现的方法，我们将继续在浏览器上准备好 HTML，但要隐藏。我们将填写正确的信息并在收到服务器响应时显示。

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

然后在 MVC 动作中，使用return Json(persona) 将数据发送回浏览器。

还有一些注意事项...

.NET DateTime 结构同时包含日期和时间信息，因此无需拥有单独的 Fecha 和 Hora 属性。考虑用单个 CreatedTimestamp 属性替换。

如果您仍然遇到问题，Firefox's Firebug extension、Internet Explorer's Developer Tools 和 Chrome's Developer Tools 可以非常有助于找出问题所在，让您准确查看从服务器返回的内容。

Answer 2

您好，如果我是正确的，问题是您触发该函数后文本框的值仍然为空。这背后的原因是您的 javascript 函数返回

success : function() {} 部分中的数据。
所以你要做的就是返回某种 Json，然后在文本框中放置正确的值。

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

Answer 3

这是我的观点，我使用类型化的观点：

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

如果你只是从 post 调用中返回一个 json 对象，你可以在你的 ajax post back 中编写成功函数，如下所示。

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

但是，如果您要返回视图本身（从您的代码中看起来），请像这样编写成功函数

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

编辑

既然您已经发布了视图，请像下面一样更改 Fecha 和 Hora 的 Html.TextBoxFor 行，并使用下面进一步给出的成功函数，

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

你可以试试这个：

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

更新基于此answer