CODEWITHSUNDEEP
asp.net-mvcasp.net-ajaxpartial-viewsasp.net-mvc-partialviewremote-validation
Izzy
Izzy

Reputation: 1

remote validation does not work for partial view

I have order with several order items and I use partial view to load order items. I want to validate OrderLineItemEntity's ProductCode but it does not work. Every other property validation works which is not in partial view. How can I force to validate partial view too?

Order View:

<div id="orderLineItemsContainer" class="form-group">
   @Html.EditorFor(model => model.OrderLineItems)
</div>

OrderLineItems View:

@model SalesManagementSystem.Models.OrderEntity 
@Html.EditorFor(model => model.OrderLineItems)
@section Scripts {
   @Scripts.Render("~/bundles/jqueryval")
}

OrderLineItem View:

@model SalesManagementSystem.Models.OrderLineItemEntity
<div class="form-inline col-md-12" style="margin-bottom: 5px">
<div class="form-group col-md-6">
    @Html.LabelFor(model => model.ProductCode, htmlAttributes: new { @class = "control-label col-md-4" })
    <div class="col-md-8">
        @Html.EditorFor(model => model.ProductCode, new { htmlAttributes = new { @class = "form-control", id = "ProductCode" } })
        @Html.ValidationMessageFor(model => model.ProductCode, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group col-md-6">
    @Html.LabelFor(model => model.Quantity, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Quantity, new { htmlAttributes = new { @class = "form-control", id = "ProductQuantity" } })
        @Html.ValidationMessageFor(model => model.Quantity, "", new { @class = "text-danger" })
    </div>
</div>

@if (Model != null)
{
    <a onclick="deleteRow('@Model.ProductCode')">Delete</a>
}
</div>
@section Scripts {
   @Scripts.Render("~/bundles/jqueryval")
}

ValidationController:

public JsonResult IsProductCodeValid(int ProductCode){...}

This is how I update my order items when new item is added. I think I need to add something here.

$("#btnAdd").click(function () {
        var order = {
            'Id': $("#Id").val(),
            'Date': $("#Date").val(),
            'ConsultantId': $("#ConsultantId").val(),
            'OrderLineItems': getOrderLineItems()
        };

        $.ajax({
        url: '@Url.Action("AddOrderItem", "Orders")',
        type: "POST",
        data: {
            order: order
        },
        success: function (partialView) {
            $("#orderLineItemsContainer").html(partialView);
        },
        failure: function (response) {
            alert("failed");
        }
        });
    });

Update: I tried adding

jQuery.validator.unobtrusive.parse("#ProductCode");

And

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

Still not working

Upvotes: 0

Views: 171

Answers (1)

Serdar GUL
Serdar GUL

Reputation: 47

you can add a name and id (like ProductForm) property to your partial view form after that, in cshtml file's script section you can add a screen control method like this

function ScreenControl() {
    if ($('#ProductForm')[0].checkValidity()) {
        // do what do you want
    } else {
        $("#btnSave2").click();
    }
}

and you should add 2 buttons to bottom of the form, one of them should be hidden like

<label class="col-md-1 control-label"></label>
    <div class="col-md-1">
        <button class="btn btn-sm btn-primary" style="float: right" type="button" id="btnSave" name="btnSave" value="Save" onclick="ScreenControl()">
            <i class="fa fa-save"></i>
            Save
        </button>
    </div>
    <button class="btn btn-sm btn-primary" type="submit" id="btnSave2" name="btnSave2" value="Save" style="display: none">
        <i class="fa fa-save"></i> Save
</button>

Upvotes: 0

Related Questions