使用Ajax

时间:2017-12-15 20:43:03

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

我的局部视图有一个文本框和提交按钮。部分视图在表单加载时加载,因为用户可以插入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>

1 个答案:

答案 0 :(得分: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);
        }