How can I use an boolean when my dataType is html? When my controller detects that there's no data on my sql, it should throw as false in my controller which is working, I just need to throw the boolean on my ajax as false. Im aware that using an html is automatically as true which is if I use an operator. It return as true. But how can I make it as false too?

Here's my controller:

if (Reader.HasRows == true)
   {
       return View("TrueViewPort");
   } else
   {
      return View("FalseViewPort");
   }

Ajax:

$.ajax({
    url: "UrlToController",
    type: "GET",
    data: {
        uname: uname
    },
    dataType: "html",
    success: (function (result) {
        if (result == true) { //even if its false, it always throw here
        $('#wishlist-carousel').html(result); //if data detected carousel should be called
            //Something elements when the data is true
        } else {
           //Something elements when the data is false
        $(".no-page").html(result); //if no data. no carousel should detect
        }
    }),
    error: (function (xhr, status) {
        alert(status);
    })
})

EDIT:

These should appear on my TrueViewPort:

@if (Model != null && Model.Rows.Count != 0)
{
    @for (int i = 0, x = 1; i < Model.Rows.Count; i  , x  )
    {
        <div >
            <div >
                <div >
                    <div >
                        <img src="~/images/link/@Model.Rows[i][0]" />
                    </div>
                    <br />
                    <br />
                    <div >
                        @Model.Rows[i][1]
                        <br />
                        @Model.Rows[i][2]
                    </div>
                </div>
            </div>
        </div>
    }
}
else //When the server detected that there's no data, it should throw the else statement which is working
{
    <div >
        <div >
            <div >
                404
            </div>
                <br />
            </div>
            <div >
                ITEMS NOT FOUND
            </div>
                <br />
            <div >
                Don't you have any want on the shop?
            </div>
                <br />
            <div >
                Looks like you still haven't putting anything on your wishlist do you?
            </div>
        </div>
    </div>
}

And here's what appear on my screen when launching it. Using both if else operators to ==

Using if as == true and else

My .cshtml:

<div >
    <div >
        <div >
            <div >
                <div >
                    <div  id="wishlist-carousel"></div>
                </div>
            </div>
        </div>
        <div ></div>
    </div>
</div>

CodePudding user response：

You could use your TrueViewPort as if else statement as you can see you given your TrueViewpor with 2 different <div>

Lets assume that you have any events on your javascript

  $(document).ready(function() {
    $.ajax({
       success: function(result) {
          $(".no-page").html(result); //if no data. no carousel should detect
          $('#wishlist-carousel').html(result); 
          //Put here your owl function
       }
    })
  })

Then change your .cshtml to:

<div >
    <div >
        <div >
            <div >
                <div >
                    <div  id="wishlist-carousel"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div ></div> //separate these one, so if there's no data, the result will go here.

Then on your TrueViewPort:

@if (Model != null && Model.Rows.Count != 0)
{
    @for (int i = 0, x = 1; i < Model.Rows.Count; i  , x  )
    {
        //add a <style> here to hide the no-page.
    }
}
else 
    {
       //add a <style> here to hide the owl carousel
    }

CodePudding user response：

You could just return one view and make the judement with the count of the target data in your target div

<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
    $(document).ready(function ()  {
        $.ajax({
            url: "https://localhost:44332/Home/Partial",
            success: function (result) {                
                var a = $("#test").children().length;
                console.log(a);
                if (a == 0) {
                    $(".no-page").html(result);
                }
                else {
                    $("#wishlist-carousel").html(result);
                }
            },
            error: function (msg) {
                console.log(msg);
            }
        })
        return false;
    });
</script>

<div >
    <div >
        <div >
            <div >
                <div >
                    <div  id="wishlist-carousel">
                        
                    </div>
                </div>
            </div>
        </div>
        <div ></div>
    </div>
</div>
<div id="test">
    <a>test</a>
</div>

Result1： There's a "test" text in <div id="test"></div> Delete the text: