How to write a client side custom java script for validation in partial view asp.net mvc

Question

I am trying to write a custom java script for validation in my partial view. I am displaying my partial view using a Pop-up.

To Display my Partial View as a Pop-up, I am doing this.

  <a href="#" title="Genrate Purchase Order" class="btn btn-success genratepo" onclick="GenratePO(@item.Id)"><i class="fa fa-address-card"></i></a>

<script>
     function GenratePO(orderId) {
         debugger;
         var url = "/Order/GenratePO?OrderId=" + orderId;

                 $("#myModalBody").load(url, function (data) {
                     $("#myModalBody").html(data);
                     $("#myModal").modal("show");
                 });
             }

After that I am returning my partial view through controller

if(orderId < 1)
        {
            ShowAlert("Invalid Id or Record Deleted",AlertStyle.Danger);
            return RedirectToAction("Index");
        }
        var orderpreferenceData= _unitOfWork.OrderPreference.FindBy(m => m.OrderDetailId == orderId && m.IsDeleted != true && m.IsActive == true).FirstOrDefault();
        var viewModel = new PurchaseOrderViewModel()
        {
            OrderId = orderId,
            VendorList = GetVendorSelectList(),
            FabricList = GetFabricSelectList(),
            FabricId = Convert.ToInt32(orderpreferenceData.FabricId)
        };
        return PartialView("GenratePO",viewModel);

But when i am trying to write my custom java script method in partial view It is not invoking.

<script type="text/javascript">

     $(document).ready(function () {
         alert("hello");
         $("#btn_Submit").click(function () {

             debugger;
             var selectedindex = $(".ddlVendor").prop('selectedIndex');

             if (selectedindex < 0) {
                 $(".lblmsg").text("Select Vendor First");
             }
             var orderQuantity = $(".txtOrderQuantity").val();

             if (!jQuery.trim(orderQuantity).length > 0) {
                 $(".lblmsg").text("Please Enter Order Quantity");
             }

         });

     });

I didn't know why this is happening and the java script is not working.

No. errors in browser console. I also tried to write the custom java script in page from where i am calling my partial view but no luck. — Bhupendra, Jun 13 '18 at 06:39
To troubleshoot , Try your java script validation without partial view , I mean in main view. — Shaiju T, Jun 13 '18 at 06:42
Are you able to hit "/Order/GenratePO?OrderId=" + orderId;" from first JavaScript? — Sahil Sharma, Jun 13 '18 at 06:45
@SahilSharma yes. everything is working fine , except the client side custom validation part. The validation part is not working. — Bhupendra, Jun 13 '18 at 06:47

Sahil Sharma · Answer 1 · 2018-06-13T06:57:05.683

Following the comments, for second JavaScript try this:

    <script type="text/javascript">

         $(document).ready(function () {
             alert("hello");

             $("#btn_Submit").on('click', function () {
                 alert("hello again");  //Just to check if it is working or not
                 debugger;
                 var selectedindex = $(".ddlVendor").prop('selectedIndex');

                 if (selectedindex < 0) {
                     $(".lblmsg").text("Select Vendor First");
                 }
                 var orderQuantity = $(".txtOrderQuantity").val();

                 if (!jQuery.trim(orderQuantity).length > 0) {
                     $(".lblmsg").text("Please Enter Order Quantity");
                 }

             });

         });
</script>

score 0 · Answer 2 · answered Jun 13 '18 at 07:15

Since the content of your partial view is dynamically added into your DOM , so the dynamic elements are not registered with your Javascript click function, to make your click work you can use Jquery .on event handler function.

<script type="text/javascript">

     $(document).ready(function () {
         alert("hello");
     $(document).on('click', '#btn_Submit', function(){
         alert("click works");
             debugger;
             var selectedindex = $(".ddlVendor").prop('selectedIndex');

             if (selectedindex < 0) {
                 $(".lblmsg").text("Select Vendor First");
             }
             var orderQuantity = $(".txtOrderQuantity").val();

             if (!jQuery.trim(orderQuantity).length > 0) {
                 $(".lblmsg").text("Please Enter Order Quantity");
             }

         });

     });


</script>

If you are using Jquery validation plugin with MVC then check this post.

Refrences:

1.

2.

score 0 · Answer 3 · answered Jun 13 '18 at 09:34

This worked for me.

<script type="text/javascript">

$(document).ready(function () {

    $("#myModal").on("submit", "form", function (event) {
        event.preventDefault();
      debugger;
        var selectedindex = $(".ddlVendor").prop('selectedIndex');

        if (selectedindex < 0) {
            $(".lblmsg").text("Select Vendor First");
        }
        var orderQuantity = $(".txtOrderQuantity").val();

        if (!jQuery.trim(orderQuantity).length > 0) {
            $(".lblmsg").text("Please Enter Order Quantity");
        }
    });
});

And to make this work i have to write my java script in the page from where i am calling my Partial View.

How to write a client side custom java script for validation in partial view asp.net mvc

3 Answers3