add record using partial view and bootstrap modal, But validation not work in asp.net core

Question

  I want to run activities from partial view in my project. but i can't Can't find any solution after searching. It would be great if some expert could help me solve my problem.
Thanks in advance to the veteran.

using Microsoft.AspNetCore.Mvc; using WebApplication4.Models; namespace WebApplication4.Controllers { public class Vender : Controller { public IActionResult Index() { return View(); } public IActionResult PartialLoad() { return PartialView("~/Views/Shared/_venderADDpartial.cshtml"); } [HttpPost] public IActionResult InserData(VenderModel np) { return View("Index"); } } }

@*Index.cshtml COde*@
@model VenderModel
<div class="col-10 text-end">
<button onclick="AddVender(0)" class="btn btn-primary btn-sm">Add New Vender</button>
</div>
<div class="modal fade" id="myModal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" class="close" data-bs-dismiss="modal">&times;</a>
<h3 class="modal-title text-bg-success" id="heading">Insert record</h3>
</div>
<div class="modal-body" id="myModalBodyDiv1">
</div>
</div>
</div>
</div>
@section Scripts{
<partial name="_ValidationScriptsPartial"></partial>
<script>
function AddVender() {
var url = "/Vender`enter code here`/PartialLoad";
$("#myModalBodyDiv1").load(url, function (data) {
$("#myModal1").modal("show");
})
}
</script>
}


@*_ValidationScriptsPartial.cshtml*@
@model VenderModel
<form id="myform">
<div class="form-group row p-1">
<div class="col-4">
<label asp-for="vender_Name">Vender Name</label>
 </div>
<div class="col-4  ">
<input asp-for="vender_Name" placeholder="VenderName" id="VenderName" autocomplete="off" />
<span asp-validation-for="vender_Name" class="text-danger"></span>
</div>
</div>
<div class="modal-footer">
<button type="button" onclick="addata()">Save</button>
</div>
</form>
@section Scripts{
<partial name="_ValidationScriptsPartial"></partial>
<script>
function addata() {
var objdata =
{
vender_Name: $('#VenderName').val()
};
$.validator.unobtrusive.parse($("#myform"));
if ($("#myform").valid()) {
$.ajax({
type: 'POST',
url: '/Vender/InserData',
data: objdata,
dataType: 'json',
dataType: 'json',
success: function () {
alert("Save")
},
error: function () {
alert("Not Saved")
}
});
}
}
</script>
}



using System.ComponentModel.DataAnnotations;
namespace WebApplication4.Models
{public class VenderModel
{
[Required(ErrorMessage = "Enter Vender name")]
public string vender_Name { get; set; }
}
}

Answer 1

Hi @jewel

add record using partial view and bootstrap modal, But validation not work in asp.net core

To solve this issue, just move the JavaScript scripts from partial view to the main view.

In the main view (index). the code like this: remember to change controller's name to yours in the url.

@model VenderModel

@{
    ViewData["Title"] = "Index2";
}
<div class="col-10 text-end">
    <button onclick="AddVender(0)" class="btn btn-primary btn-sm">Add New Vender</button>
</div>
<div class="modal fade" id="myModal1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" class="close" data-bs-dismiss="modal">&times;</a>
                <h3 class="modal-title text-bg-success" id="heading">Insert record</h3>
            </div>
            <div class="modal-body" id="myModalBodyDiv1">
            </div>
        </div>
    </div>
</div>
 
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script>
        function AddVender() {
            var url = "/Home/PartialLoad";
            $("#myModalBodyDiv1").load(url, function (data) {
                $("#myModal1").modal("show");
            })
        }

        function addata() {
            var objdata =
            {
                vender_Name: $('#VenderName').val()
            };
            $.validator.unobtrusive.parse($("#myform"));
            if ($("#myform").valid()) {
                $.ajax({
                    type: 'POST',
                    url: '/Home/InserData',
                    data: objdata,
                    dataType: 'json',
                    dataType: 'json',
                    success: function () {
                        alert("Save")
                    },
                    error: function () {
                        alert("Not Saved")
                    }
                });
            }
        }
    </script>
}

And the partial view like this:

@model Test.Models.VenderModel

<form id="myform">
    <div class="form-group row p-1">
        <div class="col-4">
            <label asp-for="vender_Name">Vender Name</label>
        </div>
        <div class="col-4  ">
            <input asp-for="vender_Name" placeholder="VenderName" id="VenderName" autocomplete="off" />
            <span asp-validation-for="vender_Name" class="text-danger"></span>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" onclick="addata()">Save</button>
    </div>
</form>
 

Then, the result as below:

---

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.

Best regards,

Dillion

Answer 2

This method is very effective. But it would have been better for me if the function addata() method could have been written in a partial view. Because I could use this partial view in another controller. No need to rewrite the code. Is it possible?