MVC Page Validation is returning an Extra Copy of UI Fom When Page Does Not Validate?

I am trying to Validate the Last Name on the UI Form.  The page comes back with a duplicate form.
View:
    <!-- Name and Date of Birth Tab -->
    <div id="name-date-of-birth-tab" class="tab-pane active well well-sm">
         @using (Html.BeginGroup())
        {
            <div class="form-group">
                <div class="row">
                    <div class="col-md-4">
                        @Html.LabelAndRequiredFor(model => model.PurposeCode, new {@class = "form-label"})
                        <span class="search-purpose-code">
                            @{ Html.RenderPartial("_HelpButton", new BCA.GunPermit.Models.HelpButtonParameters
                               {
                                   ImageButtonClass = "helpButton",
                                   ButtonId = "search-purpose-code"
                               }
                                   ); }
                        </span>
        @using (Html.BeginGroup())
        {
            <div class="form-group">
                <div class="row">
                    <div class="col-md-3">
                        @Html.LabelAndRequiredFor(model => model.LastName, new {@class = "form-label"})
                        <span class="search-last-name">
                            @{ Html.RenderPartial("_HelpButton", new BCA.GunPermit.Models.HelpButtonParameters
                               {
                                   ImageButtonClass = "helpButton",
                                   ButtonId = "search-last-name"
                               }
                            ); }
                        </span>
                        @Html.TextBoxFor(model => model.LastName, new {@class = "form-control", @placeholder = "Enter last name"})
                        @Html.ValidationMessageFor(model => model.LastName)
                    </div>

Open in new window


Model:
        [Required(ErrorMessage = "Last name is required")]
        [Display(Name = LabelConstants.LastName, Prompt = PromptConstants.LastName)]
        public string LastName { get; set; }

Open in new window


Controller:
        [HttpPost]
        [AjaxOnly]
        public ActionResult GunPermitSearch(SearchModel searchModel)
        {
            // Returning Validation
            if (!ModelState.IsValid)
            {
                return View("Search", searchModel);
            }

Open in new window

danielolorenzAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Bob LearnedCommented:
"The page comes back with a duplicate form."
I am not sure that I completely understand what you mean by a duplicate form.  Does this happen only when you added validation?
0
danielolorenzAuthor Commented:
Yes, that happens when I add validation and return the model to the view.  The validated form is displayed below the previous form when I return the model to the view.  It appears I need a screen refresh for some reason to clear the original form.
0
Bob LearnedCommented:
OK, I don't see anything out of the ordinary.

1) MVC version?:

2) Any special client-side scripts?

3) What is Html.BeginGroup, and where did you get that helper extension?
0
C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

danielolorenzAuthor Commented:
1)  I am using MVC Version 4.

2)  No, I am only using standard JQuery

3)  The Html.Being Group is only a CSS group partition.
0
Bob LearnedCommented:
"The Html.Being Group is only a CSS group partition."
Where is that extension defined?  I haven't used that one before, so I am curious if it is a custom class, or a 3rd-party class.

Can you attach a screen shot of what the page looks like?
0
danielolorenzAuthor Commented:
I am looking into Html.Begin Group.
0
Bob LearnedCommented:
If you select that option, you should be able to go to definition (F12), and it should show what library and namespace it is declared in.  This might give a clue as to what it is.
0
danielolorenzAuthor Commented:
I took out the Html.Begin Group and that did nothing.

I found out what the problem is.  The form is being returned in the UpdateTargetId div tags:

@using (Ajax.BeginForm("GPBackgroundCheckManagementSearch", null, new AjaxOptions
{
    HttpMethod = "POST",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "gp-background-check-management-search-results",
    //OnBegin = "ajaxValidate",
    OnComplete = "onGPBackgroundCheckManagementSearchComplete"
}, null))
{

Open in new window


Now, How do I only return the validation message to the form itself?

Thanks,

Dan
0
Bob LearnedCommented:
Dan,

Are you saying that  "gp-background-check-management-search-results" is the ID for the form.  

It is my understanding that the UpdateTargetId is for the control where status messages are displayed, like a TextBox:

p>
    Page Rendered: @DateTime.Now.ToLongTimeString()
</p>
<span id="status">No Status</span>
<br />   
@Ajax.ActionLink("Update Status", "GetStatus", new AjaxOptions{UpdateTargetId="status" })
<br /><br />
@using(Ajax.BeginForm("UpdateForm", new AjaxOptions{UpdateTargetId="textEntered"})) 
{
  @Html.TextBox("textBox1","Enter text")  
  <input type="submit" value="Submit"/><br />
  <span id="textEntered">Nothing Entered</span>
}

Open in new window

0
danielolorenzAuthor Commented:
Thanks.

So, it is to my understanding that you can use @Ajax.ActionLink ajax command to update an error message label.
0
Bob LearnedCommented:
I just realized that I didn't include the Micro$oft link:

https://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.updatetargetid(v=vs.118).aspx

There isn't any explanation for the @Ajax.ActionLink, but my guess is that it returns some string content, that can be displayed on the label.

If you read this CodeProject article, it talks about setting UpdateTargetId to a <div>, which I haven't seen before:

Unobtrusive AJAX Form Validation in ASP.NET MVC
http://www.codeproject.com/Articles/460893/Unobtrusive-AJAX-Form-Validation-in-ASP-NET-MVC

You will notice I specified UpdateTargetId as “ParentDiv”, which does not yet exist. We will want this as the pattern to use for the entire microbrewery site, so in Views/Shared edit _Layout.cshtml and wrap the RenderBody call in a DIV with an ID of “ParentDiv”. This will place a DIV around the entirety of the Index view when it’s rendered, whether as a normal GET or loaded up after POST with an error-ridden view! Future pages can rely on using this immediate parent as a target too.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
danielolorenzAuthor Commented:
Very informative article.  It was very helpful.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
C#

From novice to tech pro — start learning today.