2

私のフォームは次のようになります。

@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 にデータがレンダリングされないことです。では、どうすればこれを修正できますか?

4

0 に答える 0