Check if property from Model in Asp.Net Mvc is not null in javascript function

Question

I have the following javascript function in Razor View.cshtml

<script type="text/javascript">
        $(function () {
            $("#form").change(function () {
                var selected = $(this).find("option:selected").text();
                $("#SelectedHouseDetailsText").val(selected);
                var a = $("#SelectedHouseDetailsText").value;
                if ( a!= null) {
                    $('.divForSelectHouse').Load('@Html.Partial("~/Views/ClientReservations/ReservationHouseDetails.cshtml",Model.MyProperty[Model.SelectedHouseDetailsText])')
                }               
            });
        })
    </script>

When I open this view field "SelectedHouseDetailsText" is not initialized at the begigning, how can I check if this not null to not display partial view when key value "SelectedHouseDetailsText" is not initialized?

C# code of Model

public class ReservationDetails
    {
        public ReservationDetails()
        {

        }
        public Reservation Reservation { get; set; }

        public List<ReservationHouseDetails> ReservationHouseDetails { get; set; }

        public Dictionary<string,ReservationHouseDetails> MyProperty { get; set; }

        public List<ReservationAttractionDetails> ReservationAttractionDetails { get; set; }

        public IEnumerable<SelectListItem> Houses { get; set; }

        public int SelectedHouseDetailsId { get; set; }

        public string SelectedHouseDetailsText { get; set; }
    }

Partial View

@model Repository.ViewModels.ReservationHouseDetails
@using Repository.Models


<div>
    <h4>Szczegóły domku + @Html.DisplayFor(model=>model.House.Name)</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.House.HouseType.Type)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.House.HouseType.Type)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.House.HouseType.Price)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.House.HouseType.Price)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.House.Description)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.House.Description)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Meal.Type)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Meal.Type)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Meal.Price)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Meal.Price)
        </dd>
    </dl>

    <table class="table">
        <tr>
            <th>
                @Html.DisplayName("LP")
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Participants.FirstOrDefault().Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Participants.FirstOrDefault().Surname)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Participants.FirstOrDefault().BirthDate)
            </th>
            <th></th>
        </tr>

        @foreach (var item in Model.Participants.Select((value, i) => new { i, value }))
        {
            Participant value = item.value;
            int index = item.i + 1;
            <tr>
                <td>
                    @index.ToString()
                </td>
                <td>
                    @value.Name
                </td>
                <td>
                    @value.Surname
                </td>
                <td>
                    @value.BirthDate
                </td>
            </tr>
         }

</table>
</div>

Answer 1

You can check it in javascript like below. Actually "@Html.Partial" is server side call. so it will be get called before JS. That is the issue. So you should have server side condition to solve this.

<script type="text/javascript">
@if(!string.IsNullOrEmpty(Model.SelectedHouseDetailsText))
{
        <text>
           $(function () {
            $("#form").change(function () {
                var selected = $(this).find("option:selected").text();
                $("#SelectedHouseDetailsText").val(selected);
                var a = $("#SelectedHouseDetailsText").value;
                if (a) {
                    $('.divForSelectHouse').Load('@Html.Partial("~/Views/ClientReservations/ReservationHouseDetails.cshtml",Model.MyProperty[Model.SelectedHouseDetailsText])')
                }               
            });
        })
       </text>
}
    </script>