MVC3 Изменить вид из Jquery

Question

Я новичок в MVC3 и Jquery. Возможно, я не принимаю правильного подхода к этому, пожалуйста, дайте мне знать, если есть лучшее решение.

Я хочу использовать JQuery для изменения представлений в моем приложении MVC. У меня есть список продуктов на главной странице. Когда пользователь щелкает продукт, я отправляю запрос на сервер с идентификатором продукта и переключаюсь в представление сведений о продукте. Прежде чем изменить представления, я делаю эффект взрыва Jquery. Я использую функцию обратного вызова эффекта Jquery для отправки запроса. Когда я отлаживаю свой код Вызывается контроллер сведений о продукте, который возвращает представление сведений. Но веб-браузер не меняет представление сведений о продукте. он остается на главной странице.

Вот мой контроллер продукта:

public class ProductController : Controller
{

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

Эффект взрыва Jquery с обратным вызовом:

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

Обратный вызов Jquery:

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

В дополнение к .load я использовал .post и .ajax и получил одинаковый результат со всеми. Итак, я, должно быть, здесь что-то упускаю.

Я использую регистр маршрутов по умолчанию. Папка products настроена так же, как домашняя папка, и содержит файл details.cshtml.

Спасибо за помощь!

Answer 1

Попробуйте

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

Изменить:

Измените ваш метод действия на контроллере с

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

на

public ActionResult Details(int id)
{
    return View();
}

или ваш код jQuery для:

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

У вас, вероятно, нет настройки маршрута, чтобы использовать "productId" в вашем действии.Вы все еще можете использовать его (если вы не хотите настраивать маршрут), но он должен быть в строке запроса.

Редактировать 2:

ВВ свете вашего последнего комментария, я не уверен, что вы действительно хотите использовать AJAX для своего решения, поскольку вы пытаетесь перенаправить с одной страницы на другую.Я бы предложил изменить ваш тип возврата на результат RedirectToAction.Это скажет браузеру, что вам нужно перенаправить, но это нужно будет сделать в действии, отличном от действия с информацией о вашем продукте (или вы получите бесконечный цикл перенаправления).

Попробуйте что-то вроде этого:

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

(Обратите внимание, что на самом деле это приведет к двум поездкам для клиента, фактически устраняя любые преимущества использования подхода "AJAX".)

Answer 2

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 разрывать эффект с обратным вызовом:

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

Вот мой контроллер продукта:

public class ProductController : Controller
    {
        [HttpPost] 
        public ActionResult Details(string productId)
        {
            return View();
        }
    }

Answer 3

Я понял! Благодаря @jdangelo. Я пытался решить проблему, используя неправильные инструменты. Не было никакой причины отправлять что-либо на сервер. У меня уже был идентификатор продукта. Я мог бы просто перенаправить с клиента.

Вместо:

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

Я использовал это:

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

Answer 4

Вы можете достичь этого, используя jquery ajax () вместо load ().И на вашем контроллере добавьте [HttpPost] для получения данных поста.Тем не менее, вы можете делать с контроллером все, что захотите, хотите ли вы вернуть представление или перенаправить на действие и т. Д.

Answer 5

попробуйте это: РЕДАКТИРОВАТЬ ДЛЯ ТЕСТА

$(".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;
});