2017-12-15 10 views
0

部分的にテキストボックスと送信ボタンがあります。ユーザーがIDを挿入してデータを取得したり、データを挿入できるため、フォームがロードされたときに部分ビューがロードされます。一致が見つかった場合は、部分ビュー内のすべてのテキストボックスをデータベースから取り込む必要があります。そうでない場合、ユーザはデータを入力する。私は何の誤りもありません。それは単にテキストボックスに値を設定していません。私は開発者ツールのプロセスをNetworkタブで追跡しましたが、私はajax呼び出しを見ていません。私が間違っていることについての考えはありますか?Ajaxを使用して部分データをモデルデータに取り込みます

コントローラー:

[HttpGet] 
public JsonResult _LoadGameInfo(string gameData) 
    { 
     var results = (from c in db.Games 
        where c.game_id == gameData 
        select new Game 
        { 
         game_id=c.game_id, 
         level=c.level, 
         game_date=c.game_date, 
         game_time=c.game_time, 
         game_leader=c.game_leader, 
         hold_time=c.hold_time 
        }).FirstOrDefault(); 

      return Json(results, JsonRequestBehavior.AllowGet); 
    } 

メインビュー

@model GameCard.Models.Game 

@{ 
    ViewBag.Title = "Game Time"; 
} 

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 
    <div class="jumbotron"> 
     <h3>Game Time</h3> 

     <div id="Partial">@{Html.RenderAction("_LoadGameInfo");}</div> 


     <fieldset>     

      <div class='row'> 
       <div class='col-sm-1'> 
        @Html.CheckBoxFor(m => m.lookup, new { @class = "form-control" }) 
       </div> 
       <div class='col-sm-9'> 

         <label class="label-medium"> Look up account </label>      
       </div> 

       <div class='col-sm-3'> 

       </div> 
      </div> 



      <div class='row'> 
       <div class='col-sm-6'> 
        <div class='form-group'> 
         <h5>Rate Game</h5> 
        </div> 
       </div> 
       <div class='col-sm-6'> 
        <div class='form-group'> 
         <div class="btn-group" data-toggle="buttons"> 
          <label class="pdsa-radiobutton btn btn-default active"> 
           @Html.RadioButtonFor(m => m.rate_High, "10") 10 
          </label> 
          <label class="pdsa-radiobutton btn btn-default active"> 
           @Html.RadioButtonFor(m => m.rate_Low, "1") 1 
          </label> 

         </div> 
        </div> 
        <div class='col-sm-2'> 

        </div> 
       </div> 
      </div> 






     </fieldset> 

     <fieldset> 
      <h4>Comments</h4> 

      <div class='row'> 
       <div class='col-sm-12'> 
        <div class='form-group'> 
         @Html.TextAreaFor(m => m.overall_comments, new { @class = "form-control", placeholder = "Comments" }) 
        </div> 
       </div> 
      </div> 


      <div class='form-inline'> 
       <label for="score">Score:</label> 

       @Html.TextBoxFor(m => m.score, new { @class = "form-control score" }) 

      </div> 
     </fieldset> 
     <br /> 
     <div style="text-align:center;"> 
      <fieldset> 
       <div class="form-group"> 
        <div class="col-sm-12"> 
         <input type="submit" value="Submit" class="btn btn-success btn-lg" /> 


        </div> 
       </div> 
      </fieldset> 
     </div> 
    </div> 
} 

@*</div>*@  




     @section Scripts { 
      <script type="text/javascript"> 
       $(function() { 
        //call date picker & call review datepicker 
        $('#call-datepicker, #review-datepicker').datetimepicker({ 
         format: 'MM/DD/YYYY' 
        }); 
        //time picker 
        $('#timepicker3').timepicker({ 
         minuteStep: 5, 
         showInputs: false, 
         disableFocus: true, 
         defaultTime: 'current' 
        }); 

        //mask input field for 
        $('#txtGameCallID, #game_id').mask('a*_999999_9999'); 
       }); 

$(document).ready(function() { 
     $("#btnSearchGameID").click(function() { 
     var gameData = $('#txtSearchGameID').val(); 
     $.ajax({ 
      cache: 'false', 
      type: "GET", 
      data: { "gameData": gameData }, 
      url: '@Url.Action("_LoadGameInfo", "Games")', 
      dataType: 'html', // add this line 
      "success": function (results) { 
       if (results != null) { 

        $("#game_id").val(results.game_id); 
        $("#game_date").val(results.game_date); 
        $("#game_time").val(results.game_time); 
        $("#game_leader").val(results.game_leader); 
        $("#hold_time").val(results.hold_time); 
        $("#level").val(results.level); 
       } 
      } 
     }); 
    }); 
}); 



      </script> 
     } 

