Populate partial view with model data using Ajax

Question

I have a partial view that has a text box and submit button. The partial view is loading when the form loads because the user can insert an ID to get data or insert the data. All of the text boxes in the partial view need to be populated from the database if a match is found. If not, then the user enters the data. I am not receiving any errors. It just isn't populating the text boxes. I have tracked the process in developers tools via the Network tab but I am not seeing the ajax call.Any thoughts on what I am doing wrong?

Controller:

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

Main View

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

Partial View

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

Answer 1

check this code, I have tested this code and is working fine.

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>

Controller

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