ModelState applied to all forms in MVC view

Question

I am experiencing an issue where the model state is being applied to every form that exists on a single page. For example, if validation is not met e.g. the user doesn't complete a required field, then the message ' x field is required' is applied to every form after post back. The page has two 'different' (but exactly the same) forms on it

comment reply form (sits after every comment and can occur x amount of times)
new comment reply form (sits at the bottom of all the comments and exists once)

I am building up a comments section where foreach comment a user can leave a comment, this means that the comment reply form can exist x amount of times, if there are 10 comments then it will be on the page 10 times.

I have the following (scaled down for explanation purposes) code

Model

public string FullName { get; set; }
public string Email { get; set; }
public string Comment { get; set; }

View

@model BlogCommentsViewModel

// when this is pressed use js to show the form
<button type="button" id="form-toggle-btn" class="btn btn-md btn-primary-filled js-reply-comment-button">
    <strong>REPLY <i class="fa fa-reply" aria-hidden="true"></i></strong>
</button>

@foreach (var item in Model.BlogComments)
{   
  ///blog comment markup here
             
   div class="reply-comment-form js-reply-comment-form">

@using (Html.BeginUmbracoForm<BlogCommentSurfaceController>("CreateComment", null, new { id = "reply-form"}))
{
    @Html.AntiForgeryToken()

    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                @Html.LabelFor(m => m.FullName)
                @Html.TextBoxFor(m => m.FullName, new { placeholder = "Full Name", @class = "form-control" })
                @Html.ValidationMessageFor(m => m.FullName)
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                @Html.LabelFor(m => m.Email)
                @Html.TextBoxFor(m => m.Email, new { placeholder = "Email", @class = "form-control" })
                @Html.ValidationMessageFor(m => m.Email)
            </div>
        </div>
        <div class="col-sm-12">
            <div class="form-group">
                @Html.LabelFor(m => m.Comment)
                @Html.TextAreaFor(m => m.Comment, new { placeholder = "Message", @class = "form-control", @rows = 7 })
                @Html.ValidationMessageFor(m => m.Comment)
            </div>
        </div>

        <button type="submit" id="form-reply-submit" class="btn btn-md btn-primary-filled btn-form-submit">
            <strong>POST REPLY</strong>
        </button>

    </div>

}                                        
}

Controller

[HttpPost]
public ActionResult CreateComment(BlogCommentViewModel model)
{
    if (!ModelState.IsValid || model == null)
       return CurrentUmbracoPage();                 

       return RedirectToCurrentUmbracoPage();
}

A form only shows when the 'post reply button is pressed, I use a small bit of JS with some CSS to show\hide a form' The problem I have, if validation fails it applies to all forms on the page. This is using jquery unobtrusive on the clientside

How can I restrict this to only the form that is interacted with ?

I read this which feels similar Multiple forms in MVC view: ModelState applied to all forms

Any help will be great.

Thanks

I can see you have created a form inside a loop so here multiple form tags created correctly? — jishan siddique, Dec 28 '20 at 11:33
Yes that's correct for every loop there will be a form (with form tag) if I loop 10 times for 10 comments then there will be 10 form tags. I tried creating a random guid and assigning a unique id but it didn't make a difference. Thanks — Paul, Dec 28 '20 at 12:16
It looks to me like the validators are working as expected. You are outputting the same field for the same model several times (regardless of whether it's inside a loop and different forms). The link you provided yourself is giving you a way to make this work. What's the mystery here? — JuanR, Dec 29 '20 at 04:57
Yeah, that's correct, it's validating as expecting but it's validating every form instance which I wasn't expecting, I was expecting it to only care about the form in scope. I agree this is likely because all the properties have the same name. I tried changing the form model names but that didn't work. The mystery is my lack of understanding hence my turning to this forum. I had an incline that the link I posted maybe a possible workaround but I wasn't sure if I could apply it to my scenario and it all feels overkill to what I'm trying to achieve here! — Paul, Dec 30 '20 at 10:11

ModelState applied to all forms in MVC view

0 Answers0