How to call a javascript function that is in a separate cshtml file (.js)?

Asked

Viewed 643 times

0

Hello, I have a page where the data of a DropDownList are the result of the selection of a DropDownList previous to this, I created a function with javascript and ajax to realize the filter, everything works when the javascript is inside the cshtml, but when I separate the function into a file .js, I can no longer make the call to action within the controller. Below is the piece of code where I want to call the function that is in the file javascript:

   <div class="col-sm-3 col-xs-12">
      <div class="form-group">
         @Html.DefaultLabelFor(model => model.CompanhiaId)
         @Html.EditorFor(model => model.CompanhiaId, new { Items = Model.CompanhiaList , @onchange = "diretoria(1,'listarByCompany','skill')" } )
         @Html.ValidationMessageFor(model => model.CompanhiaId)
      </div>
   </div>

And here the function that is in the file javascript:

    $.ajax({
        type: "POST",
        url: "@Url.Action('listarByCompany','skill')",
        data: {
            id: id
        },
        success: function ajaxSucceess(response) {

            var dir = $("#DiretoriaExecutivaId").empty(); //Removendo todos os itens
            dir.append($("<option>Selecione...</option>"));

            $.each(response, function (i, response) {

                dir.append($('<option>', {
                    value: response.Value,
                    text: response.Text
                }));
            });
        }
    });

Can anyone tell me how to do this?

javascript asp.net-mvc-5 razor

  • You are including the javascript file?

  • Yes Pbras, after doing the filter and returning the json in the action, I end up assembling the Dropdownlist with what was returned in the filter.

  • Where is the function diretoria(){}

  • It is inside the directory.js file in the web project’s script folder.

  • Place <script src="@Url.Content("~/Scripts/SEU_SCRIPT.js")" type="text/javascript"></script> in your cshtml creating a proper . js for it, because putting yourself in the default layout will not have all dependencies yet when finished loading.

1 answer

0


Thanks for your attention and help, I managed to solve the problem as follows:

<script src="@Url.Content("~/Scripts/diretoria.js")" type="text/javascript"></script>

Following Victor Laio’s comment in the first line (thank you Victor), I took the htmlhelper call:

Before:

@Html.EditorFor(model => model.CompanhiaId, new { Items = Model.CompanhiaList , @onchange = "diretoria(1,'listarByCompany','skill')" } )

Afterward:

@Html.EditorFor(model => model.CompanhiaId, new { Items = Model.CompanhiaList } )

and added the code below in cshtml to call the javascript function in the Dropdownlist change event:

<script> $("#CompanhiaId").change(function () { diretoria($("#CompanhiaId").find(":selected").val(), null, "listarByCompany", "skill", "DiretoriaExecutivaId"); }); </script>

Browser other questions tagged javascript asp.net-mvc-5 razor

You are not signed in. Login or sign up in order to post.