How can I use boolean on datatype: html?

Question

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 class="item">
            <div class="text-center">
                <div class="card">
                    <div class="card-img-top">
                        <img src="~/images/link/@Model.Rows[i][0]" />
                    </div>
                    <br />
                    <br />
                    <div class="card-body">
                        @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 class="container">
        <div class="text-center">
            <div class="not-found-404">
                404
            </div>
                <br />
            </div>
            <div class="not-found">
                ITEMS NOT FOUND
            </div>
                <br />
            <div class="not-found-title">
                Don't you have any want on the shop?
            </div>
                <br />
            <div class="not-found-content">
                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 class="container">
    <div class="text-center">
        <div class="true">
            <div class="card">
                <div class="card-body">
                    <div class="owl-carousel owl-theme" id="wishlist-carousel"></div>
                </div>
            </div>
        </div>
        <div class="no-page"></div>
    </div>
</div>

Its a log for `else` element, but when I use `result == true` even the data is `true` it will throw on `else` as well. — エース, Jun 25 '22 at 05:30
Add `console.log(result)` and add the results to your question. — Ouroborus, Jun 25 '22 at 08:34
you are making an ajax call to your controller action and returning a view!! you should return a JSON result, instead of `return View("TrueViewPort");` use `return JsonResult(true)` — YoussefSell, Jun 25 '22 at 13:19
Is it still going to call my another `.cshtml` which is my `TrueViewPort`? — エース, Jun 27 '22 at 00:08

score 1 · Accepted Answer · answered Jun 27 '22 at 04:09

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 class="container">
    <div class="text-center">
        <div class="true">
            <div class="card">
                <div class="card-body">
                    <div class="owl-carousel owl-theme" id="wishlist-carousel"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="no-page"></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
    }

I tried your code given, but it gives me a blank `owl-item` which is the ` — エース, Jun 27 '22 at 04:53
There are few tricks that can be used, you can base it on here [Owl Carousel](https://stackoverflow.com/questions/27947789/how-to-re-render-a-owl-carousel-item) — 新Acesyyy, Jun 27 '22 at 05:01

Ruikai Feng · Answer 2 · 2022-06-27T05:59:05.263

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 class="container">
    <div class="text-center">
        <div class="true">
            <div class="card">
                <div class="card-body">
                    <div class="owl-carousel owl-theme" id="wishlist-carousel">
                        
                    </div>
                </div>
            </div>
        </div>
        <div class="no-page"></div>
    </div>
</div>
<div id="test">
    <a>test</a>
</div>

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

How can I use boolean on datatype: html?

2 Answers2