How can i excute jquery method after razor syntax loop in Asp.net MVC5

Question

i have vias list i am generating dropdrown list using iteration . how can i run my jquery method after iteration complete.

                           @for (int i = 0; i < Model.Vias.Count; i++)                             {                                 <div class="col-12">                                     <div class="customInputs">                                         <div class="customIcons">                                             <i class="fas fa-map-marker-alt"></i>                                         </div>                                         @*<select class="form-control" id="dropoff"></select>*@                                         <div class="viasWrap">                                             <div class="viasSelect">                                                 @Html.DropDownListFor(m => m.Vias[i], new List<SelectListItem> { new SelectListItem { Text = Model.Vias[i], Value = Model.Vias[i] },  }, "--select--", new Dictionary<string, Object> { { "class", "form-control select-address" }, { "onchange", "app_address_calculation.calculateDistance(this)" } })                                                 @Html.ValidationMessageFor(model => model.Vias[i], "", new { @class = "text-danger" })                                               </div>                                             <button class="viaDltBtn" type="button"> <i class="bx bxs-trash"></i></button>                                         </div>                                      </div>                                 </div>                             }

this is my javascript method

app_booking_initialize.init();

Answer 1

The razor code runs server side and produces html, which may contain JavaScript. This html is returned to the browser which parses the html and executes the JavaScript.

to run JavaScript on the page load, generally the layout page has a scripts section where the razor page can define JavaScript to executed by the browser. As the script section is typically rendered after the page html, your JavaScript should be able to access the html via the dom.

See:

https://learn.microsoft.com/en-us/aspnet/core/mvc/views/layout?view=aspnetcore-7.0

Answer 2

Hi @AHSAN ALI,

How can i excute jquery method after razor syntax loop in Asp.net MVC5

You didn't specify how you want to achieve this.

I wrote a simple test for your reference, which is to click the viaDltBtn button after the razor syntax loop.

@for (int i = 0; i < Model.Vias.Count; i++)
{<div class="col-12">
        <div class="customInputs">
            <div class="customIcons">
                <i class="fas fa-map-marker-alt"></i>
            </div>
            @*<select class="form-control" id="dropoff"></select>*@
            <div class="viasWrap">
                <div class="viasSelect">
                    @Html.DropDownListFor(m => m.Vias[i], new List<SelectListItem> { new SelectListItem { Text = Model.Vias[i], Value = Model.Vias[i] }, }, "--select--", new Dictionary<string, Object> { { "class", "form-control select-address" }, { "onchange", "app_address_calculation_calculateDistance(this)" } })
                    @Html.ValidationMessageFor(model => model.Vias[i], "", new { @class = "text-danger" })
                </div>
                <button class="viaDltBtn" type="button">
                    <i class="bx bxs-trash"></i>
                </button>
            </div>
        </div>
    </div>
}
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function () {

        $('.viaDltBtn').click(function () {
            alert('click');

        });
      
    });
   
</script>

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.