Как да извикате функция от частичен изглед, която презарежда самия частичен изглед

Имам MVC Index View с връзка, която при щракване извиква JQuery метод, който задейства Ajax POST за динамично зареждане на PartialView в div.

Вътре в PartialView имам формуляр, който, когато бъде изпратен, трябва да се презареди (частичният изглед) в div в индексния изглед.

Когато изпробвам кода по-долу, той дава изключение на паметта във Visual Studio.

Как да „презаредя“ частичния изглед по този начин? Мога ли да направя препратка към div в основния (съдържащ) изглед от PartialView?

Подходящи кодови фрагменти по-долу

Индексен изглед

<a href="/bg#" 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);
});

Controller Action

[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>

jquery ajax asp.net-mvc asp.net-mvc-partialview
person jag    schedule 05.03.2014    source източник

Отговори (1)


arrow_upward
1
arrow_downward

Това, което търсите е 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");

Ето малко примерен код и урок

person shenku    schedule 05.03.2014
comment
Не – вече знам как да зареждам съдържание в div (от индексния изглед зареждам partialview в div, използвайки JQuery, а не Microsoft.Ajax) – това, с което имам проблем, е, че също имам формуляр вътре заредения частичен изглед, който трябва да „презареди“ частичен изглед в div в „съдържащия“ индексен изглед. - person jag; 06.03.2014
comment
Както казах преди, ако вместо това използвате Ajax.BeginFrom, ще работи добре. Актуализирах въпроса си с вашия код. Ajax.BeginForm не се интересува, че е вътре в частичен изглед. - person shenku; 07.03.2014
comment
ах Тогава се извинявам за предишния ми коментар. Бихте ли обяснили защо е възможно да направите това с Ajax.BeginForm, но не и с JQuery? - person jag; 07.03.2014
comment
Току-що пробвах това и то замества цялата страница с частичен изглед, вместо да опреснява div на teamdetails. Може ли това да се дължи на факта, че вътре в partialview не може да намери елемента с id 'teamdetails' (защото този div е в съдържащия изглед 'Index')?? - person jag; 07.03.2014
comment
Не, трябва да работи добре, разбира се, можете да го направите с jQuery, но MVC рамката го прави извън кутията, така че не е необходимо в този случай (освен ако не се нуждаете от нещо персонализирано) следвайте урока по-горе, мисля, че покрива всичко . - person shenku; 08.03.2014