使用 Ajax 使用模型数据填充局部视图答案

【问题标题】：Populate partial view with model data using Ajax使用 Ajax 使用模型数据填充局部视图
【发布时间】：2017-12-21 12:27:24
【问题描述】：

我有一个包含文本框和提交按钮的局部视图。加载表单时正在加载部分视图，因为用户可以插入 ID 来获取数据或插入数据。如果找到匹配项，则需要从数据库中填充部分视图中的所有文本框。如果不是，则用户输入数据。我没有收到任何错误。它只是没有填充文本框。我已通过“网络”选项卡在开发人员工具中跟踪了该过程，但没有看到 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>

【问题讨论】：

您的 ajax 调用正在返回一个视图，因此您需要在成功回调中使用该视图更新 DOM - success: function (data) { $(someElement).html(data); }。您当前使用的代码是基于返回json的方法
使用 JSON 会不会有更好的性能。我不希望表单回发，这就是我使用部分视图的原因。使用 JSON 是否可以不使用局部视图？
是的，返回 JsonResult 会稍微提高性能（因为您通过网络发送的数据少一点），但它可能微不足道。
Json 会更好，因为您的服务器不会生成整个部分视图。您的客户端浏览器将进行所有更新，因此对您的服务器负载有好处。但是对于您的特定部分观点，改进的数量可能并不明显

标签： c# ajax asp.net-mvc razor

【解决方案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);
        }

【讨论】：

我将其更改为在控制器中使用 JSON 结果，但它仍然不显示数据。
我更新了原始代码问题以反映更新。我正在使用 Json 尝试从数据库中填充输入值。
检查修改后的答案
你是否调试你的查询并从 db 得到结果？
并且您不能将部分视图称为 Html.RenderAction，因为 _LoadGameInfo 返回 JSON 结果。