MVC3-Ansicht Ändern von Jquery

Ich bin neu in MVC3 und Jquery. Vielleicht bin ich nicht für die richtige Herangehensweise an diese, lassen Sie mich bitte wissen, ob es eine bessere Lösung.

Ich möchte die JQuery-ändern von Ansichten in meine MVC-app. Ich habe eine Liste der Produkte auf der Hauptseite. Wenn der Benutzer klickt auf ein Produkt, das ich Jquery zum senden einer Anfrage zu dem server mit der Produkt-ID und die änderung an einem Produkt-Detailansicht. Bevor ich die Ansichten ändern, ich mache Jquery explodieren Wirkung. Ich bin mit der callback-Funktion der Jquery-Effekt, um die Anfrage. Wenn ich meine debug-code. Die Produkt-details-controller aufgerufen und liefert die Ansicht details. Aber der web-browser nicht ändern, die die Produkt-Detailansicht. es bleibt auf der Startseite.

Hier ist mein Produkt-controller:

public class ProductController : Controller
{

    public ActionResult Details(string productId)
    {
        return View();
    }
}

Jquery explodieren Effekt mit callback:

$(".productOriginal").click(function () {
            $(this).hide("explode", {}, 1000, productSelectedCallback);
});

Jquery Callback:

function productSelectedCallback() {
   var prodId = $(this).attr("id");
   var data = { productId: prodId.toString() };
   $(this).load('/Product/Details');
}

Zusätzlich an .laden, ich habe verwenden .post und .ajax und bekam das gleiche Ergebnis mit allen. So, ich muss grundlegend etwas fehlt hier.

Ich bin mit dem Standard-register Routen. Die Produkte-Ordner eingerichtet ist die gleiche wie die home-Ordner und hat eine details.cshtml.

Danke für deine Hilfe!!!

InformationsquelleAutor Ryand.Johnson | 2011-06-06

2

Versuchen
```
function productSelectedCallback() {
   var prodId = $(this).attr("id");
   var targetUrl = '/Product/Details/' + prodId.toString();
   $(this).load(targetUrl);
}
```
Edit:

Ändern Sie Ihre action-Methode auf dem controller von
```
public ActionResult Details(string productId)
{
    return View();
}
```
zu
```
public ActionResult Details(int id)
{
    return View();
}
```
oder Ihre jQuery-code:
```
function productSelectedCallback() {
   var prodId = $(this).attr("id");
   var targetUrl = '/Product/Details/?productId=' + prodId.toString();
   $(this).load(targetUrl);
}
```
Werden Sie wahrscheinlich nicht haben eine route setup zu nehmen, "productId" in der Aktion. Noch können Sie (wenn Sie nicht möchten, konfigurieren Sie die route), aber es muss sein in einem query-string.

Edit 2:

Im Licht von Ihrem letzten Kommentar, ich bin nicht sicher, ob Sie wirklich wollen, um mit AJAX für Ihre Lösung, da Sie versuchen eine Umleitung von einer Seite zur anderen. Ich würde vorschlagen, das ändern Ihrer Rückkehr Art zu einer RedirectToAction Ergebnis. Dieser sagt dem browser, den Sie brauchen, um umleiten, aber das wird getan werden müssen, in eine andere Maßnahme als Ihr Produkt-details Aktion (oder Sie bekommen eine endlose redirect-Schleife).

Probieren Sie etwas wie dieses:
```
//In the home controller where Id = the product id
public ActionResult RedirectToProductDetails (int id)
{
    //Use whatever names you want for Id and ProductId, respectively
    return RedirectToAction ("Details", "Products", new { id = id });
}

//And then in your Product Controller:
public ActionResult Details (int id)
{
    var MyProduct = //Get your product from the database or whatever
    return View (MyProduct);
}
```
(Bitte beachten Sie, dass dies tatsächlich dazu führen, dass zwei Fahrten für den Klienten, effektiv entfernen Sie alle Vorteil, dass Sie eine "AJAX" - Ansatz.)

Ich bekam das gleiche Ergebnis. Wenn ich den debug-code ich es sehen kann, trifft der Produkt-Controller und Details Aktion. Es gibt die Ansicht. Ich kann mit der rechten Maustaste und wählen Sie " Gehe Zu Ansicht und man die Ansicht von rechts. Ich kann auch geben ...../product/details in der URL von web-browser und laden Sie die richtige Seite.
siehe mein edit.
Ich habe versucht unter Produkt-Id komplett aus dem Bild. public ActionResult Details() { return View(); } function productSelectedCallback() { var prodId = $(this).attr("id"); var targetUrl = '/Product/Details/'; $(this).Belastung(targetUrl); }
und was ist passiert? Kann man es im debug-Modus mit einer Pause in der action-Methode und sehen, ob es immer noch genannt? Sind Sie immer ein interner Fehler oder so was? Auch Sie sind der Rückgabe View() oder PartialView()?
Ja, die gleiche Sache passiert ist. Ich habe einen breakpunkt setzen. Ich bin eine Ansicht zurückgeben(); Irgendwelche anderen Ideen? Danke!

