0

我正在使用 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是无效的，我尝试了其他字段和相同的结果。

任何有关此问题的建议或帮助。

问候

里卡多

4

5 回答 5

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 的 Firebug 扩展程序、Internet Explorer 的开发人员工具和Chrome 的开发人员工具可以非常有助于找出问题所在，让您准确查看从服务器返回的内容。

于 2012-12-27T16:17:01.707 回答
0

嗨，如果我是正确的，问题是在您触发该函数后文本框值仍然为空。这背后的原因是您的 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);
}
于 2012-12-27T14:56:05.420 回答
0

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

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);
}
于 2012-12-27T15:38:41.647 回答
0

你可以试试这个：

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

根据这个答案更新

于 2012-12-27T20:09:31.303 回答
0

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

@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>
}
于 2012-12-27T16:18:46.863 回答