私のフォームは次のようになります。
@model IEnumerable<SCD.ViewModels.UserLineViewModel>
@{
ViewBag.Title = "List";
}
<h2>List</h2>
<form method="GET" action="@Url.Action("AddNewUser", "DataService")" data-scd-ajax="true" data-scd-target="#userList">
@if (TempData["SuccessMessage"] != null)
{
<p class="successHighlight">@TempData["SuccessMessage"].ToString()</p>
}
@if (TempData["ErrorMessage"] != null)
{
<p class="errorHighlight">@TempData["ErrorMessage"].ToString()</p>
}
<p>
<input type="search" name="searchTerm" id="searchTerm" class="newUser"
data-scd-autocomplete="@Url.Action("AutocompleteUser", "DataService")" style = "width:300px;"/>
<input type="hidden" id="searchId" name="searchId"/>
</p>
<table>
<tr>
<th>Forename</th>
<th>Surname</th>
<th>Created</th>
<th>Administrator?</th>
<th></th>
</tr>
<tbody id="userList">
@Html.Partial("_UserLine")
</tbody>
</table>
</form>
私の部分的なビューは次のようになります
@model IEnumerable<UserLineViewModel>
@Html.EditorForModel()
そして、これまでのエディターテンプレートは次のようになります
@model UserLineViewModel
<tr>
<td>
@Html.DisplayFor(x => x.Employee.Forename)
</td>
<td>
@Html.DisplayFor(x => x.Employee.Surname)
</td>
<td>
@Html.DisplayFor(x => x.UserScd.Created)
</td>
<td>
@Html.EditorFor(x => x.UserScd.AdminFlag)
</td>
<td>
@Html.ActionLink("Remove", "Delete", new { /* id=item.PrimaryKey */ })
</td>
</tr>
ユーザーがオートコンプリートから人物を選択すると、DataService コントローラーのこのメソッドが呼び出されます。
public ActionResult AddNewUser(int searchId)
{
var opStatus = this.UserScdRepository.Add(searchId);
if (!opStatus.Status)
{
return this.PartialView("_UserLine", new List<UserLineViewModel>());
}
this.TempData["SuccessMessage"] =
string.Format("You successfully entered the new user {0}",
vw_EmployeesAndJobTitles.GetName(searchId)).MessageTime();
var employeesInScd = this.EmployeeRepository.GetEmployeesInScd();
UserLineViewModel.UserScdRepository = this.UserScdRepository;
var userList = employeesInScd.Select(employee => new UserLineViewModel(employee)).ToList();
return this.PartialView("_UserLine", userList);
}
そして、これを結合する Jquery/Ajax は次のようになります。
var ajaxFormSubmit = function () {
var $form = $(this);
var options = {
url: $form.attr("action"),
type: $form.attr("method"),
data: $form.serialize()
};
$.ajax(options).done(function (data) {
var $target = $($form.attr("data-scd-target"));
var $newHtml = $(data);
$target.replaceWith($newHtml);
$newHtml.effect("highlight");
});
return false;
};
var showOtherTrade = function (data) {
$('#searchOtherTrade').val('');
$('#otherTradeList').html(data);
};
var updateAutocompleteForm = function (event, ui) {
var $input = $(this);
if ($input.hasClass("newUser")) {
$('#searchId').val(ui.item.id);
var $form = $input.parents("form:first");
$form.submit();
}
$input.attr('readonly', 'readonly');
$input.css('font-size', '11px');
$input.selectRange(0, 50);
}
};
var createAutocomplete = function () {
var $input = $(this);
var options = {
source: $input.attr("data-scd-autocomplete"),
select: updateAutocompleteForm
};
$input.autocomplete(options);
};
今私が得ている問題は、コントローラーで PartialView を返すときに、部分ビューの HTML にデータがレンダリングされないことです。では、どうすればこれを修正できますか?