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?
 
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
 
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
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
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
 
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
 
danielolorenzAuthor Commented:
Very informative article.  It was very helpful.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.