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>

收到New 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

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

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 4

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

@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

你可以试试这个：

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

更新

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

5 个答案:

服务器呈现方法

浏览器渲染方法

还有一些说明......