InformationsquelleAutor Jim D'Angelo
1

JQuery Callback
```
function productSelectedCallback() {
   var prodId = $(this).attr("id");
    var BaseUrl = 'http://' + top.location.host ;

    $.ajax({
                type: 'POST',
                url: BaseUrl + '/Product/Details',
                data: ({ productId: prodId.toString() }),
                success: function (resp) {

                }
            });
}
```
CallJquery explodieren Effekt mit callback:
```
$(".productOriginal").click(function () {
            $(this).hide("explode", {}, 1000, productSelectedCallback);
});
```
Hier ist mein Produkt-controller:
```
public class ProductController : Controller
    {
        [HttpPost] 
        public ActionResult Details(string productId)
        {
            return View();
        }
    }
```
Das habe ich versucht. Wenn ich einen Haltepunkt auf die Aktion. es trifft die actiona und gibt den Blick. Genau wie der Last hat. Hier ist der code, den ich verwendet, um zu tun, der ajax-Aufruf. Der einzige Unterschied, den ich sehen kann, ist, dass die URL, ich bin nicht, den sockel, bevor Sie es. Aber ich denke, dass meine ajax-calls arbeitet, da ist der Treffer für controller und Aktion.
hier ist der code $.ajax({ url: "/Product/Details", type: 'POST', data: JSON.stringify(data), dataType: 'json', contentType: 'application/json, charset=utf-8', async: false, beforeSend: function () { }, success: function (data) { }, error: function () { } });
Das klingt vielleicht wie eine dumme Frage, aber Sie pushen die resultierende Ansicht in die HTML-DOM (sind Sie etwas zu tun mit der Sicht?) Der browser wird nicht automatisch alles tun, nach einem AJAX-Aufruf, so die Antwort, und dann Sachen tun.

InformationsquelleAutor mr.b
0

Können Sie tatsächlich erreichen, dass durch die Verwendung von jquery ajax() anstelle von load(). Und auf dem controller
hinzufügen [HttpPost] zu erhalten post-Daten. Das heißt, Sie können tun, was Sie wollen aus Ihrem controller, ob Sie zurückkehren möchten, in der Ansicht oder umleiten zu handeln und etc.

Es kommt auf den controller. Ich habe einen break-Punkt gibt es und trat hindurch. Es gibt eine view. Aber der browser keine post zurück, mit der neuen Seite. es gibt das original. Ich habe auch versucht, die ajax-route auch mit dem httppost-Attribut. Die gleiche Sache passiert. Ich habe getreten, obwohl es.
Symantically, dass macht nicht viel Sinn. Ein POST sollte nicht verwendet werden, da eine zu BEKOMMEN. Dieses entfernt einige der HTTP Güte, schafft integrierte Skalierbarkeit.
Oh! Ich bin sorry about that...

InformationsquelleAutor mr.b

versuchen Sie dies:
BEARBEITEN FÜR TEST

$(".productOriginal").click(function (event) {
     event.stopPropagation();

     var 
        _this = this,
        prodId = $(this).attr("id"); //is string

     alert("Id product: " + prodId);

     $(this).hide("explode", 1000,
        function() {
           var data = { productId: prodId };
           $(_this).load('/Product/Details', data, function(responseText){
                alert("responseText :" + responseText);
           });
        }
     );

     return false;
});

explodieren ist jquery UI Effekt. Ich habe genau das gleiche Ergebnis, wenn ich kopiert den code in. Der einzige Unterschied war, dass das Produkt Bild verblasst, statt Sie explodieren.
Sie können den code zu testen, um zu sehen, das Produkt-code und das Ergebnis, und prüfen Sie, ob es funktioniert, dann haben Sie, um zu sehen, wo Sie senden das Ergebnis.

InformationsquelleAutor andres descalzo

Habe ich es geschafft! Dank @jdangelo. Ich habe versucht das problem zu lösen mit den falschen tools. Es gab keinen Grund, nichts zu posten, was zu dem server. Ich hatte bereits eine Produkt-Id. Könnte ich auch einfach leiten Sie aus dem client.

Statt:

function productSelectedCallback() {
   var prodId = $(this).attr("id");
   var targetUrl = '/Product/Details/?productId=' + prodId.toString();
   $(this).load(targetUrl);
}

Habe ich dieses:

function productSelectedCallback() {
   var prodId = $(this).attr("id");
   var targetUrl = '/Product/Details/?productId=' + prodId.toString();
   top.location.href = targeUrl;
}

Wenn es hilfreich war, Verstand Sie es markieren als Antwort?

InformationsquelleAutor Ryand.Johnson

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.