Блог

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

Я хочу использовать jQuery для изменения представлений в моем приложении MVC. У меня есть список продуктов на главной странице. Когда пользователь нажимает на продукт, я использую Jquery для отправки запроса на сервер с идентификатором продукта и перехода на представление сведений о продукте. Прежде чем менять представления, я создаю эффект разнесения 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.

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

Попробуйте

 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».)

Обратный вызов jQuery

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

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

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

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

Я понял! Спасибо @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;
}