0

Asp.Net MVC4を使用していますが、クライアントではなくサーバーから日付と時刻を取得する必要があります。ビュー内のボタンをクリックする必要があるときにそれらを復元するには、たとえばボタンの名前「Nuevo」と定義したビューから、アクションでjavascriptによって呼び出され、コントローラー（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>

受信すると、次のようにNewActionResultのデータコントローラーが表示されます。

[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]ボタンをクリックして）。デフォルトのサーバーの時刻と日付を別のテキストボックスにロードします。

この例を実行すると、新しいActionResultが入力されますが、データに戻ってTextBoxが無効であることを確認するために、他のフィールドと同じ結果を試しました。

この問題に関する提案やヘルプ。

よろしく

リカルド

4

5 に答える 5

1

基本的に、AJAXアクションを作成するときに通常使用する2つの異なるルートがあります。サーバーにHTMLをレンダリングさせるか、データをブラウザーに返送してブラウザーにHTMLをレンダリングさせることです。あなたが投稿したコードは2つが混在しているため、機能していません。jQuery AJAX呼び出しは、サーバーからのJSONデータを期待していますが、サーバーはViews\Home\Nuevo.cshtmlビューによってレンダリングされたHTMLを送信しています。これらの2つの異なるアプローチがどのように見えるかを見てみましょう。

サーバーレンダリングアプローチ

結果を表示する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)してデータをブラウザーに送り返します。

さらにいくつかのメモ...

Fecha.NET DateTime構造体は、日付と時刻の両方の情報を保持するため、個別の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オブジェクトだけを返す場合は、以下のようにajaxpostにsuccess関数を書き込むことができます。

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

これは私のビューです。型付きビューを使用します。

@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 に答える
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 に答える