使用Jquery检查MVC Model属性是否为空

Question

Ok I have looked a while for some answers to my question but seems like the accepted answers works for some but for me isn't.

Below is my current implementation to check if @Model.ListImages is not null

var img = @((Model != null && Model.ListImages != null).ToString().ToLower());
if (img) {
    if (@Model.ListImages.Count() + this.files.length > 8) {
        this.removeFile(file);
        $('#errorMessage').html("Cannot upload more then 8 images for a product.");
        $("#errorDiv").show();
        window.scrollTo(0, 0);
     }
}

The Model

public class ProductVM
{
    [Required]
    public int Id { get; set; }

    [Required]
    [Display(Name = "Category")]
    public int IdCategory { get; set; }

    [Required]
    [Display(Name = "Collection")]
    public int IdCollection { get; set; }

    [Required]
    [Range(0.1, 20000, ErrorMessage = "Please enter a value between 0 and 20000")]
    public decimal Price { get; set; }

    [Required]
    [Display(Name = "Product Name")]
    [StringLength(100, ErrorMessage = "Product name must contain at least {2} characters", MinimumLength = 6)]
    public string Name { get; set; }

    [Required]
    [Display(Name = "Product Description")]
    [StringLength(500, ErrorMessage = "Product name must contain at least {2} characters", MinimumLength = 25)]
    public string Description { get; set; }

    public HttpPostedFileBase[] Listfiles { get; set; }


    public virtual IEnumerable<SelectListItem> Categories { get; set; }
    public virtual IEnumerable<SelectListItem> Collections { get; set; }
    public virtual IEnumerable<Reviews> ListReviews { get; set; }
    public virtual ICollection<Images> ListImages { get; set; }

}

Answer 1

The problem is you are mixing JavaScript and Razor which ought to be avoided. It can be done if done carefully but it leads to hard to read ie hard to debug and maintain.

Your code is assuming the Razor will not execute based on JavaScript evaluation. However, this is not the case and the Razor statement will always attempt to evaluate.

// this looks like JavaScript with in-lined Razor.
// The Razor is executed before this JavaScript is executed.
var img = @((Model != null && Model.ListImages != null).ToString().ToLower());

// this is a JavaScript conditional based on a run-time value
if (img) {
    // @Model.ListImages.Count() is evaluated by Razor BEFORE
    // (and in a different context) the if(img) above.
    // But there isn't a Razor condition preventing the execution of .Count()
    // if ListImages is not initialized.
    if (@Model.ListImages.Count() + this.files.length > 8) {
         this.removeFile(file);
   }
}

So you need an Razor conditional to output different JavaScript code.

@* Razor evaluated on the server while rendering the view *@
@if (Model != null && Model.ListImages != null)
{
    var count = Model.ListImages.Count;
    <script>
        // JavaScript evaluated in the client
        var images = @count;  // "hardcoded" count on the server
        if (images > 0)
        {
            removeFile()
        }
    </script>
}

A cleaner way to avoid the mixing is to encode the Razor value into an HTML element.

<div id="image"
     data-count="@((Model != null && Model.ListImages != null) ? Model.ListImages.Count : 0)">
</div>

Then get the value in JavaScript which could run without dynamically outputting different js code.

var count = $("#image").data("count");
if  (count > 0) {
    removeFile();
}

Answer 2

var length = "@(Model.ListImages.Count())";
if(length > 0){
   // do something
}

Answer 3

JavaScript has a tricky (if you don't know it) way of checking conditions for truthy and falsy values. When you check for a variable directly in the condition like you did

if (img)

it doesn't actually check if the value of the variable you provided is false or true, but if that object exists . So, even if img is false, your code will go there and you'll get a null reference exception.

Try a simple

if (img != false)

but, as suggested in the other answer,

if (@Model && @Model.ListImages && @Model.ListImages.Count() > 0)

is better