MVC 4 (razor) - Controller ist wieder ein partialview aber die gesamte Seite aktualisiert wird

Ich bin neu in der MVC 4 und der Razor - engine, so könnte dies eine dumme Frage.

Was ich versuche zu erreichen ist, ich habe eine Seite mit einem drop-down-Liste und einen button. Ein Klick auf die Schaltfläche ruft den controller übergeben wird der Wert ausgewählt. Der controller sollte die Rückkehr einer teilweisen Ansicht und nur den unteren Teil der Seite aktualisiert werden soll.

Aber ich finde, dass die gesamte Seite wird ersetzt mit nur teilweise html-Ansicht. Dh. Ich bekomme meine Liste der Ergebnisse angezeigt, aber ich verliere meine dropdownlist von Projekten und submit-button. Ich habe versucht, einen Verweis auf jquery und unaufdringlich scripts (was ich nicht glaube, ich muss in MVC 4), aber das ändert nichts an der Seite (ie. das dropdownlist-und-Taste bleiben, und es werden keine Ergebnisse angezeigt).

Teil meine Ansicht:

@using (Ajax.BeginForm("GetProjectStories", "MyController", new AjaxOptions{ UpdateTargetId = "projectUserStories"}))
{

    <fieldset>
        <legend>Select Project</legend>
        <div>
            @Html.DropDownList("ProjectReference", (IEnumerable<SelectListItem>)Model.ProjectList)
        </div>
        <p>
        <input name="GetStoriesButton" type="submit" value="Get Stories" />
        </p>
    </fieldset>
}

@if (Model != null && Model.UserStories != null)
{
    <div id="projectUserStories">
        @{Html.RenderPartial("_UserStoryList", Model);}
    </div>

}

Mein controller:

public ActionResult GetProjectStories(ProjectViewModel model)
        {

           var stories =  MyService.GetProjectUserStories(model.ProjectReference).Results;   
           model.UserStories = stories;
            return PartialView("_UserStoryList", model);
        }

Meine Teilansicht Inhalt, enthält eine html-Tabelle und der Verweis auf das Modell.

InformationsquelleAutor Jen | 2012-11-14
  1. 1

    Wie Sie planen, zu aktualisieren projectUserStories, wenn der code-block nicht gerendert werden konnte, versuchen Sie dies:

    <div id="projectUserStories">
@if (Model != null && Model.UserStories != null)
{
   Html.RenderPartial("_UserStoryList", Model);
}
</div>

    Überprüfen Sie auch alle benötigten js-Dateien für die Microsoft Ajax-Helfer, zum Beispiel diese:

    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

    Schauen Sie auch unter:

    1. Unter Verwendung Von Ajax.BeginForm mit ASP.NET MVC 3 Razor
    2. MVC 3 - Ajax.BeginForm bedeutet eine vollständige post zurück
    • Ja, hatte bemerkt, dass an diesem morgen - danke. Überprüfen Sie Ihre links 🙂
    InformationsquelleAutor webdeveloper
  2. 1

    Also versuchte ich darunter, dass unobtrusive Skript, und zur Festsetzung der Tatsache, dass ich nicht Rendern, div, wenn das Objekt null war, aber es noch nicht funktioniert.

    Also wechselte ich auf die Verwendung von jquery.

        <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>

    <script type="text/javascript">
            $(function () {
                $('form').submit(function () {
                    var url = "@Url.Action("GetProjectStories", "MyController")";
                    var data = { selectedProject: $('#ProjectReference').val() };

                    $("#projectUserStories").load(url, data, function() {
                    });
                    return false;
                });
            });

     </script>

        @using (Html.BeginForm())
        {
            <fieldset>
                <legend>Select Project</legend>
                <div>
                    @Html.DropDownList("ProjectReference", (IEnumerable<SelectListItem>) Model.ProjectList)
                </div>
                <p>
                    <input name="GetStoriesButton" type="submit" value="Get Stories" />
                </p>
            </fieldset>

            <div id="projectUserStories">
                @{ Html.RenderPartial("_UserStoryList", Model); }
            </div>
         }
    InformationsquelleAutor Jen
Schreibe einen Kommentar