部分的にテキストボックスと送信ボタンがあります。ユーザーが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>
あなたのAJAX呼び出しが成功コールバックでそのビューを持つDOM更新するには、したがって、あなたの必要性をビューを返している - '成功:機能(データを){ $(someElement).html(data); } '。現在使用しているコードはjsonを返すメソッドに基づいています –
JSONを使用する方がパフォーマンスが向上するでしょうか。私はポストバックにフォームを望んでいないので、私は部分ビューを使用しています。 JSONを使用して部分的な表示なしでも可能ですか? – user2448412
はい、 'JsonResult'を返すと少しパフォーマンスが向上しますが(ワイヤ全体に渡って少し少ないデータを送信するため)、それはおそらく重要ではありません。 –