如何从重新加载局部视图本身的局部视图中调用函数

Question

我有一个带有链接的 MVC 索引视图，单击该链接会调用一个 JQuery 方法，该方法会触发 Ajax POST 以将 PartialView 动态加载到 div 中。

内部 PartialView 我有一个表单，提交时需要重新加载自身（PartialView）到索引视图的 div 中。

当我尝试下面的代码时，它在 Visual Studio 中出现内存异常。

如何像这样“重新加载”局部视图？我可以从 PartialView 引用主（包含）视图中的 div 吗？

相关代码如下sn-ps

索引视图

<a href="#" class="buttonId currentplayer" data-userteamid="60" data-footballclub="" data-searchstring="">click to load game 60</a> 

<div id="teampartial"></div>

<script type="text/javascript">
var returnTeam = function (link) {
    debugger;
    var userTeamId = $(link).attr('data-userteamid');
    var footballClub = $(link).attr('data-footballclub');
    var searchString = $(link).attr('data-searchstring');
    $.ajax({
        type: 'POST',
        url: '/ViewPlayers/TeamOverView',
        data: {
            userTeamId: userTeamId,
            footballClub: footballClub,
            searchString: searchString
        },
        success: function (data) {
            $('#teampartial').empty();
            $('#teampartial').append(data);
        }
    });
};

$('.buttonId').click(function () {
    returnTeam(this);
});

控制器动作

[HttpPost]
    public ActionResult TeamOverView(int userTeamId, string footballClub, string searchString)
    {
        var _teamOverView = _service.GetTeamOverViewViewModel((int)userTeamId, footballClub, searchString);
        return PartialView("teamdetails", _teamOverView);
    }

团队详细信息部分视图

<h2>List of Players</h2>
            using (Html.BeginForm("TeamOverView", "ViewPlayers", FormMethod.Post,new { id = "filterPlayers" }))
            {
                <p> 
                    @Html.DropDownListFor(x => x.Clubs, new SelectList(Model.Clubs,"Value","Text"), "All")
                    Name: @Html.TextBox("searchString") 
                    <input type="hidden" name="userTeamID" value="@Model.UserTeamId" />
                    <input type="submit" value="Filter" />
                </p>
            }
            <table>
                @foreach (var item in Model.PlayersSearchedFor)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.Name)
                        </td>
                    </tr>
                }
            </table>

<script type="text/javascript">
    var returnSelectTeam = function () {
        debugger;
        $.ajax({
            type: 'POST',
            url: '/ViewPlayers/TeamOverView',
            data: $("#filterPlayers").serialize(),
            success: function (data) {
                $('#teampartial').empty();
                $('#teampartial').append(data);
            }
        });
    };

    $('#filterPlayers').submit(function () {
        returnSelectTeam();
    });
</script>

Answer 1

你要找的是Ajax.BeginForm

团队详细信息部分视图

<h2>List of Players</h2>

        @using (Html.BeginForm("TeamOverView", "ViewPlayers", new AjaxOptions { 
HttpMethod = "POST", UpdateTargetId = "teampartial", InsertionMode = InsertionMode.Replace }))
        {
            <p> 
                @Html.DropDownListFor(x => x.Clubs, new SelectList(Model.Clubs,"Value","Text"), "All")
                Name: @Html.TextBox("searchString") 
                <input type="hidden" name="userTeamID" value="@Model.UserTeamId" />
                <input type="submit" value="Filter" />
            </p>
        }
        <table>
            @foreach (var item in Model.PlayersSearchedFor)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                </tr>
            }
        </table>

这将做的是发送一个表单数据的 ajax 帖子，并获取结果并用结果替换目标。

因此，请确保您在操作中的响应类似于：

return PartialView("PartialViewName");

这里有一些sample code and tutorial