Geek asks and answers

MVC3 Change View from JQuery

I am new to MVC3 and jQuery. Perhaps I am not taking the right approach to this, please let me know if there is a better solution.

I want to use jQuery to change the views in my MVC application. I have a list of products on the main page. When the user clicks on the product, I Jquery sends a request to the server with the product identifier and proceeds to present the product information. Before I change the view, I make the jQuery effect explode. I am using the jQuery effect callback function to send a query. When I debug my code. The product part controller is called and it returns a view of the parts. But the web browser does not change the appearance of the product details. he remains on the main page.

Here is my product controller:

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 . , - .

. , , details.cshtml.

!

+3
5

Try

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

Edit:

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

+2

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

: EDIT FOR 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;
});
0

In fact, you can achieve this using jquery ajax () instead of load (). And on your controller add [HttpPost]to receive message data. However, you can do whatever you want from your controller, whether you want to return the view or redirect to an action, etc.

0
source

I understood! Thanks @jdangelo. I tried to solve the problem using the wrong tools. There was no reason to publish anything on the server. I already had a product identifier. I could just redirect the client.

Instead:

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

I used this:

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

More articles:


All Articles