Question

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

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

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

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

下面的相关代码段

索引视图

<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);
    }

团队详细信息PartialView

<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

团队详细信息PartialView

<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

如何在部分视图中调用函数来重新加载局部视图本身

1 个答案: