locked
MVC - field validation with partial views RRS feed

  • Question

  • User772232693 posted

    Hello. 
    I came across this scenario.
    I had two equal partial views in my page - so that i can compare their values. 
    The issue is that i can add comments to one of them separated from the other - and i want to validate that field. 
    But because there are two fields with the same name inside the form - this will trigger validation and display the error message for both fields.  
    How can I overcame this? 

    view model: 
    public class Model

    [Required] public string Comment { get; set; }}

    Thursday, June 4, 2020 1:28 PM

All replies

  • User1686398519 posted

    Hi,  dr.Xis

    I want to confirm with you, are these two fields with the same name from different models?

    1. If these two fields are from the different models, you can use "Tuple" to achieve your needs.
      • More details, you could refer to below code:

    Model

        public class PartialModel {
            [Required(ErrorMessage = "Please enter Comment1.")] 
            public string Comment { get; set; }
        }
        public class PartialModel2
        {
            [Required(ErrorMessage = "Please enter Comment2.")]
            public string Comment { get; set; }
        }

    Controller

            public ActionResult IndexTest()
    {
    return View();
    }
    [HttpPost]
    public ActionResult IndexTest(PartialModel Item1, PartialModel2 Item2)
    {
    if (ModelState.IsValid) {
    var Comment1 = Item1.Comment;
    var Comment2 = Item2.Comment;
    }
    return View();
    }

    IndexTest

    @using (Html.BeginForm("IndexTest", "Home"))
    {
    for (int i = 1; i <= 2; i++)
    {
    Html.RenderPartial("_PartialView" + i);
    }
    
    <button type="submit">submit</button>
    }
    <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>

    _PartialView1

    @using WebApplication1.Models;
    @model Tuple<PartialModel, PartialModel2>
    @Html.DisplayNameFor(tuple => tuple.Item1.Comment)
    @Html.TextBoxFor(tuple => tuple.Item1.Comment)
    @Html.ValidationMessageFor(tuple => tuple.Item1.Comment)

    _PartialView2

    @using WebApplication1.Models;
    @model Tuple<PartialModel, PartialModel2>
    @Html.DisplayNameFor(tuple => tuple.Item2.Comment)
    @Html.TextBoxFor(tuple => tuple.Item2.Comment)
    @Html.ValidationMessageFor(tuple => tuple.Item2.Comment)
      • Here is the result.

    • If these two fields are from the same model, you can use "Tuple" combined with jquey to achieve your needs.
      • More details, you could refer to below code:

    Controller

            public ActionResult PartialViewTest()
    {
    return View();
    }
    [HttpPost]
    public ActionResult PartialViewTest(PartialModel Item1, PartialModel Item2)
    {
    var Comment1 = Item1.Comment;
    var Comment2 = Item2.Comment;
    return View();
    }

    PartialViewTest

    @using (Html.BeginForm("PartialViewTest", "Home"))
    {
        for (int i = 1; i <= 2; i++)
        {
            Html.RenderPartial("_PartialView" + i);
            <span id="Message@(i)"></span>
        }
    
        <button type="submit">submit</button>
    }
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script>
        $('form').bind('submit', checkform);
        function checkform() {
            if ($("#Item1_Comment").val() == "") {
                $("#Message1").text("Comment1 is reuqired");
                $("#Message1").css("display", "block");
                return false;
            }
            if ($("#Item2_Comment").val() == "") {
                $("#Message2").text("Comment2 is reuqired");
                $("#Message2").css("display", "block");
                return false;
            }
        }
    </script>

    _PartialView1

    @using WebApplication1.Models;
    @model Tuple<PartialModel, PartialModel>
    @Html.DisplayNameFor(tuple => tuple.Item1.Comment)
    @Html.TextBoxFor(tuple => tuple.Item1.Comment)

    _PartialView2

    @using WebApplication1.Models;
    @model Tuple<PartialModel, PartialModel>
    @Html.DisplayNameFor(tuple => tuple.Item2.Comment)
    @Html.TextBoxFor(tuple => tuple.Item2.Comment)
      • Here is the result.


    Best Regards,

    YihuiSun

    Friday, June 5, 2020 6:25 AM