it-swarm.com.de

verwenden von Ajax für das teilweise Ansichtsladen in .NET MVC4

Ich versuche dem Beitrag hier zu folgen, was sehr wohl falsch sein kann, um etwas mehr über das partielle Laden von Ansichten in MVC zu lernen. Ich kenne die Grundlagen von MVC, möchte aber mehr von den Ajax-Sachen machen, die ich gemacht habe, bevor ich mit MVC angefangen habe.

Das Ziel ist es, die Teilansicht innerhalb des Div zu laden. Es wird nur die Teilansicht als ganze Seite geladen und nicht innerhalb der Div.

Code lautet wie folgt:

Regler:

namespace LDP.WebUI.Controllers
{
    public class TestController : Controller
    {
        //
        // GET: /Test/

        public ActionResult Index()
        {
            return View();
        }
        public PartialViewResult Page1()
        {
            return PartialView("Page1");
        }
        public PartialViewResult Page2()
        {
            return PartialView("Page2");
        }
    }
}

Hauptansicht (Index): (Ich habe auch "mainDiv" ohne das Pfundzeichen ausprobiert, war mir nicht sicher, welches richtig war)

<script src="@Url.Content("~/Scripts/libs/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/libs/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#hideme').click(function () {
            $(this).hide();
        });
    });
</script>
<div>
@Ajax.ActionLink("Parial Page1", "Page1", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "mainDiv"})
@Ajax.ActionLink("Parial Page2", "Page2", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "mainDiv"})
<div id ='mainDiv'>

</div>
<button id ="hideme">Hide Me</button>
</div>

Teilansicht 1 (Page1.cshtml)

@{
    ViewBag.Title = "Page1";
}

<h2>Page1</h2>

Teilansicht 2 (Page2.cshtml)

@{
    ViewBag.Title = "Page2";
}

<h2>Page2</h2>

Update: Ich habe ein brandneues MVC 4-Projekt erstellt. Dies kommt standardmäßig mit Jquery 1.7.1 und der unauffälligen Ajax-Bibliothek von Microsoft. Es wird immer noch die Teilansicht auf einer neuen Seite geladen ...

Update: Nicht sicher, ob dies hilft, aber das folgende Ergebnis erzielt das gewünschte Ergebnis ... Es löst jedoch immer noch nicht das Problem, warum diese Lösung nicht funktioniert

<button>load about</button>
<script type="text/javascript">
    $("button").click(function () {
        $("#mainDiv").load("Test/Page2");
    });

</script>
    enter code here
16
kralco626
  1. graben # in UpdateTargetId = "#mainDiv"
  2. stellen Sie sicher, dass Sie auf Ihrer Seite auf jquery.unobtrusive-ajax.min.js-Skript verwiesen haben.
16
Dmitry

Ich habe Ihren Code in ein brandneues MVC4-Projekt kopiert und es funktioniert gut. 

Siehe Screenshot der Lösung: 

Brand new MVC4 project with Ajax.ActionLink

Ich hoffe, dies gibt Ihnen einen Hinweis darauf, was falsch sein könnte. 

13

Normalerweise lade ich solche Partials mit JQuery

$( document ).ready(function() {

  $("#lnkPage1").click(function( event ) {

    $('#mainDiv').load('Test/Pag1');

  });

  $("#lnkPage2").click(function( event ) {

    $('#mainDiv').load('Test/Pag2');

  });

});
4
Dave Alperovich
@using (Ajax.BeginForm("AjaxViewCall", "Home", new AjaxOptions { UpdateTargetId = "result" }))   
{
    <p>
        <input type="submit" value="Ajax Form Action" />
    </p>
}

<div id="result></div>

Klicken Sie auf die Schaltfläche, um die Aktion aufzurufen, die eine PartialView zurückgibt. Sie benötigen kein '#' in Ihrem Ajax.BeginForm-Aufruf.

1
Schanckopotamus

Ich habe genau das gleiche Problem. Laden der Teilansicht als ganze Seite und nicht im definierten div.

Ich nahm fälschlicherweise an, dass mein _Layout.cshtml die jquery.unobtrusive-ajax.js-Datei enthielt, da ich nicht wusste, was das Bundles-Ding (?) Tat. Ich dachte, es würde von Bundles hinzugefügt.

In meiner _Layout.cshtml-Ansicht definiert sie @RenderSection("scripts", required: false) Welche in Englisch ist; Es ist optional, in Ihre Ansicht einen Abschnitt mit dem Namen @scripts ..__ aufzunehmen. Es wird also kein Fehler ausgegeben, wenn Sie ihn nicht einschließen (@section-Skripts). t. 

Um es zu beheben: Fügen Sie Folgendes in Ihre Ansicht ein (ich habe es unter den ...ViewBag.Title; } gestellt)

@section scripts{
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
}

Entschuldigung, wenn meine Erklärung etwas rudimentär ist, bin ich ein bisschen neu. Ich hoffe, das hilft jemandem.

0
Julian Rosebury

json-Daten oder Tabellenteilansicht laden. nicht vollständige Formatansicht. 

success:function(data){
    alert(data);
    debugger;
    ('#div_id').data(data);
}

hier sind zurückgegebene Daten Json-Daten oder Daten wie 

daten

0
david

Das einzige Problem, das ich mit dem Originalbeispiel hatte, war der\lib\in Script-Pfad. Die Standard-MVC 4-Webanwendung fügt js-Dateien in "Scripts" und nicht in "Scripts\Lib" ein. Ihr Screenshot ist korrekt.

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

Auch im ursprünglichen Beispiel - das Einfügen von ViewBag.Title bewirkt, dass dies nicht funktioniert:

@{
    ViewBag.Title = "Some Title";
}
0
Vincent Finn