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>

Your ajax call is returning a view, therefore your need to update the DOM with that view in the success callback - success: function (data) { $(someElement).html(data); }. The code you currently using is based on the method returning json — user3559349
– user3559349, Commented Dec 15, 2017 at 20:49
Would it be better performance utilizing JSON. I do not want the form to postback that is why i am using the partial view. Is it possible without a partial view by using JSON? — user2448412
– user2448412, Commented Dec 15, 2017 at 20:51
Yes, returning a JsonResult will improve performance slightly (because you sending a bit less data across the wire), but its probably insignificant. — user3559349
– user3559349, Commented Dec 15, 2017 at 20:54
Json will be better since your server is not generating the whole partial view. Your client's browser will be doing all the update thus its good for your server load. But for your particular partial view the amount of improvement is likely not noticeable — Steve
– Steve, Commented Dec 15, 2017 at 21:25

Arjun Prakash · Accepted Answer · 2017-12-21 04:24:24Z

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

edited Dec 21, 2017 at 4:24

answered Dec 16, 2017 at 5:47

Arjun Prakash

6919 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user2448412 Over a year ago

I changed it to use the JSON result in the controller but it still isn't displaying the data.

user2448412 Over a year ago

I updated the original code question to reflect the updates. I am using Json to attempt to populate the input values from the database.

Arjun Prakash Over a year ago

check with the modified answer

Arjun Prakash Over a year ago

do you debug your query give result from db ?

Arjun Prakash Over a year ago

and you cannot call partial view as Html.RenderAction because the _LoadGameInfo returning JSON result.

Collectives™ on Stack Overflow

Populate partial view with model data using Ajax

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related