Question

I have a partial view which contain JavaScript and Ajax, but does not run JavaScript code when I press the create button

my partial view (“_Campus”), ava script code I put in the partial view and not in the parent view:

@model RolesMVC3.Areas.Superusuario.Models.CampusViewModel
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
           <script type="text/javascript">
               $(document).ready(function () {
                   $("#University").change(function () {
                       var idDept = $(this).val();
                       $.getJSON("Office/GetCityList", { id: idDept },
                function (myData) {
                    var select = $("#city");
                    select.empty();
                    select.append($('<option/>', {
                        value: 0,
                        text: "-- select city --"
                    }));
                    $.each(myData, function (index, itemData) {
                        select.append($('<option/>', {
                            value: itemData.Value,
                            text: itemData.Text
                        }));
                    });
                });
                   });
               });
</script>

  @using (Html.BeginForm())
  {
       @Html.DropDownListFor(model => model.IdUniversity,
                   new SelectList(ViewBag.IdUniversity as System.Collections.IEnumerable, "IdUniversity", "Name"),
        "-- select university --", new { id = "University" })

        @Html.DropDownListFor(model => model.City,
        new SelectList(Enumerable.Empty<SelectListItem>(), "IdCity", "NameCity"), "-- select city --",
        new { id = "city" })
  }

the parent view:

@model RolesMVC3.Models.OFFICE

@{
    ViewBag.Title = "Create";
}

<h2>OFFICE</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>


@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>OFFICE</legend>

        <fieldset>
         @Html.Partial("_Campus")
        </fieldset>


        <div class="editor-label">
            @Html.LabelFor(model => model.AddressOffice)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.AddressOffice)
            @Html.ValidationMessageFor(model => model.AddressOffice)
        </div>



        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

how I do to run JavaScript code?

Answer 1

Check that the json is coming back in the format you are expecting

$.each(myData, function (index, itemData) {
                        select.append($('<option/>', {
                            value: itemData.Value,
                            text: itemData.Text
                        }));

try this instead maybe

$.each(myData, function (index, itemData) {
                        select.append($('<option/>', {
                            value: index,
                            text: itemData 
                        }));