部分図

@model GameCard.Models.Game 

<fieldset> 
    <div class="well well-sm"> 
     <div class='row'> 
      <div class='col-sm-4'> 
      <br /> 
      <div class='form-group'> 
       Game ID Look Up: 
       @Html.TextBox("SearchGameID", "", new { @class = "form-control", id = "txtSearchGameID" }) 
      </div> 
      </div> 
      <div class='col-sm-4'> 
      <br /><br /> 
      <div class='form-group'> 

       <input type="submit" value="Get Results" id="btnSearchGameID" class="btn btn-info btn-lg " /> 
      </div> 
     </div> 
     <div class='col-sm-4'></div> 
     </div> 
    </div> 
    <hr class="style1" /> 
</fieldset><br /> 
<fieldset> 

<h4>Game Info</h4> 



<div class='row'> 
    <div class='col-sm-4'> 
     <div class='form-group'> 
      Game ID 
      @Html.TextBoxFor(m => m.game_id, new { @class = "form-control" }) 

     </div> 
    </div> 
    <div class='col-sm-4'> 
     <div class='form-group'> 
      <label for="game_date">Game Date</label> 
      <div class="input-group date" id="call-datepicker"> 
       @Html.TextBoxFor(m => m.game_date, new { @class = "form-control datetimepicker " }) 

      </div> 
     </div> 

    </div> 
    <div class='col-sm-4'> 
     <div class='form-group'> 
      <label> Time of Game</label> 
      <div class="input-group bootstrap-timepicker timepicker"> 

       @Html.TextBoxFor(m => m.game_time, new { @class = "form-control input-small ", @id = "timepicker3" }) 
      </div> 
     </div> 

    </div> 
</div> 

<div class='row'> 
    <div class='col-sm-4'> 
     <div class='form-group'> 
      <label for="game_leader">Game Leader</label> 
      @Html.DropDownListFor(m => m.game_leader, GameCard.Models.GameLeaders.GetGameLeaders(), "Select One", new { @class = "form-control" }) 

     </div> 
    </div> 

    </div> 

    </div> 
</div> 


<div class='row'> 

    <div class='col-sm-4'> 
     <div class='form-group'> 
      Hold Time 
      @Html.TextBoxFor(m => m.hold_time, new { @class = "form-control" }) 
     </div> 
    </div> 
    <div class='col-sm-4'> 
     <div class='form-group'> 
      Level 
      @Html.TextBoxFor(m => m.level, new { @class = "form-control" }) 
     </div> 
    </div> 
    </div> 

    <div class='row'> 
     <div class='col-sm-4'> 
      <div class='form-group'> 
       <label for="team_leader">Gamer ID</label> 
       @Html.TextBoxFor(m => m.gamer_id, new { @class = "form-control" }) 

      </div> 
     </div> 

    </div> 

+0

あなたのAJAX呼び出しが成功コールバックでそのビューを持つDOM更新するには、したがって、あなたの必要性をビューを返している - '成功:機能(データを){ $(someElement).html(data); } '。現在使用しているコードはjsonを返すメソッドに基づいています –

+0

JSONを使用する方がパフォーマンスが向上するでしょうか。私はポストバックにフォームを望んでいないので、私は部分ビューを使用しています。 JSONを使用して部分的な表示なしでも可能ですか? – user2448412

+0

はい、 'JsonResult'を返すと少しパフォーマンスが向上しますが(ワイヤ全体に渡って少し少ないデータを送信するため)、それはおそらく重要ではありません。 –

答えて

1

このコードを確認して、このコードをテストして正常に動作しています。

AJAX

<script> 
    $(function() { 
     var gameData = "123"; 
     $.ajax({ 
      cache: 'false', 
      type: "GET", 
      data: { gameData: gameData }, 
      url: '@Url.Action("_LoadGameInfo", "Home")', 
      success: function (result) { 
       alert(result.game_id+','+result.level) 
      }, 
      error: function (results) 
      { 
       alert('er') 
      } 
     }); 


    }); 

</script> 

コントローラ

[HttpGet] 
     public JsonResult _LoadGameInfo(string gameData) 
     { 
      var results = new Game { game_id=1,level="lev1"}; 
      return Json(results, JsonRequestBehavior.AllowGet); 
     } 
+0

コントローラーでJSON結果を使用するように変更しましたが、まだデータを表示していません。 – user2448412

+0

コントローラとjsの両方のコードを共有してください –

+0

[0] –

関連する問題