Check data in Succes ajax function to reidrect to specific view

Question

I am calling a javascript function on click which calls an action method that returns either a partial view or full view. I want to load partial view in a modal popup and if it is a full view, then just want to redirect it.

View

 foreach(var productTemplate in Products)
   {
     <a href="#" class="btn btn-sm btn-primary" onclick="loadModal('@productTemplate.productId,'@productTemplate.customerId')"> Add New Product</a>
   }


<div class="modal fade" id="mymodel" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Shared Products</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>

            </div>
            <div class="modal-body" id="mymodelbody">

            </div>
        </div>
    </div>

<script>

    var loadModal = function (productId, customerId) {
        $.ajax({
            type: 'GET',
            url: '/NewProductTemplate/CreateNewProduct',
            cache: false,
            data: {
                productId: productId,
                customerId: customerId
            },
            dataType: 'html',
            success: function (data) {;
                $("#mymodelbody").html(data);
                $("#mymodel").modal("show");
            }
        });
    }
</script>

NewProductTemplateController code:

public ActionResult CreateNewProduct(Guid productId, Guid customerId)
    {
        var sharedProduct = _productTemplateService.GetSharedProducts(productId);
        var _finalSharedProducts = (sharedProduct.Any(t => t.productId != productId));

        if (_finalSharedProducts)
        {
            var sharedProdctTemplate = _productTemplateService.GetSharedProduct(productId);
            return PartialView("_shared", new SharedModel
            {
                SharedProduct = sharedProdctTemplate
            });
        }
        else
        {
            _productTemplateService.CreateNewProduct(productId);
            return RedirectToAction("Details", "ProductTemplate");
        }
    }

Problem is that when controller returns a full view, it loads in a modal popup which I don't want. I just want to check the data in success function and decide whether to load modal for partial view OR redirect to a full view. I am not sure how to do it.

Can please someone help me here? Thank you!

UPDATE:

I was able to make it work like

if (data.indexOf('<!DOCTYPE html>') != 0) {
                    $("#mymodelbody").html(data);
                    $("#mymodel").modal("show");
                } else {
                    window.location.href = '/ProductTemplate/Details?productTemplateId=' + productId;
                }

One more question: Is there any way that I can create a ProductModal object in javascript and pass it to the Details action method of ProductTemplate?

You can return custom header from the server instead of full view (eg. X-REDIRECT - the header value would be the url to which you need to redirect) , and in the jquery success callback you can change window.location to the one from the response header. See eg. discussion here https://stackoverflow.com/questions/199099/how-to-manage-a-redirect-request-after-a-jquery-ajax-call — user44, May 03 '19 at 19:17
Thank you for the tip! I ended up doing what you suggested here. It resolved my above question. Thank you! — user11103429, May 04 '19 at 02:19

score 2 · Accepted Answer · answered May 03 '19 at 19:02

2

If your action returns your whole page, it will include the <!DOCTYPE html> and <html> tags. You can check if the result starts with '<!DOCTYPE html>' for example to make to check if it is the whole page or not.

success: function (data) {
            if (!data.startsWith('<!DOCTYPE html>')) {
               $("#mymodelbody").html(data);
               $("#mymodel").modal("show");
            } else {
               window.location.href = '<redirect url here>';
            }
        }

answered May 03 '19 at 19:02

Teddy

304
5
17

In this solution, assuming the rest of the code stays the same, the full view will be rendered twice on the server (once in the initial call, and second time after redirect - because the initial redirect will be handled transparently by the browser). – user44 May 03 '19 at 19:21
Thank you! I used if (data.indexOf(' ') != 0) as .startsWith throwing an error. Thank you for your help! – user11103429 May 03 '19 at 20:50

Check data in Succes ajax function to reidrect to specific view

1 Answers1